Your First Full Application

Topics

• What is a web application and how it works
• React and Next.js overview
• Project scaffolding with Claude Code
• Components: building blocks of modern web apps
• Styling with Tailwind CSS
• Deployment to Vercel
• Environment variables and configuration

Activities

• Ask Claude Code to scaffold a Next.js project for a personal task manager
• Build a task list component that displays all your tasks with their status
• Add search and filter functionality
• Style the application with Tailwind CSS
• Deploy to Vercel for the first time
• Share the live URL with a friend or family member

Skills You'll Gain

React/Next.js basics, component thinking, Tailwind CSS, Vercel deployment

Learning Objectives

By the end of this week, you will be able to:

1. Explain what a web application is and how browsers, servers, and APIs work together
2. Describe what React components are and why they matter
3. Use Claude Code to scaffold, build, and style a Next.js application
4. Deploy a working application to Vercel and share it with others

Lesson

What Is a Web Application?

A web application is a program that runs in a web browser. When you use Gmail, Google Docs, or Twitter, you are using web applications. Unlike apps you download from an app store, web apps live on the internet — anyone with the URL can use them.

Here is how they work, using a restaurant analogy:

┌──────────────────────┐          ┌──────────────────────┐
│      BROWSER          │          │       SERVER          │
│   (The Dining Room)   │  ◄────► │   (The Kitchen)       │
│                       │  HTTP    │                       │
│ - You see the menu    │ requests │ - Cooks prepare food  │
│ - You place orders    │          │ - Stores recipes      │
│ - You eat the food    │          │ - Manages ingredients │
└──────────────────────┘          └──────────────────────┘
                                           │
                                           ▼
                                  ┌──────────────────────┐
                                  │      DATABASE         │
                                  │   (The Pantry)        │
                                  │                       │
                                  │ - Stores all data     │
                                  │ - Ingredients ready   │
                                  └──────────────────────┘

• Browser (dining room) — What the user sees and interacts with. This is the "front end."
• Server (kitchen) — The behind-the-scenes logic that processes requests. This is the "back end."
• API (the waiter) — Carries orders from the dining room to the kitchen and brings food back. API stands for "Application Programming Interface" — it is how the front end talks to the back end.
• Database (the pantry) — Where all the data is stored permanently. We will add a database in Week 5.

This week, we are building just the dining room (front end). The food will disappear when you close the restaurant (no database yet), but the experience will be real.

HTML, CSS, and JavaScript in 30 Seconds

Every web page is built with three languages:

• HTML (HyperText Markup Language) — The structure. Think of it as the skeleton of a building: walls, rooms, doors. HTML defines what is on the page: headings, paragraphs, buttons, images.

• CSS (Cascading Style Sheets) — The appearance. Think of it as paint, wallpaper, and furniture. CSS makes things look good: colors, fonts, spacing, layouts.

• JavaScript — The behavior. Think of it as the electrical wiring: lights turn on when you flip switches, doors open when you push them. JavaScript makes pages interactive: clicks do things, data updates, animations play.

You do not need to learn these languages in depth. Claude Code knows them deeply. But understanding what each one does helps you give Claude better instructions.

React: Building with LEGO Bricks

React is a popular toolkit for building web pages. The key idea is components — small, reusable pieces that snap together like LEGO bricks.

Imagine you are building a to-do list app. Instead of one giant page, you break it into components:

┌─────────────────────────────────────────┐
│              App Component               │
│  ┌───────────────────────────────────┐  │
│  │        Header Component           │  │
│  │  "My Task Manager"  [Search Box]  │  │
│  └───────────────────────────────────┘  │
│  ┌───────────────────────────────────┐  │
│  │      AddTask Component            │  │
│  │  [Type a task...] [Add Button]    │  │
│  └───────────────────────────────────┘  │
│  ┌───────────────────────────────────┐  │
│  │       TaskList Component          │  │
│  │  ┌────────────────────────────┐   │  │
│  │  │  TaskItem: "Buy groceries" │   │  │
│  │  │  [✓] [Delete]             │   │  │
│  │  └────────────────────────────┘   │  │
│  │  ┌────────────────────────────┐   │  │
│  │  │  TaskItem: "Read chapter"  │   │  │
│  │  │  [✓] [Delete]             │   │  │
│  │  └────────────────────────────┘   │  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘

Each box is a component. The TaskItem component is reused for every task — you build it once, and React repeats it for each item in your list. When you want to change how tasks look, you edit one component and every task updates automatically.

Next.js: The Project Wrapper

Next.js is a framework built on top of React. Think of React as the LEGO bricks and Next.js as the instruction manual plus the baseplate. Next.js handles:

• Routing — Deciding which page to show when you click a link. If someone visits /about, Next.js shows the About page.
• Server rendering — Pre-building pages on the server so they load faster.
• File-based routing — You create a file called about/page.tsx, and Next.js automatically makes it available at /about. No configuration needed.

Tailwind CSS: Styling Made Simple

Tailwind CSS is a styling system that lets you describe how things look using short class names directly in your code:

<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Add Task
</button>

Reading this: bg-blue-500 = blue background, text-white = white text, px-4 = horizontal padding, py-2 = vertical padding, rounded = rounded corners.

You do not need to memorize these classes. Claude Code knows all of them. When you say "make the button blue with rounded corners," Claude writes the correct Tailwind classes.

Vercel: Free Hosting

Vercel is a free platform that puts your app on the internet. When you "deploy" to Vercel, your app gets a real URL like https://my-task-manager.vercel.app that anyone in the world can visit.

Vercel works especially well with Next.js (the same company makes both). Deployment takes about 60 seconds.

Environment Variables: App Settings

Environment variables are settings your app needs to run — like API keys, database URLs, or feature flags. They are stored outside your code (so they are not visible in Git) and loaded at runtime.

# .env.local file (not committed to Git)
NEXT_PUBLIC_APP_NAME="My Task Manager"
DATABASE_URL="https://..."

Why not just put these values in the code? Because:

1. Secrets (API keys) should never be in Git — anyone could see them
2. Different environments (development, production) need different values
3. Changing a setting should not require changing code

Building the Task Manager: Step by Step

Here is how to direct Claude Code to build your first real app:

Step 1: Scaffold the project

$ mkdir ~/task-manager
$ cd ~/task-manager
$ claude

Prompt:

Create a new Next.js project in this directory with Tailwind CSS.
Use TypeScript. Set up the basic folder structure.

Claude will run npx create-next-app@latest with the right options and configure Tailwind.

Step 2: Build the main component

Build the main task manager page. I need:
- A text input where I can type a new task
- An "Add" button that adds the task to a list
- Each task should have a checkbox to mark it complete
- Each task should have a delete button
- Completed tasks should appear with a strikethrough
Store tasks in React state (no database yet).

Step 3: Add styling

Style the task manager with Tailwind CSS to look modern and clean.
Use a centered layout with a max width. Add hover effects on buttons.
Make it look professional.

Step 4: Add search and filter

Add a search bar at the top that filters tasks as I type.
Add filter buttons: All, Active, Completed.

Step 5: Deploy

Help me deploy this to Vercel. Walk me through the steps.

Claude will guide you through:

1. Installing the Vercel CLI: npm install -g vercel
2. Running vercel and following the prompts
3. Getting your live URL

Practice Exercises

Exercise 1 (Guided): Scaffold and Run Locally

Follow these steps:

$ mkdir ~/task-manager && cd ~/task-manager
$ claude

Ask Claude to create a Next.js project with Tailwind CSS. After it finishes:

$ npm run dev

Open your browser to http://localhost:3000. You should see the Next.js default page.

Verification: The page loads in your browser without errors. The terminal shows "Ready" with no red error messages.

Exercise 2 (Independent): Build the Task Manager

Goal: Use Claude Code to build a complete task manager with:

• Add tasks
• Mark tasks complete
• Delete tasks
• Search/filter tasks

Use Plan mode. Review every diff. Commit after each major feature with Git.

Hints:

• Start with the simplest version (just add and display tasks), then add features one at a time
• If Claude's code does not work, paste the error message and ask Claude to fix it
• Test in your browser after every change

Verification: The app works in the browser. You can add, complete, delete, and search tasks. Git log shows at least 3 commits.

Exercise 3 (Challenge): Deploy to Vercel

Deploy your task manager to Vercel and share the URL:

1. Ask Claude to help you deploy
2. Visit the live URL on your phone
3. Share the URL with someone and ask them to add a task
4. Add the live URL to your project README

Document any deployment issues you encountered and how you resolved them.

Self-Assessment Quiz

1. In the restaurant analogy, what does the "waiter" (API) do?

2. What is a React component? Give an example from a to-do list app.

3. What is the difference between React and Next.js?

4. Why should you NOT put API keys directly in your code?

Answers:

1. The API (waiter) carries requests from the browser (dining room) to the server (kitchen) and brings responses back. For example, when you click "Add Task," the API sends that request to the server, which processes it and sends back a confirmation.

2. A React component is a small, reusable piece of a web page. In a to-do list app, TaskItem could be a component that displays one task with its checkbox and delete button. It is built once and reused for every task in the list.

3. React is a library for building user interface components (the LEGO bricks). Next.js is a framework built on React that adds routing, server rendering, and project structure (the instruction manual and baseplate). You need Next.js to create a complete web application; React alone gives you the building blocks.

4. API keys should not be in code because: (1) Anyone who sees your Git repository could steal them, (2) Different environments (development vs production) need different keys, and (3) Changing a key should not require changing and redeploying code. Instead, use environment variables stored in .env files that are excluded from Git.