The Story
You’re about to build a real application. Not a tutorial. Not a “Hello World.” A real thing that does something useful — an AI-powered trip planner that takes a destination and builds you a day-by-day itinerary with restaurants, activities, and travel tips.
And you’re going to do it in about two minutes.
Here’s the deal. This first version is going to work. You’ll type in “Tokyo, 5 days” and get back a beautiful itinerary. You’ll feel like a genius. You’ll want to show it to someone.
But this version has about a dozen things wrong with it. Security problems, data problems, design problems, scaling problems. You won’t see them yet. That’s fine. Every lesson after this one exists because this version breaks in a new and interesting way.
Think of this lesson as building a sandcastle. It’s real. It’s impressive. But the tide is coming.
Let’s build it.
Your Tool: Claude Code
Throughout this course, you’ll be building with Claude Code. It’s not a chat window where you copy and paste code — it’s a tool that lives right inside your project. You talk to it, and it creates files, edits code, runs commands, and builds things directly on your computer. You never need to manually copy anything.
Think of it like having a developer sitting next to you. You say “build me this,” and they actually type it into the project. The files appear. The code runs. You just guide the conversation.
Let’s set it up.
Step 1: Install Claude Code
macOS
- Open Terminal (Cmd+Space, type “Terminal”)
- Paste this and press Enter:
curl -fsSL https://claude.ai/install.sh | bash
Already use Homebrew? You can also run
brew install claude-codeinstead.
Windows (WSL) — Recommended for Windows
WSL (Windows Subsystem for Linux) gives you a Linux environment inside Windows. Many developer tools work better here, and we’ll need it in later lessons.
- Open PowerShell (search for it in Start menu)
- Type this and press Enter:
wsl --install - Restart your computer when it finishes
- After restart, open the Ubuntu app from your Start menu
- It will ask you to create a username and password — pick something simple, you’ll need these later
- Once you see a prompt, paste this and press Enter:
curl -fsSL https://claude.ai/install.sh | bash
Note: Throughout this course, when we say “open your terminal,” Windows WSL users should open the Ubuntu app, not PowerShell.
Windows (Native)
Heads up: WSL (the option above) is recommended. Some commands later in the course work better in a Linux environment. Native Windows works for now, but you may need to switch later.
- Open PowerShell (search for it in Start menu)
- Paste this and press Enter:
irm https://claude.ai/install.ps1 | iex
Linux
- Open your terminal
- Paste this and press Enter:
curl -fsSL https://claude.ai/install.sh | bash
Step 2: Get a Claude subscription
Claude Code runs on a paid Claude plan — it uses your subscription, no API key needed.
Two options:
- Claude Pro ($20/month) — good enough to start learning. From experience: gives about 1.5 hours of active coding, then a ~3 hour cooldown until the limit resets. Fine for working through lessons at a relaxed pace.
- Claude Max ($100/month) — for full-time work. Practically unlimited — you’ll likely never hit the limit.
Our recommendation: Start with Pro. If you find yourself constantly hitting the limit and waiting, upgrade to Max.
Sign up at claude.ai if you don’t already have an account.
Step 3: Learn a few terminal basics
A terminal is a text-based way to talk to your computer — you type a command, press Enter, and see the result.
Here are the commands you’ll use most often:
| What you want to do | macOS / Linux / WSL | Windows Native (PowerShell) |
|---|---|---|
| See where you are | pwd | cd (no arguments) |
| List files here | ls | dir |
| Go into a folder | cd folder-name | cd folder-name |
| Go up one folder | cd .. | cd .. |
| Create a folder | mkdir folder-name | mkdir folder-name |
| Create an empty file | touch filename | New-Item filename |
| Clear the screen | clear | cls |
Note: WSL users use the macOS / Linux / WSL column — WSL is a Linux environment.
Step 4: Create your project folder and start Claude Code
Don’t just create your project in the default terminal location — put it somewhere you can see it, like your Desktop. That way you can find and manage the files using your normal file explorer.
macOS
cd ~/Desktop
mkdir trip-planner
cd trip-planner
Windows (WSL)
WSL can access your Windows files through /mnt/c/. We’ll put your project on the Desktop so you can see it in File Explorer.
- Type
cd /mnt/c/Usersand press Enter - Type
ls— this shows all user folders. Find yours (it’s usually your name or the name you picked when setting up Windows). - Type
cd YOUR-FOLDER/Desktop(replace YOUR-FOLDER with what you saw in the list) - Then:
mkdir trip-planner && cd trip-planner
Windows (Native)
cd $HOME\Desktop
mkdir trip-planner
cd trip-planner
($HOME is a shortcut PowerShell understands — it points to your user folder automatically.)
Linux
cd ~/Desktop
mkdir trip-planner
cd trip-planner
Start Claude Code
Now, in your project folder, type:
claude
The first time you run it, it will open your browser to log in with your Claude account. Sign in and come back to the terminal.
You’re in. You should see a prompt where you can talk to Claude directly inside your project folder.
Quick tip: What am I looking at?
Claude Code runs in your terminal. When you type a message, Claude reads your project files, thinks about what you asked, and makes changes directly. You’ll see it create files, edit code, and run commands — all in real time. If you have a code editor open (like VS Code or Cursor), you’ll see the files appear and update as Claude works.
Before You Start: Getting an AI API Key for Your App
Your trip planner app needs an AI brain — a service it can ask “plan me a trip to Tokyo” and get a smart answer back.
Claude Code is your builder. The AI API is what your app uses to generate trips for users. These are two different things.
We recommend Google Gemini for your app. It’s the cheapest option and has the most generous free tier. That said, everything in this course works with any AI provider.
Option A: Google Gemini (Recommended for your app)
- Go to aistudio.google.com
- Sign in with your Google account
- Click “Get API Key” in the left sidebar
- Click “Create API key”
- Copy the key — it looks something like
AIzaSyD...long-string... - Save it somewhere safe (a notes app, NOT in your code — we’ll learn why in Lesson 3)
Pricing: Gemini Flash is free for up to 15 requests per minute, 1 million tokens per day. You won’t hit this limit while learning. Paid usage is ~$0.075 per million input tokens — far cheaper than alternatives.
Option B: OpenAI (GPT)
- Go to platform.openai.com
- Create an account (email + phone verification)
- Go to API Keys in the left sidebar
- Click “Create new secret key”
- Copy and save the key
Pricing: New accounts get $5 in free credits. GPT-4o costs ~$2.50 per million input tokens. Good for learning, but you’ll burn through free credits faster than Gemini.
Option C: Anthropic (Claude API)
- Go to console.anthropic.com
- Create an account (or sign in if you have one)
- Go to API Keys → Create Key
- Copy and save the key
Pricing: Claude Sonnet costs ~$3 per million input tokens. Note that the Claude API uses separate billing from your Claude Pro/Max subscription — it charges per use.
Which one should I pick?
If you don’t have a strong preference, go with Gemini Flash. It’s the cheapest, has the most generous free tier, and — this is actually useful for the course — it’s sometimes a bit slow on complex requests. That slowness becomes the perfect teaching moment in Lesson 16 when we learn about async operations.
Building It: The Prompt
Now the fun part. You’re going to tell Claude Code what to build, and it’s going to create everything right in your project folder. No copying. No pasting. No saving files. Just talk.
In your Claude Code session, type the following. If you chose a different AI provider, just swap “Gemini” for your provider’s name — Claude will figure out the rest.
The Prompt
⚠️ DON’T run this prompt. Read it as an example. It will work — it will build the app — but it puts your API key directly in the code, which is a security risk. We’ll build this app properly in the next section. For now, just read and understand what the prompt is doing.
Build me a trip planner app.
I want to type in a destination and number of days, and it uses the Google Gemini API
to plan my trip day by day.
For each day, show me a morning activity, an afternoon activity, an evening activity,
and a restaurant recommendation.
I want this to be a simple app I can open in my browser. No complicated setup —
just one file I can open directly.
Here's my Gemini API key: [PASTE YOUR KEY HERE]
Make it look clean and easy to read.
If you already ran this prompt: Go back to your AI provider (Gemini / OpenAI / Claude) and DELETE the API key you just used. You pasted it directly into the code, which means it’s sitting in plain text on your computer. Anyone who gets access to that file can use your key and run up your bill. Delete it now, and create a fresh one when we set up proper key management in Lesson 3.
Watch what happens. Claude Code will think for a moment, then start creating files in your project folder. You’ll see it write the code, and when it’s done, it’ll tell you how to open it.
Open the file in your browser. Type in a destination. Click generate. Wait a few seconds.
You should see a day-by-day itinerary appear on screen. Congratulations — you just built a web application. It’s real. It works. Users can type in a destination and get an AI-generated travel plan.
Take a moment to appreciate this. A few years ago, building something like this required weeks of work, a computer science degree, and a lot of frustration. You just did it with one conversation.
What You Just Built
If you open the file Claude Code created in a text editor — or just ask Claude Code “show me the code” — you’ll see it’s not random. There are three distinct parts, even though they’re all in one file:
The skeleton defines what’s on the page — a text box, a button, a place where results appear. If your app were a house, this is the walls and rooms. In the coding world, this is called HTML.
The clothing makes it look nice — fonts, colors, spacing, layout. Without it, your app would look like a plain text document from the nineties. This is called CSS.
The brain makes it actually do things. When someone clicks the button, this part grabs what they typed, sends it to the AI, waits for an answer, and puts that answer on screen. This is called JavaScript.
Skeleton, clothing, brain. Every web application in the world — from Google to Instagram to your trip planner — is built from these same three parts. The difference is just scale and organization, which is exactly what the rest of this course is about.
What’s Wrong With It (A Preview)
This works. But here’s a preview of everything that’s about to go wrong. You don’t need to understand these yet — each one becomes its own lesson.
Your API key is sitting right there in the code. Anyone who opens the browser’s developer tools can see it and use it to run up your bill. That’s Lesson 3.
If you change something and break the app, you have no way to go back to the version that worked. That’s Lesson 2.
The app looks like a homework assignment from 2003. No one will trust it with their trip planning. That’s Lesson 4.
The API key is in the browser, which means anyone can steal it. The logic should run on a separate server that the user never sees. That’s Lesson 5.
The entire frontend is one giant file. Every new feature risks breaking something that was already working. That’s Lesson 6.
If the AI is slow or fails, the user sees nothing — no error message, no loading indicator. That’s Lesson 7.
It only works on your computer. You can’t send someone a link to use it. That’s Lesson 8.
Everyone who opens the page sees the same thing. There are no user accounts. That’s Lesson 9.
If you close the tab, the itinerary is gone forever. Nothing is saved. That’s Lesson 10.
Users can’t upload inspiration photos for their trip. That’s Lesson 11.
All of these are real problems that real applications have to solve. And you’re going to solve every single one of them over the next twenty-seven lessons.
But for now — it works. And that matters.
Try It Yourself
Before moving to Lesson 2, try these in Claude Code:
-
Change the destination — open the app and try different cities, countries, or even “a road trip through Japan.” See how the AI adapts.
-
Ask Claude Code to change things — try saying:
- “Add estimated costs for each activity”
- “Make it suggest local street food, not tourist restaurants”
- “Add a packing list based on the destination and season”
Watch Claude Code edit the file. Refresh your browser. See the changes.
-
Break it and fix it — tell Claude Code “delete something random from the code.” Then look at the broken app in your browser. Then tell Claude Code “the app is broken, can you fix it?” This is how real vibe coding works — break, ask, fix, repeat.
-
Ask Claude Code to explain it — type “explain what each part of this code does in simple terms.” Claude Code can read the project and walk you through it.
Adapt It: Build Your Own
The trip planner is our course project, but the concepts apply to anything. Here’s the same prompt with blanks — try it in Claude Code:
Build me a [DESCRIBE YOUR APP — e.g., "meal planner", "quiz maker", "story generator"].
I want to [WHAT YOU DO — e.g., "type in my dietary restrictions and how many days"]
and it uses the [Gemini / OpenAI / Claude] API to
[WHAT THE AI DOES — e.g., "generate a week of recipes with ingredients and instructions"].
Show me [WHAT YOU WANT TO SEE — e.g., "each day's meals with a shopping list at the bottom"].
I want this to be a simple app I can open in my browser. No complicated setup.
Here's my API key: [YOUR KEY]
Make it look clean and easy to read.
Ideas to try:
- An AI meal planner — type in dietary restrictions, get a week of recipes
- An AI study guide — paste a topic, get flashcards and quiz questions
- An AI cover letter writer — paste a job listing, get a tailored letter
- An AI bedtime story generator — type in a character name and theme, get a story
Every one of these has the same architecture problems as the trip planner. Every one of them will benefit from the same lessons.
What’s Next
You have a working app. It’s one file, it’s messy, and it has more problems than you can see right now. But it works.
In Lesson 2, you’re going to learn about the time machine that every developer uses to save their work, track changes, and undo mistakes. It’s called Git, and it’s about to save your life.