祝融说。

Start from scratch. Use the Six-Step Workflow to build a complete personal note-taking application. Follow along with this chapter step by step.

4.1 Why This Project

A personal note-taking app is a "textbook" beginner project. Why choose it? Because it covers the most common CRUD (Create, Read, Update, Delete) operations—the fundamental pattern behind most business systems. Once you learn to build a note app, you've learned how to build similar systems.

But there's a more important reason: this project is simple enough for you to focus on the process rather than the technology. You won't be distracted by complex business logic, so you can give your full attention to "how the Six-Step Workflow actually runs"—which is the real purpose of this chapter. The note app is merely a vehicle; what you're truly learning is "how to organize AI coding work."

Project features:

• Users can view a list of all notes.
• Users can create new notes.
• Users can edit existing notes.
• Users can delete notes.
• Data is stored in a server-side database.

Tech Stack

• Frontend: Next.js + React
• Backend: Next.js API Routes
• Database: SQLite
• Styling: Tailwind CSS

SQLite is chosen because it's simple enough—there's no need to spin up a separate database server, a single file does the job. For a personal application, performance and concurrency are more than sufficient.

4.2 Step 1: Build the Blueprint

Before writing any code, spend five minutes planning the project structure.

How to collaborate with AI

Launch Claude Code and enter:

I want to build a personal note-taking app. Help me design the project architecture and produce a CONTEXT.md blueprint.

Requirements:
1. Notes list page - display all notes, sorted by last updated time in descending order
2. Create note - title + content, save to database
3. Edit note - modify an existing note's title and content
4. Delete note - delete a note
5. Search functionality - search by title

Technical constraints:
- Use Next.js 14+ App Router
- Use SQLite database (no separate installation needed)
- Use Tailwind CSS for styling
- No user authentication needed (build the basics first)

Please produce CONTEXT.md, including:
- Project overview
- Tech stack
- Data model
- API design
- Milestone breakdown

The AI will generate a blueprint. Read it, confirm it looks right, and save it. If the blueprint doesn't meet your expectations—say, the tech stack is wrong or a feature is missing—point out the problem and have the AI revise it until you're satisfied.

Key parts of the blueprint

The blueprint should include a definition of the data model. For a note app, the data model is simple:

// Note data structure
interface Note {
  id: number          // Unique identifier
  title: string       // Title
  content: string     // Body content
  createdAt: string   // Creation time
  updatedAt: string   // Last updated time
}

API endpoints:

GET    /api/notes      // Get notes list (supports search and pagination)
POST   /api/notes      // Create a new note
GET    /api/notes/:id  // Get a single note
PUT    /api/notes/:id  // Update a note
DELETE /api/notes/:id  // Delete a note

Milestone breakdown:

Milestone 1: Project initialization + database setup
Milestone 2: Notes list API + page
Milestone 3: Create note functionality
Milestone 4: Edit note functionality
Milestone 5: Delete note functionality
Milestone 6: Search functionality

4.3 Milestone-by-Milestone Execution

Next, we follow the Six-Step Workflow and implement each milestone in turn.

Milestone 1: Project initialization + database setup

Issue instructions

Start implementing Milestone 1: Project initialization.

Please execute:
1. Initialize a Next.js project (using App Router)
2. Install the SQLite dependency (better-sqlite3)
3. Create a database initialization script (auto-create the notes table on startup)
4. Configure Tailwind CSS
5. Create the base layout file

Please execute the commands and create files directly; I don't need to confirm each step.

Acceptance check

• Project starts successfully (npm run dev)
• Visiting http://localhost:3000 shows the default page
• Database file has been created
• Project structure is clean

Milestone 2: Notes list API + page

Issue instructions

Start implementing Milestone 2: Notes list API and list page.

Please implement:
1. GET /api/notes endpoint - return all notes, sorted by updatedAt descending
2. Notes list page - display the title and last updated time of every note
3. Show 10 items per page; display a "No notes yet" message when the list is empty

Technical constraints:
- API route at app/api/notes/route.ts
- List page at app/page.tsx
- Use Tailwind CSS for styling
- Card-style list items, white background, rounded corners, shadow

Acceptance check

• Homepage shows the "No notes yet" message
• API returns correct JSON format
• Page styling is clean

Milestone 3: Create note functionality

Issue instructions

Start implementing Milestone 3: Create note functionality.

Please implement:
1. POST /api/notes endpoint - accept title and content, create a new note
2. Create note page - form with title input + content textarea + submit button
3. Redirect to the list page after successful creation

Technical constraints:
- Create page at the /create route
- Add a "New Note" button to the list page
- Title is required, content is optional
- Submit button shows a "Saving..." state while loading

Acceptance check

• Note can be created successfully
• After creation, redirects to the list page with the new note at the top
• Cannot submit with an empty title
• Submit button has a loading state

Milestone 4: Edit note functionality

Issue instructions

Start implementing Milestone 4: Edit note functionality.

Please implement:
1. GET /api/notes/[id] endpoint - return a single note
2. PUT /api/notes/[id] endpoint - update a note's title and content
3. Edit page - load the existing note's data into the form, save changes
4. Note titles on the list page are clickable, navigating to the edit page

Technical constraints:
- Edit page at the /notes/[id]/edit route
- Show a 404 message when the note doesn't exist
- Redirect to the list page after saving successfully

Acceptance check

• Clicking a note title enters the edit page
• Edit page loads the note data correctly
• After saving changes, the list page shows the updated content
• A non-existent note ID shows 404

Milestone 5: Delete note functionality

Issue instructions

Start implementing Milestone 5: Delete note functionality.

Please implement:
1. DELETE /api/notes/[id] endpoint - delete the specified note
2. Add a "Delete" button to each note card on the list page
3. Show a confirmation dialog when the delete button is clicked
4. After confirmation, delete the note and update the list automatically

Technical constraints:
- Use the native confirm() dialog (simplified implementation)
- Show a success message after deletion
- Button shows a "Deleting..." state during deletion

Acceptance check

• Note can be deleted successfully
• A confirmation dialog appears before deletion
• After deletion, the list updates and the deleted note no longer appears
• Delete button has a loading state

Milestone 6: Search functionality

Issue instructions

Start implementing Milestone 6: Search functionality.

Please implement:
1. Add a search parameter to the GET /api/notes endpoint - support ?search=keyword for fuzzy title search
2. Add a search input box at the top of the list page
3. Auto-search after the user stops typing (triggered 300ms after input pauses)
4. Show "No matching notes found" when search results are empty

Technical constraints:
- Search uses a SQLite LIKE query
- Search box has a clear button
- Show a loading state during search

Acceptance check

• Search functionality works correctly
• Entering a keyword filters results correctly
• Empty search results show a friendly message
• Clearing the search restores the full list

4.4 Project Summary

By this point, you've completed your first full AI-assisted coding project.

Review what you did:

1. Built a project blueprint (CONTEXT.md).
2. Broke the project into 6 milestones.
3. Implemented each milestone one by one, with an acceptance check at every step.
4. Ended up with a working note-taking application.

If you ran into problems along the way:

• A milestone failed its acceptance check: Return to the branch decision step, and fix or rebuild.
• The AI strayed from the blueprint: Remind it to refer to CONTEXT.md.
• You forgot what you'd done earlier: Check git log to review.

Chapter Summary

Through this project, you practiced the complete Six-Step Workflow. Key lessons: five minutes spent on the blueprint can save five hours later; the smaller the milestone, the lower the risk and the easier the acceptance check; acceptance isn't a formality—truly examine the code quality; when something goes wrong, roll back and start over rather than patching on top of messy code. These lessons don't apply only to note apps—they apply to every AI coding project. In the next chapter, we'll learn about the various skills you can draw on—which approach to use in different situations.