The One-File Wonder

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.

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.

You already set up an Anthropic key for Claude Code — that’s what powers your coding assistant. But your trip planner app needs its own AI brain too — a service it can ask “plan me a trip to Tokyo” and get a smart answer back.

These are two different things. Claude Code is your builder. The AI API is what your app uses to generate trips for users.

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.

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.

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.

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.

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.

If the AI is slow or fails, the user sees nothing — no error message, no loading indicator. That’s Lesson 6.

It only works on your computer. You can’t send someone a link to use it. That’s Lesson 7.

Everyone who opens the page sees the same thing. There are no user accounts. That’s Lesson 8.

If you close the tab, the itinerary is gone forever. Nothing is saved. That’s Lesson 9.

Users can’t upload inspiration photos for their trip. That’s Lesson 10.

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-two lessons.

But for now — it works. And that matters.

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.