Claude Code Tutorial: Build a Real Project in 30 Minutes

Most Claude Code tutorials show you how to type a prompt and marvel at the output. That's a demo, not a tutorial. This guide walks you through building a real, functional project from an empty folder to a deployed web app.

It's the exact project I use in ClaudeFluent to take people from zero to deployed in under 30 minutes. We're building a personal expense tracker: form to add expenses, category tagging, monthly totals, and a chart. Nothing fancy, but it's real software that actually works. The process teaches you patterns that apply to anything you'll build.

Prerequisites: You need Claude Code installed and working. If you haven't set it up yet, follow the setup guide first. You also need Node.js 18+.

Step 1: Create Your Project Folder and CLAUDE.md

Open your terminal. Create a new project directory:

mkdir expense-tracker
cd expense-tracker

Before you even launch Claude Code, create a CLAUDE.md file. This is Claude's persistent memory; it reads this at the start of every session. Here's what to put in it:

# Expense Tracker
A personal expense tracking web app.

## Stack
- Next.js 14 (App Router)
- TypeScript (strict mode)
- Tailwind CSS
- shadcn/ui for components
- localStorage for data persistence (no backend needed)

## Rules
- Always use TypeScript, never JavaScript
- Use server components by default, client components only when needed
- Style everything with Tailwind, no inline styles
- Keep it simple — this is a personal tool, not an enterprise app

Why do this first? Without it, Claude asks you what stack to use, what conventions to follow, and how to style things every single session. 2 minutes of setup saves 20 minutes of repeated clarification. (This is best practice #1 for a reason.)

Step 2: Scaffold the Next.js App

Launch Claude Code in your project directory:

claude

Your first prompt:

"Initialize a new Next.js 14 project here with TypeScript, Tailwind CSS, and the App Router. Set up shadcn/ui with the default theme. Create a clean home page that just says 'Expense Tracker' as a heading."

Claude will run npx create-next-app, configure TypeScript, install Tailwind, set up shadcn/ui, and scaffold the initial page. Watch it work. You'll see it running commands, creating files, making decisions. If it asks questions (like which package manager), just answer and let it continue.

When it finishes, verify everything works:

"Start the dev server and tell me the URL."

Open the URL in your browser. You should see a clean page with "Expense Tracker" as a heading. If something's wrong, just tell Claude what you see ("the page is blank" or "I see an error") and it'll fix it.

Commit checkpoint: Good moment to initialize git and make your first commit. Tell Claude: "Initialize a git repo and commit everything with the message 'Initial project setup'."

Step 3: Build the Expense Form

Now we build the first real feature:

"Add an expense entry form at the top of the page. It should have fields for: amount (number input with dollar formatting), category (dropdown with options: Food, Transport, Entertainment, Bills, Shopping, Other), date (date picker defaulting to today), and an optional description (text input). When submitted, store the expense in localStorage. Show a success toast when an expense is added."

Notice how this prompt describes what the form should do, not how to build it. I'm not telling Claude which React hooks to use or how to structure the state. I'm describing the user experience: the fields, the behavior, the feedback. Claude makes the implementation decisions, and they're usually better than what I'd specify.

Test the form. Add a few expenses. Check that they persist after a page refresh (localStorage should keep them). If anything is off (wrong formatting, missing validation, ugly layout) tell Claude in plain language and it'll iterate.

Step 4: Display the Expense List

Now let's show the expenses:

"Below the form, show a list of all expenses sorted by date (newest first). Each item should show the date, category, amount, and description. Add a delete button on each item that removes it from localStorage. Group expenses by month with a header showing the month name and year."

This is where incremental building pays off. Claude already knows about the form and the localStorage structure from the previous step. It builds on what exists rather than starting from scratch. If you'd crammed all of this into one giant prompt, Claude would've had to design the storage format and the display simultaneously, and conflicts are more likely.

After testing, commit: "Add expense list with monthly grouping and delete."

Step 5: Add Monthly Totals and a Chart

Here's where it gets fun:

"Add a dashboard section above the expense list that shows: total spent this month, a breakdown by category (showing how much was spent in each category this month), and a bar chart showing daily spending for the current month. Use recharts for the chart. Make it look clean and professional."

Claude will install recharts, build the aggregation logic, and create the visualization. This is the kind of task where Claude Code shines: coordinating across multiple concerns (data aggregation, chart library setup, UI layout) in a single flow.

If the chart looks wrong (too small, bad colors, overlapping labels) just describe what you see:

"The chart is too short, make it taller. Also the bar colors should match the category colors. And add dollar amounts on top of each bar."

This iterative refinement is the core Claude Code workflow. Build, look, adjust. Each cycle takes 30 to 60 seconds.

Step 6: Polish the Design

The functionality works. Now make it look good:

"Polish the overall design. The page should be centered with a max-width of 800px. Add some spacing between sections. The form should be in a card. The dashboard stats should be in a row of cards. Make it look like a modern, minimal finance app. Dark mode support would be nice."

"Make it look like X" is a perfectly valid prompt. Claude understands design patterns and will apply appropriate spacing, shadows, rounded corners, and color schemes. If you have specific preferences ("blue accent color" or "make it look like Linear") say so.

Step 7: Deploy to Vercel

The app works locally. Time to ship it:

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

For a localStorage-based app like this, deployment is dead simple (no database or backend to configure). You'll typically:

1. Push your code to GitHub (Claude can help with this)
2. Connect the repo to Vercel
3. Deploy with one click

Within a few minutes, you'll have a live URL you can share. A real, deployed web application, built in under 30 minutes with no hand-written code.

What You Just Learned

This tutorial wasn't really about building an expense tracker. You practiced the core patterns that apply to every Claude Code project:

1. Start with CLAUDE.md: set context before you start building
2. Scaffold first, then add features: get a working skeleton before bolting on complexity
3. Describe outcomes, not implementations: tell Claude what you want, not how to code it
4. Build incrementally: one feature at a time, testing each step
5. Iterate visually: look at the result, describe what's wrong, let Claude fix it
6. Commit after each feature: create rollback points as you go
7. Deploy early: a deployed app is worth 10x a local prototype

What to Build Next

Now that you've got the fundamentals, try building something you actually want:

• A personal workout tracker
• A recipe collection with search
• A simple CRM for freelance clients
• A reading list with progress tracking
• A habit tracker with streak visualization

The project doesn't matter. The pattern does. Start with CLAUDE.md, scaffold, build incrementally, iterate on what you see. That pattern works for everything, from a weekend side project to a production SaaS.

Want to learn more patterns and build more complex projects with guidance? ClaudeFluent takes you from basics to advanced agent workflows in one live session. Also worth reading: the best practices guide and how to use Claude Code.