Hands-On: From Scratch to Deployment

Project Overview

Starting from an empty directory, let's build a bookmark manager web app. A simple app that saves URLs, categorizes them with tags, and supports search.

This lesson brings together everything you've learned:

• Setting project rules with CLAUDE.md (lesson 08)
• Designing with Plan mode (lesson 11)
• Code generation (lesson 04)
• Writing tests (lesson 06)
• Git workflow (lesson 07)

Step 1: Project Design

Create a new directory and start Claude Code:

mkdir bookmark-manager && cd bookmark-manager
git init
claude

Switch to Plan mode (Shift+Tab):

[Plan mode]
> I want to build a bookmark manager web app.
> Features: save URLs, tag categorization, search
> Recommend a tech stack. Include both frontend and backend.
> Deployment should be as simple as possible (Vercel or Cloudflare).

Claude suggests a tech stack and structure. Choose the direction you prefer.

Step 2: Initial Setup

Switch back to normal mode:

> First, create a CLAUDE.md. Include the tech stack and project structure we just decided on.

> Initialize the project. Create package.json, the basic directory structure, and config files.

> Commit: "chore: initialize project"

Step 3: Core Feature Implementation

Implement features one by one:

> Create a bookmark CRUD API.
> - POST /api/bookmarks — save a new bookmark
> - GET /api/bookmarks — list (with tag filter and search support)
> - PUT /api/bookmarks/:id — update
> - DELETE /api/bookmarks/:id — delete

Once complete, add tests:

> Write integration tests for the API we just built. Cover all endpoints.

> Run the tests

If they pass, commit:

> Commit the changes. Use Conventional Commits format.

Step 4: Frontend

> Create a main page that shows the bookmark list.
> - Bookmark add form
> - Tag filter
> - Search bar
> - Bookmark card (title, URL, tags, delete button)
> Make it look clean.

> Run it locally

Check in the browser and give feedback:

> Make the card design cleaner. Also show a message when the list is empty.

Step 5: Deployment

> Prepare this project for deployment.
> Write the build config, environment variable guide, and README.

Try It Yourself

Follow the steps above, but instead of the bookmark manager, build your own project:

• A todo app
• A blog engine
• A URL shortener
• A notes app

The point isn't the project's scale — it's mastering the collaboration flow with Claude Code.

"Why?" — Why You Need to Experience the Full Cycle

Practicing individual features (code generation, testing, Git) in isolation is a different experience from running an entire project end to end. In practice, everything must flow as a single, connected workflow.

Project Workflow

1. Write CLAUDE.md → establish project rules
2. Plan mode → design
3. Implement → test → commit (repeat)
4. Code review → refactoring
5. Deployment prep → deploy

Use /compact to manage context at each step, and create commits as checkpoints before big changes.