Understanding What You Built

What's Inside Your Project

You just built a working web app, but you might not know what all those files actually do. That's fine — you don't need to become an expert. But understanding the basic architecture will make you a much better director of your AI coding tool.

Think of it like this: you don't need to know how an engine works to drive a car, but knowing the difference between the brake and the gas pedal is essential. Here's your map.

The File Structure

Your project follows the Next.js convention. Here are the folders that matter:

app/ — This is where your pages live. Each folder inside app/ becomes a URL route. The file app/page.tsx is your homepage. If you created app/settings/page.tsx, it would show up at /settings.

app/api/ — These are your API routes — the backend of your application. When your frontend needs to create, read, update, or delete data, it sends requests to these endpoints. For example, app/api/tasks/route.ts handles requests to /api/tasks.

components/ — Reusable UI pieces. Your task card, the modal form, the filter bar — each is a component that can be used anywhere in your app.

prisma/ — Your database configuration. The schema.prisma file defines what your data looks like (tables, columns, relationships). The migrations/ folder tracks changes to your database over time.

How the Frontend Talks to the Backend

When you click "Create Task" in your app, here's what happens behind the scenes:

1. The frontend (your React components) sends an HTTP request to /api/tasks with the new task data
2. The API route receives the request, validates the data, and tells Prisma to save it to the database
3. Prisma translates that into a SQL command and writes it to your SQLite database
4. The API sends back the newly created task
5. The frontend receives it and updates the UI

This request-response cycle is the foundation of every web application. Whether you're building a task manager, a CRM, or a project tracker, the pattern is the same: frontend makes a request, backend processes it, database stores it.

What's a Database, Really?

A database is just an organized place to store your data so it persists (doesn't disappear when you close the browser). Your task dashboard uses SQLite — a simple file-based database that's great for personal projects and small teams.

Your Prisma schema defined a Task model with fields like title, priority, and status. Prisma takes that model definition and creates the actual database table. When you query tasks, Prisma translates your code into SQL (the language databases understand) and returns the results.

For larger apps, you'd use PostgreSQL (often via Supabase or Railway), which can handle multiple users and more data. The same Prisma schema works — you just change the connection string.

What's TypeScript?

You might have noticed your files end in .ts or .tsx instead of .js. TypeScript is JavaScript with type safety — it catches errors before your code runs. When you defined your Task model, TypeScript created types that ensure you can't accidentally pass a number where a string should go.

You don't need to write TypeScript yourself. The AI handles it. But when you see type errors in the output, they're TypeScript telling you something doesn't match up — and that's usually a prompt for the AI to fix.

Why This Matters

Understanding these pieces means you can give better prompts. Instead of saying "make the app faster," you can say "add an index to the tasks table on the status column" or "cache the API response on the frontend." The more precisely you can describe what you want, the better the AI performs.

You don't need to memorize this. Just know that your app has a frontend (what users see), a backend (API routes that handle logic), and a database (where data lives). That mental model is enough to build almost anything.