An app that actually works when you tap it, made by talking
What you will have built
Your own web app that saves data and installs on a phone
Claude Pro plan (or higher)required
This is the brain of vibe coding. Claude Pro ($20/mo) is plenty to start; if you build a lot every day, the Max plan gives you far more headroom. The free plan works for a taste but hits its limit quickly.
A computer (Windows or Mac)required
Specs barely matter. Any laptop with internet is enough.
Node.js (LTS version)required
The engine that runs your code. Grab the version marked 'LTS' from nodejs.org. We install it together in step 1.
VS Code (Visual Studio Code)required
A free code editor. You install the Claude Code extension here to 'code by chatting with AI'. Note it is different from Microsoft's Visual Studio (a separate, heavier IDE).
If a website is 'something you show', an app is 'something that works'. Users type, the data is saved, and it's still there when they reopen, that makes it a real app.
We build apps with web tech. No installer needed; add it to your phone's home screen and use it like a normal app (a PWA). No app-store review required.
Tip
Start small. A single 'to-do list' teaches the whole core of apps: input, save, delete.
Install the 'LTS' version from nodejs.org. Verify in the VS Code terminal below.
$node -v$npm -v
v20.18.0 10.8.2
If you see this, it worked
Two version numbers means success.
If you hit an error
After installing VS Code, install 'Claude Code' from Extensions and link your subscription via Sign in.
Tip
Describe your app idea to Claude first and ask 'which feature should I build first?', it'll order it for you.
Scaffold the app with the command below. Yes is recommended for TypeScript, Tailwind, and App Router.
$npx create-next-app@latest my-app
✔ TypeScript … Yes ✔ Tailwind CSS … Yes ✔ App Router … Yes Success! Created my-app
If you see this, it worked
'Success! Created my-app' means it worked.
Enter the folder and start the dev server. Open 'http://localhost:3000' in a browser. Keep this window open.
$cd my-app$npm run dev
▲ Next.js 15 - Local: http://localhost:3000 ✓ Ready in 1.4s
If you see this, it worked
The default screen means you're ready.
If you hit an error
Describe the behavior concretely. e.g. "Make app/page.tsx a 'to-do app'. There's an input box and an Add button up top; adding shows it in a list below; each item has a complete checkbox and a delete button; completed items show a gray strikethrough."
Click around in the browser and refine: 'move completed to the bottom', 'show a count'. For apps, the 'try it, then fix' loop matters most.
Tip
See a bug? Describe the symptom plainly: 'the complete button doesn't change anything'. Claude finds the cause and fixes it.
If you hit an error
Right now a refresh might wipe your data. Ask Claude: "Save the to-dos in the browser (localStorage) so they survive a reload." Now it feels like a real app.
Then: "Make this a PWA installable to the phone home screen, with an app icon and name." On mobile, 'Add to Home Screen' installs it like an app.
Tip
To confirm saving works, add an item, fully close the browser, reopen, if it's still there, success.
If you hit an error
Same as the website track. Deploy with the commands below; you get a real address you can open and install on your phone.
$npm i -g vercel$vercel
Vercel CLI ✅ Production: https://my-app.vercel.app
If you see this, it worked
A https://...vercel.app address means you're done.
If you hit an error
Congratulations, you built a real app that takes input, saves, and installs.
Next, add login, notifications, dark mode, and cross-device sync the same way. Form a team in the Career Arcade and tackle a bigger app together.
