Your First Build

What We're Building

You're going to build a personal task dashboard — a simple app where you can add tasks, mark them complete, and organize them by priority. Think of it as a stripped-down version of Todoist or Trello, built exactly the way you want it.

This isn't a toy project. When you're done, you'll have a real working web app that you could actually use every day. And more importantly, you'll understand the process of going from idea to working software using AI.

Step 1: Set Up Your Project

Open your AI coding tool and give it this prompt:

Create a new Next.js app called "my-tasks" with TypeScript and Tailwind CSS.
Set up a SQLite database using Prisma with a Task model that has:
id, title, description (optional), priority (low/medium/high),
status (todo/in_progress/done), createdAt, and updatedAt.
Include the Prisma schema, initial migration, and seed file
with 5 sample tasks.

This single prompt will generate your entire project scaffold — the file structure, database schema, styling setup, and sample data. Let the AI finish, then run the dev server to make sure everything starts clean.

Step 2: Build the Task List

Now let's create the main interface:

Build the main page that displays all tasks in a clean card layout.
Each task card shows the title, description, priority badge
(color-coded: red for high, yellow for medium, green for low),
and status. Add a filter bar at the top to filter by status
and priority. Use a dark theme with a modern design.
Make it responsive for mobile.

After this prompt, you should see a working task list with your sample data. The AI will create the API routes to fetch tasks and the frontend components to display them.

Step 3: Add Task Creation

Give this prompt to add the ability to create new tasks:

Add a "New Task" button that opens a modal form. The form should
have fields for title (required), description (optional), and
priority (dropdown: low/medium/high). When submitted, it creates
the task via an API route and adds it to the list without a
page refresh. Include validation and error handling.

Step 4: Add Task Actions

Now let's make tasks interactive:

Add these actions to each task card:
1. Click to toggle status (todo -> in_progress -> done -> todo)
2. A delete button with a confirmation dialog
3. Inline edit — click the title to edit it in place
Make completed tasks appear with reduced opacity and a strikethrough
on the title.

Step 5: Polish It

Final touch — make it feel like a real product:

Add these finishing touches:
1. A task count summary at the top showing total, active, and completed
2. Drag-and-drop reordering within each status column
3. Keyboard shortcut: press "n" to open the new task modal
4. Empty state with a friendly message when there are no tasks
5. Smooth animations on task status changes

What Just Happened

In about 45 minutes, you built a full-stack web application with a database, API, and polished interface. You gave five prompts. The AI wrote hundreds of lines of code, set up the database, created the API endpoints, and styled everything.

This is the core loop of building with AI: describe what you want, review what it creates, iterate until it's right. The same process works for any application — the prompts just get more specific as the project gets more complex.

In the next step, we'll look under the hood at what the AI actually built, so you understand the pieces and can direct future builds more effectively.