Claude Code in Action: Build a Real Project from Scratch

Building a Real Project with Claude Code

Configuring Claude Code is useful, but the real value comes from using it to build something. In this article, we will build a personal bookmark manager — a functional web app with HTML, CSS, and JavaScript — entirely through Claude Code prompts. You will write zero code manually.

Project Overview

We are building a "Link Vault" app that lets you save, tag, and search bookmarks. It will use localStorage so no server is needed. By the end, you will have a working single-page app.

Step 1: Scaffold the Project

Create a new directory and start Claude Code:

mkdir link-vault && cd link-vault
git init
claude

Once Claude Code starts, give it the first prompt:

Set up a new web project with: index.html, style.css, and app.js.
Create index.html with a basic HTML5 structure linking both files.
Create style.css with a modern dark theme and a card-based layout.
Create app.js with a console.log("Link Vault loaded") placeholder.
Initialize npm with package.json.

Claude Code creates all four files. Review them with cat index.html if you want.

Step 2: Build the Bookmark Form

Prompt Claude Code inside the same session:

In app.js, implement:
1. A function addBookmark(url, title, tags) that saves to localStorage
2. A function getBookmarks() that returns all saved bookmarks
3. A function renderBookmarks() that displays bookmarks as cards
4. A form in index.html with fields for URL, title, and tags
5. The form should call addBookmark on submit

Make it look good with the existing dark theme. Tags should be displayed as colored badges on each card.

Step 3: Add Search and Filter

Now add the search functionality:

Add to app.js:
1. A search input in index.html above the bookmark grid
2. A filterBookmarks(query) function that matches against title, URL, and tags
3. Real-time filtering as the user types (use input event)
4. Show "No results found" when nothing matches

Also add: ability to delete bookmarks with a small X button on each card.
Confirm before deleting.

Step 4: Import and Export

Add data portability:

Add to app.js:
1. An "Export" button that downloads bookmarks as a JSON file
2. An "Import" button that lets the user upload a JSON file
3. Validate the imported data (must have url, title fields)
4. Show a success message with count of imported bookmarks

Add these buttons in a toolbar section above the bookmark grid.

What Claude Code Does Differently

Notice what happened during this process:

• Claude Code read all your project files to understand the existing code before making changes
• It maintained consistent style across HTML, CSS, and JS
• It handled cross-file dependencies automatically (adding CSS classes that the JS expects)
• It created a single git commit per change (check with git log)
• When asked to modify existing code, it read and updated rather than overwriting

Test Your App

# Open in browser
open index.html  # Mac
# or
start index.html  # Windows
# or
xdg-open index.html  # Linux

Add a few bookmarks, search for them, export, delete, and import. The app should be fully functional with zero lines of code written by hand.

FAQ

Q: How large of a project can Claude Code handle?

Claude Code's context window is approximately 200K tokens. For a project with dozens of files, it can understand the full structure but may need you to specify which files to focus on. For large codebases, use .claudeignore to exclude generated files and dependencies.

Q: Will Claude Code overwrite my changes?

Claude Code uses git to track changes. Before making modifications, it shows you what it plans to change and asks for confirmation. You can also review changes with git diff before committing. If you reject a change, Claude Code does not apply it.

Q: Can I use Claude Code on existing projects?

Yes. Navigate to any existing project, make sure it has git initialized, then run claude. It reads the full project structure and can start helping immediately.

Frequently Asked Questions

Q: Can Claude Code build a complete website from scratch without me writing code?

Yes. Describe what you want in plain English. Claude Code generates the full project: HTML, CSS, JavaScript, config files, and deployment setup. The more specific you are, the better the result.

Q: How do I fix bugs using Claude Code's debugging features?

When you encounter an error, type fix. Claude Code reads the error, traces to the source, and proposes a fix. For harder bugs, ask it to add logging or run specific tests.

Q: Does Claude Code work with any programming language or just JavaScript?

It works with virtually any language: Python, JavaScript, TypeScript, Go, Rust, Java, C++, Ruby, PHP, and more. It reads file extensions to understand the language. Commands are the same regardless.