This is a walkthrough of what it actually looks like to build a project with Claude Code from the first command to a deployed application. Not a concept piece. Not a philosophy article. A step-by-step record of the process.
The project: a simple customer feedback collection tool. A form that collects feedback, stores it in a database, and displays it in an admin dashboard. Simple enough to build in one session, complex enough to demonstrate the real workflow.
Step 1: Start the project
Open your terminal. Create a new directory and initialize a Next.js project:
mkdir customer-feedback && cd customer-feedback npx create-next-app@latest . --typescript --tailwind --app --src-dir
This gives you a Next.js 14 project with TypeScript, Tailwind CSS, and the App Router. Claude Code works with any framework, but Next.js is what we use most because it handles both frontend and backend in one project.
Now open Claude Code in this directory. The first thing you tell it:
"I am building a customer feedback collection tool. Customers submit feedback through a public form. Admins view all feedback in a dashboard. I want to use Prisma with SQLite for local development and PostgreSQL for production. Set up the database schema with a Feedback model that has: id, customerName, customerEmail, rating (1-5), message, createdAt."
Claude Code will create the Prisma schema, install Prisma, set up the database connection, and generate the client. Watch what it does. Read the files it creates. This is where you learn — not by memorizing commands, but by seeing what a correct setup looks like.
Step 2: Build the API layer
Next instruction:
"Create a Next.js API route at /api/feedback that handles POST requests to create new feedback and GET requests to list all feedback. The POST should validate that rating is between 1 and 5 and that message is not empty. The GET should return feedback sorted by newest first."
Claude Code creates the route handler with input validation, error handling, and proper HTTP status codes. Review the code. You will see patterns you can reuse: how to parse a request body in the App Router, how to return JSON responses with status codes, how to handle validation errors.
If something looks wrong or does not match your preferences, say so. "Change the validation to return all errors at once instead of stopping at the first error." Claude Code adjusts. This back-and-forth is the normal workflow — you direct, review, refine.
Step 3: Build the submission form
"Create a page at /feedback with a form that collects customerName, customerEmail, rating (radio buttons 1-5), and message (textarea). On submit, POST to /api/feedback. Show a success message on success and error messages on failure. Style it with Tailwind — clean, professional, mobile-friendly."
This is where you see the frontend come together. Claude Code builds the React component with state management, form handling, and API integration. It applies Tailwind classes for layout, spacing, typography, and responsive design.
Test it. Open localhost:3000/feedback in your browser. Fill out the form. Submit it. Check that the data appears in your database (you can use Prisma Studio: npx prisma studio).
If the form does not look right, describe what you want changed: "Make the rating buttons larger, use stars instead of numbers, and add a character count to the message field." Each instruction produces a specific change you can verify.
Step 4: Build the admin dashboard
"Create a page at /admin/feedback that displays all submitted feedback in a table. Show customerName, rating as stars, the first 100 characters of the message, and the submission date. Add a search input that filters by customer name or message content. Add sorting by date and rating."
The admin page pulls data from the same API endpoint and presents it in a structured view. Claude Code builds the table, the search filter, and the sort controls. Client-side filtering and sorting work for datasets under a few hundred records; for larger datasets, you would move the filtering to the API.
Test the full flow: submit feedback, then view it in the admin dashboard. Search for it. Sort by rating. Verify everything connects.
Step 5: Add authentication to the admin page
"Add basic authentication to the admin page. Use a hardcoded admin password stored in an environment variable ADMIN_PASSWORD. Show a login form before the dashboard. Store the auth state in a cookie. This is temporary — we will use proper auth later."
This is intentionally simple. For a real application, you would use NextAuth or a similar library. But for getting to deployed quickly, a password-protected page is sufficient. Claude Code creates the login form, the auth check, and the cookie management.
Create a .env.local file with your admin password. Test that the admin page requires login and that the feedback form remains public.
Step 6: Deploy
"I want to deploy this to Railway. Create a Dockerfile for the project. The database should use PostgreSQL in production. Update the Prisma schema to support both SQLite locally and PostgreSQL in production."
Claude Code creates the Dockerfile, updates the database configuration, and may adjust the schema if there are syntax differences between SQLite and PostgreSQL.
Push to GitHub, connect the repository to Railway, set the DATABASE_URL and ADMIN_PASSWORD environment variables, and deploy. Railway builds from the Dockerfile and runs the application.
Visit your deployed URL. Submit feedback. Log into the admin dashboard. The entire application is live.
What you just learned
The technical output is a feedback tool. But the skill you practiced is more valuable: directing an AI to build software through clear, sequential instructions.
Each step followed the same pattern: describe what you want, review what was built, test it, refine if needed, move to the next step. You did not need to know the exact syntax for a Prisma schema or a Next.js API route. You needed to know what you wanted the application to do and how to describe it clearly.
This is the skill that scales. The person who can clearly describe a customer feedback tool can also clearly describe an inventory management system, a patient intake form, a contract review tool, or a compliance dashboard. The complexity of the application changes. The process does not.
Common mistakes in first sessions
Giving instructions that are too vague: "Make it look nice" gives Claude Code no actionable direction. "Use a clean layout with plenty of whitespace, professional typography, and a blue-and-white color scheme" gives it exactly what it needs.
Skipping the review step: Every instruction should produce output you verify. If you stack five instructions without checking the result of each one, you build on assumptions that might be wrong.
Fighting the AI's choices instead of directing them: If Claude Code uses a pattern you do not like, do not rewrite the code manually. Tell it what you want instead: "I prefer to handle errors with a custom error boundary instead of try-catch in each component." It adapts.
Not reading the code: The point is not to produce code you do not understand. The point is to produce code faster while understanding what was produced. Read every file. Ask Claude Code to explain anything that is not clear.
What to build next
Take this same process and apply it to a problem you actually have. A tool your team needs. A workflow that is currently manual. A dashboard that would save someone an hour a day.
Start simple. Get to deployed. Then iterate.
Get posts like this in your inbox
No spam. New articles on AI strategy, governance, and building with AI for small business.