Hands-On Project: Building a Full-Stack Web App from Scratch with AI

Hands-on Project: Building a Complete Web Application with AI Assistance

This chapter will guide you through building a complete web application from scratch using AI programming tools—a personal finance tracker. You will experience the full AI-assisted development workflow: requirements analysis → architecture design → database modeling → API development → frontend construction → testing strategy → deployment. The focus is not on writing perfect code, but on mastering the efficient workflow of human-AI collaborative programming, a process you can reuse in any future project.

Requirements Analysis and Product Design

Product Requirements Definition

Before writing any code, first clarify what you're building. Our goal is a personal bookkeeping web app with core features including: ① Income/Expense recording (amount, category, date, note); ② Category management (customizable income/expense categories); ③ Monthly statistics (view income/expense summaries and category breakdowns by month); ④ Visualization charts (pie chart for category breakdown, line chart for trends); ⑤ Data export (CSV format).

Tech Stack Selection

**Frontend**: Next.js 14 + TypeScript + Tailwind CSS + shadcn/ui component library. Next.js is a full-stack React framework, TypeScript provides type safety, Tailwind simplifies styling, and shadcn/ui offers high-quality UI components. **Backend**: Next.js API Routes (App Router format), eliminating the need for a separate backend server. **Database**: SQLite (local development) or Supabase (production deployment, free PostgreSQL). **ORM**: Prisma—a type-safe database operation tool that lets you write database queries in TypeScript instead of raw SQL. This tech stack combination is beginner-friendly, has excellent AI tool support, and can be deployed for free on Vercel.

Architecture Design – Let AI Help You Make Decisions

The Right Way to Do AI-Assisted Architecture Design

Open Claude or Cursor's Chat, describe your requirements, and let AI help design the project architecture. Example prompt: "I want to build a personal bookkeeping app using Next.js 14 App Router + TypeScript + Prisma + Tailwind CSS. Please help me design: 1. A complete project file structure 2. Prisma data models (two tables: Transaction and Category) 3. A list of API routes 4. A list of frontend pages. Requirements: simple, scalable, suitable for solo development." AI will provide a complete file structure and database schema. Your job is to review and adjust—architectural decisions are your responsibility; AI only provides suggestions.

Database Design Explained

The database is the core of the application. For a bookkeeping app, we need two main data tables: **Transaction table**—records each income/expense entry, containing fields: id (unique identifier), amount (integer storing cents, avoiding floating-point precision issues), type (income/expense), categoryId (links to Category), description (note), date, createdAt. **Category table**—manages income/expense categories, containing fields: id, name (category name), type (income category/expense category), icon (icon identifier), color (color code). Let AI generate the Prisma Schema file for you, then review if the field types and relationships are correct.

Tool Preparation

**AI Programming Assistant**: Cursor (most recommended), GitHub Copilot + VS Code (most mature), Windsurf (rising star). Choose one; don't install multiple simultaneously. **AI Conversation Assistant**: Claude (for complex architecture discussions and code reviews) or ChatGPT (for quick Q&A and code snippets). Using both in conjunction with your programming assistant yields the highest efficiency. **Deployment & DevOps**: Vercel (first choice for Next.js, free tier is sufficient), Supabase (free PostgreSQL + Auth), GitHub (code hosting).

Hands-on Development: Six-Step Detailed Guide

Step 1 – Project Initialization (30 minutes)

Use Cursor to create a Next.js project. In Cursor's Composer, say: "Help me initialize a Next.js 14 App Router project, configure TypeScript, Tailwind CSS, Prisma ORM (SQLite), and shadcn/ui. Create a .cursorrules file containing project specifications." Composer will automatically execute commands and create all configuration files. Your tasks: ① Confirm `npm run dev` starts normally; ② Check that the default page loads in the browser; ③ Confirm Prisma can connect to the SQLite database.

Step 2 – Data Models & Database (30 minutes)

Let AI help define the Prisma Schema. In Chat, say: "Define Transaction and Category models in schema.prisma. Transaction includes id, amount (Int type storing cents), type (enum INCOME/EXPENSE), description, date, categoryId (relation to Category), createdAt. Category includes id, name, type, icon, color. Add appropriate indexes." After reviewing the generated Schema, run `npx prisma db push` to create the database tables.

Step 3 – API Development (1-2 hours)

Create API routes one by one. Suggested order: Start with Category CRUD (simple, builds confidence), then Transaction CRUD (slightly more complex, involves relational queries), and finally statistics APIs (aggregate queries). Each API endpoint follows the same pattern: receive request → validate parameters → operate on database → return response. Let AI generate them one by one in Composer, and test each immediately using Thunder Client (a VS Code extension).

Step 4 – Frontend Component Development (2-3 hours)

The core strategy for frontend development is 'skeleton first, flesh later': First, use AI to generate the basic structure of all pages (layout, routing, empty components), confirming navigation works between pages. Then, fill in functionality component by component. Key components include: **Bookkeeping Form Component**—amount input, category selector, date picker, note input; **Transaction List Component**—displays all records, supports sorting and filtering; **Statistics Chart Component**—renders pie and line charts using Recharts; **Navigation Bar Component**—switches between pages. When asking AI to generate each component, explicitly specify the use of Tailwind CSS and shadcn/ui.

Step 5 – Testing Strategy (1 hour)

Testing doesn't need 100% coverage, but critical paths must be tested. Let AI help write: **API Tests**—at least one happy path and one error path test per endpoint; **Amount Calculation Tests**—ensure conversion between cents and currency units is correct; **Component Rendering Tests**—ensure key components render normally. Use Jest and React Testing Library.

Step 6 – Deployment & Launch (30 minutes)

Deployment process: ① Create a repository on GitHub and push your code; ② Create a project on Supabase, obtain the database connection URL, and modify the Prisma configuration to switch from SQLite to PostgreSQL; ③ Import the GitHub repository into Vercel, configure environment variables; ④ Click Deploy, wait 2-3 minutes, and your application is live.

Code Review Checklist – Common Issues in AI-Generated Code

Security Checks

AI-generated code often overlooks security. You need to check: ① Do APIs have input validation (to prevent SQL injection and XSS)? ② Are sensitive credentials stored in environment variables, not hardcoded? ③ Is there proper error handling (not exposing internal error messages to the frontend)? ④ Is CORS configured?

Performance and Code Quality Checks

Common performance issues: ① Do database queries have N+1 problems? ② Does the frontend have unnecessary re-renders? ③ Do API responses only return necessary fields? Code quality aspects: ① Are naming conventions consistent and meaningful? ② Is there duplicate code that can be extracted into shared functions? ③ Are TypeScript types correctly defined (avoid using the `any` type)?

Project Delivery and Presentation

A high-quality GitHub repository should contain: **README.md**—project screenshots (at least 3), a one-sentence project description, tech stack list, local setup guide, live demo link, AI tool usage log. Before deployment, confirm: ① All environment variables are configured; ② Database migrations have been executed; ③ Homepage load time is under 3 seconds; ④ Mobile layout is correct; ⑤ Basic functions work correctly in the production environment.

Advanced Challenge: Add user authentication (using NextAuth.js) and a data visualization dashboard (using Recharts) to make the application more complete. AI can help you implement both features within 30 minutes. Once done, your project becomes a true full-stack SaaS application.