There are hundreds of programming languages, frameworks, and tools out there. As a beginner, this is paralyzing. Which one should you learn? Which one is "the best"?
Here's the vibe coder's shortcut: pick a well-supported, popular stack and stick with it. The goal isn't to learn every tool — it's to build something real.
Our Stack (and Why)
Concept
A "tech stack" is the combination of programming languages, frameworks, and tools used to build an application. Think of it as choosing your ingredients before cooking — you don't need every spice in the store, just the right ones for your recipe.Next.js — Your Application Framework
Next.js is a React framework for building web applications. One framework handles both:
- Frontend — what users see in their browser (pages, buttons, forms)
- Backend — server logic that happens behind the scenes (saving data, sending emails)
Why Next.js? Huge community, excellent documentation, and Claude knows it extremely well. It uses React "components" (reusable building blocks for your UI) and has built-in routing (each page is a URL path).
TypeScript — JavaScript with Safety Rails
TypeScript is JavaScript with type annotations — extra hints that help catch errors before they happen.
Why TypeScript? Claude generates significantly better TypeScript than plain JavaScript. The types act as a contract between different parts of your code, so when Claude writes one piece, it's less likely to break another.
You don't need to learn TypeScript syntax. Claude handles it. You just need to know it exists and that it's catching errors for you in the background.
Tailwind CSS — Styling Made Simple
Tailwind CSS is a utility-first CSS framework. Instead of writing separate style files, you add classes directly to HTML elements.
Why Tailwind? It reads like shorthand English, and Claude is incredibly fluent in it.
Some examples:
bg-blue-500means "blue background"text-lgmeans "large text"p-4means "padding on all sides"flex items-centermeans "arrange items in a row, centered vertically"
DynamoDB — Your Cloud Database (Later)
Amazon DynamoDB is AWS's serverless database. We'll add it in Lessons 9-10.
Why DynamoDB? Generous free tier — 25GB of storage and 200 million requests per month, forever free. No servers to manage. Data is stored as flexible JSON-like documents.
What We're NOT Using (and Why)
- No PHP, Ruby, or Java — not because they're bad, but because our stack is optimized for AI-assisted development
- No WordPress — we're building something custom, and learning how apps work under the hood
- No Docker — too much complexity for a first project. Maybe next time.
Honest Note
There is no "best" tech stack. There are trade-offs everywhere. We chose this stack because it works extremely well with AI-assisted development, has a massive community for troubleshooting, and runs on AWS Free Tier. If you later want to explore Python, Go, or other tools, the vibe coding skills you learn here will transfer directly.Creating the Project
Now let's actually create our Next.js project. Open Claude Code in your waitlist-wizard folder:
Try It
In Claude Code, type: "Create a new Next.js project with TypeScript and Tailwind CSS in this folder. Use the app router."Claude will run
npx create-next-app@latest with the right configuration flags. This takes about a minute.
What Got Created
After the project is generated, you'll see a bunch of new files. Here are the important ones:
| File/Folder | What it does |
|---|---|
app/ |
Your pages and routes live here |
app/page.tsx |
The homepage of your application |
app/layout.tsx |
The shared layout wrapping all pages |
public/ |
Static files (images, favicon) |
package.json |
Lists your project's dependencies |
tailwind.config.ts |
Tailwind CSS configuration |
tsconfig.json |
TypeScript configuration |
Don't worry about understanding every file. Claude knows what each one does, and you'll naturally learn as you build.
Running Your App
Try It
In your terminal (or ask Claude), run:npm run dev
Then open your browser to http://localhost:3000. You should see the default Next.js welcome page. Your app is running!
Pro Tip
The development server "watches" your files. When you save a change, the browser automatically updates — no need to refresh manually. This instant feedback loop makes vibe coding feel almost magical.Git Checkpoint
Let's save our progress:
git add .
git commit -m "initialized next.js project with typescript and tailwind"