Build a Bookmark Manager with Claude Code

Build a full web app using only natural language prompts with Claude Code.

Introduction

30 Second Summary

You probably have dozens of browser tabs open right now, each one a link you meant to save "for later." Bookmarks are one of those everyday tools everyone uses but nobody organizes well.

In this project, you will build a personal bookmark manager web app entirely through conversation with an AI coding agent. You won't write any code manually. Instead, you'll learn the workflow patterns that turn natural language prompts into working software.

What You'll Build

A bookmark manager web app with add, search, tag, and delete features, built entirely by directing Claude Code with natural language prompts.

By the end of this project, you'll have:

A working bookmark manager web app built through conversational prompts with Claude Code.
A CLAUDE.md file that gives Claude persistent memory of your project's conventions and code style.
Hands-on experience with plan mode, iterative prompting, session management, and git integration to maintain a clean commit history.
Secret Mission: Add a browser bookmark importer that reads exported HTML bookmark files and adds all links into your app.

Are there any prerequisites?

You only need a basic understanding of what a web application is. No coding experience is required. Claude Code handles all the code for you.

Install Claude Code and Set Up Your Environment

Claude Code is a terminal-based AI agent that builds software from your natural language instructions. Before you can start giving it prompts, you need three tools installed on your machine: Node.js, Git, and Claude Code itself.

In this step, you will install each tool and verify it is working. Once everything is set up, you will authenticate with your Anthropic account so Claude Code can talk to Claude.

In this step, get ready to:

Install Node.js and Git on your machine.
Install Claude Code and verify the installation.
Authenticate with your Anthropic account.

Install Node.js and Git

Claude Code requires Node.js as its runtime environment. On Windows, Git is also recommended so Claude Code can use the Bash tool for running shell commands.

Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
Type Terminal (macOS) or PowerShell (Windows) and press Enter to open it.
Check if Node.js is already installed by running this command:

node --version

✔️ I see a version number

Node.js is ready to go. Move on to the Git check below.

ⓧ Command not found

You need to install Node.js. Follow the instructions for your operating system.

macOS

Download the macOS installer from nodejs.org.
Run the downloaded .pkg file and follow the prompts to complete the installation.
Close and reopen your Terminal, then run node --version again to confirm it works.

Windows

Download the Windows installer from nodejs.org.
Run the downloaded .msi file and follow the prompts to complete the installation.
Close and reopen PowerShell, then run node --version again to confirm it works.

Check if Git is already installed by running this command:

git --version

✔️ I see a version number

Git is ready. Move on to installing Claude Code.

ⓧ Command not found

You need to install Git. Follow the instructions for your operating system.

macOS

Run this command to trigger the Xcode Command Line Tools installer, which includes Git:

xcode-select --install

A dialog will appear asking you to install the tools. Click Install and wait for it to finish.
After installation completes, run git --version again to confirm it works.

Windows

Download the Windows installer from git-scm.com.
Run the installer and accept the default settings at each prompt.
Close and reopen PowerShell, then run git --version again to confirm it works.

Why do you need Git on Windows?

Claude Code uses Git Bash as its shell on Windows. Without Git for Windows installed, Claude Code falls back to PowerShell, which limits some of its capabilities.

Install Claude Code

Claude Code is a CLI tool that runs in your terminal. The install command is different depending on your operating system.

Install Claude Code by running the command for your operating system:

macOS

curl -fsSL https://claude.ai/install.sh | bash

What does this command do?

This downloads the official Claude Code installer script from claude.ai and runs it. You will see text scrolling as it installs. When it finishes, you will see a success message.

Windows

winget install Anthropic.ClaudeCode

What does this command do?

This uses WinGet (the Windows package manager) to download and install the official Claude Code package from Anthropic.

Close and reopen your terminal to ensure the new claude command is available on your PATH.
Verify the installation by running this command:

claude --version

✔️ I see a version number

Claude Code is installed and ready. Move on to authentication.

ⓧ Command not found

Make sure you closed and reopened your terminal after installation.
Try running the install command again from the platform tab above.
If you are on Windows, make sure WinGet is available by running winget --version. If WinGet is not recognized, update your Windows App Installer from the Microsoft Store.

Still seeing command not found?

If you have tried reopening your terminal and reinstalling, help me troubleshoot my Claude Code installation.

Log in to Claude Code

Claude Code needs access to your Anthropic account to work. On first launch, it will open your browser for authentication.

What account do I need?

You need a Claude account at claude.ai. The Free plan gives you limited Claude Code usage. For comfortable usage throughout this project, a Claude Pro subscription ($20/month billed monthly, or $17/month with an annual subscription) is recommended.

You can also authenticate with an Anthropic Console API key using claude auth login --console and pay per-token at API rates instead of subscribing.

Start Claude Code by running this command:

claude

A browser window will open automatically asking you to log in.
Sign in with your Anthropic account (or create one if you do not have one yet).
After you authorize, return to your terminal. You should see a Claude Code prompt ready for input.

Browser did not open?

If the browser did not open automatically, look in your terminal for a URL. Copy and paste it into your browser manually to complete authentication.

If you are still having trouble, help me log in to Claude Code.

Type /exit and press Enter to close Claude Code for now. You will start a fresh session in your project folder in the next step.

Your environment is ready. Next up, you will create your project folder and use Claude Code's plan mode to design your bookmark manager before writing any code.

Create Your Project and Explore Plan Mode

Your environment is locked and loaded. Node.js, Git, and Claude Code are all installed and authenticated.

Now it's time to create a project folder and let Claude Code loose on its first real task. Before Claude writes any code, you'll use plan mode to see how it thinks through a problem.

In this step, get ready to:

Create a project folder and initialize a Git repository.
Use plan mode to preview Claude's proposed architecture.
Have Claude build the initial bookmark manager app.

Create your project folder and initialize Git

Every project needs a dedicated folder and version control from the start. Git lets Claude Code track each feature it builds as a separate commit, giving you a clear history of what changed and when.

Move to your Desktop by running this command:

cd ~/Desktop

Create your project folder, move into it, and initialize a Git repository by running these commands:

mkdir bookmark-manager
cd bookmark-manager
git init

You should see a message like Initialized empty Git repository confirming Git is set up.

Why Git from the start?

Claude Code has built-in Git integration. When you ask it to commit changes, it stages files and writes descriptive commit messages for you.

Starting with Git means every feature Claude builds gets tracked as a clean, labeled snapshot. You'll see this in action later when you review the commit history.

Start Claude Code inside your project folder by running:

claude

Claude Code launches its interactive interface. You'll see a welcome banner with the model name, your working directory, and an input box at the bottom where you type prompts.

Not seeing the Claude Code interface?

Make sure you're inside the bookmark-manager folder before running claude. If you get a "command not found" error, Claude Code may not be on your system PATH. Try closing and reopening your terminal.

Help me troubleshoot starting Claude Code in my project folder.

Use plan mode to design the architecture

Plan mode lets Claude analyze your project and propose a solution without writing any files yet. Think of it as asking for a blueprint before construction starts.

Press Shift+Tab to toggle plan mode on. The status bar at the bottom of your terminal updates to show that plan mode is active.
Type the following prompt and press Enter:

Plan the architecture for a personal bookmark manager web app using Node.js and Express. It should have a web interface to add and view bookmarks with URLs, titles, and tags. Store data in a JSON file. Show me your plan without writing any code.

What does plan mode do differently?

In plan mode, Claude can read files and explore your project structure, but it cannot edit or create any source files. This forces it to give you a structured plan you can review and approve before any changes happen.

The plan Claude returns will typically include the file structure it wants to create, the libraries it will use, and how the pieces connect. Take a moment to read through it.

Claude responds with a structured architecture plan. You should see it propose files like server.js, a public/ folder for the frontend, and a bookmarks.json file for data storage.

Implement the initial bookmark manager

You've reviewed the blueprint. Now it's time to let Claude build the real thing.

Press Shift+Tab again to exit plan mode. The status bar updates to reflect normal mode.
Give Claude the implementation prompt by typing the following and pressing Enter:

Build a bookmark manager web app with Node.js and Express. It should have a clean HTML interface where I can add bookmarks with a URL, title, and tags. Store bookmarks in a JSON file.

What is Claude doing now?

Claude reads your prompt, creates the project files, and installs dependencies. You'll see it working in real-time as it creates server.js, public/index.html, package.json, and bookmarks.json.

Claude may ask for permission to run commands like npm init or npm install express. Accept these permissions when prompted. This is Claude setting up the Node.js project and installing the Express framework.

Wait for Claude to finish building. When it's done, it summarizes what it created and confirms the project is ready.

Verify Claude created all the expected files by typing this prompt:

List all the files you just created.

You should see Claude confirm files including server.js, public/index.html, package.json, and bookmarks.json in its response.

Claude didn't create all the files?

If Claude missed a file or the structure looks different from what was planned, you can ask it to fix things directly. Try: "You're missing the bookmarks.json file, please create it as an empty JSON array."

Claude Code is conversational. You can always correct or refine what it built.

Help me fix the files Claude created for my bookmark manager.

Your bookmark manager exists as real files on your machine now. Claude wrote the server, the frontend, and the data store all from a single conversational prompt. Next up, you'll run the app and start adding features through the same conversational workflow.

Test Your App and Iterate with Conversational Prompts

Your bookmark manager exists as code files, but you haven't seen it in action yet. Before you can iterate on it, you need to install its dependencies and start the server.

In this step, you'll launch the app, test it in your browser, and then use Claude Code's conversational workflow to add new features. Each request you type builds on the existing codebase without you editing a single file.

In this step, get ready to:

Run your bookmark manager and verify it saves bookmarks.
Add a real-time search bar through a conversational prompt.
Add delete functionality and commit all changes to git.

Run the app and add test bookmarks

Claude created your app's code in the previous step, but the project dependencies haven't been installed yet. You need to ask Claude to install them, then start the server in a separate terminal so it keeps running while you continue chatting.

In your Claude Code session, type this prompt and press Enter:

install the project dependencies

What happens here?

Claude reads your package.json file, sees that Express is listed as a dependency, and runs npm install for you. You'll see Claude request permission to execute the command, then show the output.

Claude Code may ask for permission to run the command. Accept the permission when prompted.

Now you need to start the server. The server needs to keep running while you test in your browser and while you continue talking to Claude. The easiest way is to open a second terminal window.

Open a new terminal window by pressing Cmd+T (macOS) or Ctrl+Shift+T (Windows) to open a new tab in your terminal app.
Navigate to your project folder and start the server by running these commands:

cd ~/Desktop/bookmark-manager
node server.js

You should see a message in the terminal indicating the server is running, typically showing a port number like 3000.

Open your web browser and go to http://localhost:3000 (or whichever port Claude's server output shows).
Add a test bookmark by filling in the form with a URL, title, and a tag. For example, use https://nextwork.org for the URL, NextWork for the title, and learning for the tag.
Add 2-3 more bookmarks with different tags so you have data to test with later.
Verify bookmarks persist by refreshing the page. Your bookmarks should still appear because they are saved to bookmarks.json.

Don't see anything at localhost?

Check the terminal where you ran node server.js. If you see an error about a missing module, run npm install in that same terminal first, then try node server.js again.
Make sure you are using the port number shown in the terminal output. It may not always be 3000.
Ask for help troubleshooting your server.

Ask Claude to add real-time search

Your app works, but finding a specific bookmark means scrolling through the full list. Now you'll see the core iterative workflow: describe a feature in plain English, and Claude handles all the code changes.

Switch back to the terminal tab where Claude Code is running.
Type this prompt and press Enter:

Add a search bar that filters bookmarks by title or tag in real-time as I type.

Watch Claude work. It reads your existing code, plans the changes, then edits both the frontend and backend files to add the search feature.

What is Claude doing?

Claude Code reads your public/index.html and server.js files to understand the current structure. It then adds an input field to the HTML and writes JavaScript to filter the displayed bookmarks as you type. All changes respect the existing code patterns Claude already established.

This is the conversational development loop: you describe what you want, Claude reads the context, plans changes, and implements them. You never touch the code directly.

Accept any permission requests Claude makes to edit files.
Once Claude confirms it's done, switch to your server terminal and press Ctrl+C to stop the server.
Restart the server by running:

node server.js

Refresh your browser at http://localhost:3000.
Test the search bar by typing part of a bookmark title or tag. The bookmark list should filter in real-time as you type.

Restart the server after each change

Because this app uses a plain Node.js server (not a hot-reloading dev server), you need to stop and restart node server.js each time Claude edits the code. Press Ctrl+C then run node server.js again.

Search bar not filtering?

Make sure you restarted the server after Claude made changes. The old server is still serving the previous version of your files.
Try a hard refresh in your browser (Cmd+Shift+R on macOS or Ctrl+Shift+R on Windows) to clear any cached files.
If the search bar doesn't appear at all, go back to Claude Code and tell it what you see. Claude can read its own changes and fix issues.
Ask for help debugging the search feature.

Add delete functionality and commit your changes

One more feature, then you'll save your progress. You'll ask Claude to add a delete button and then use its built-in git integration to commit everything with a clean message.

Switch back to your Claude Code terminal tab.
Type this prompt and press Enter:

Add the ability to delete bookmarks with a confirmation prompt.

Accept any permission requests Claude makes to edit files or run commands.
Once Claude confirms it's done, switch to your server terminal, press Ctrl+C, and restart:

node server.js

Refresh your browser and test the delete feature by clicking the delete button on one of your test bookmarks.
You should see a confirmation prompt before the bookmark is removed.

Why a confirmation prompt?

Accidental deletes are irreversible. The confirmation prompt is a common UX pattern that prevents data loss. Notice how you can describe user experience requirements in plain English and Claude implements the appropriate interaction pattern.

Now use Claude's Git integration to commit all your progress.

Switch back to your Claude Code terminal tab.
Type this prompt and press Enter:

commit these changes with a good message

What does Claude do with git?

Claude stages all modified files, writes a descriptive commit message summarizing the features you added (search and delete), and commits. You get a clean git history without needing to remember git commands.

Accept any permission requests Claude makes to run git commands.
Claude will show you the commit message it used. Verify it mentions both the search and delete features.

Claude says there's nothing to commit?

This can happen if Claude already committed changes earlier in the conversation. Ask Claude "show me the git log" to verify your commits are recorded.
If you see uncommitted changes listed when you ask "git status", try asking Claude again: "stage all changes and commit with a message about adding search and delete features."
Ask for help with git commit issues.

You just added two features to a working app without writing a single line of code. Next up, you'll give Claude persistent memory of your project so it stays consistent across sessions.

Set Up CLAUDE.md for Project Memory

Your bookmark manager now has add, search, and delete features, all built through conversation with Claude Code.

There's one problem with this workflow so far. Every time you start a new session, Claude has no memory of your project's conventions or decisions. It can read your code, but it doesn't know the rules you want followed. In this step, you'll set up a project memory file so Claude always knows how your project works.

In this step, get ready to:

Generate a CLAUDE.md file using the /init command.
Customize CLAUDE.md with your project's conventions and code style rules.
Test project memory by starting a fresh session.

Generate a starter CLAUDE.md with /init

CLAUDE.md is a special file that Claude reads at the start of every conversation. It acts as your project's memory, telling Claude about your conventions, tech stack, and workflow rules without you needing to repeat yourself.

In your Claude Code session, type the following command and press Enter:

/init

What does /init do?

Claude scans your project files (like package.json, server.js, and your HTML) to detect your tech stack, dependencies, and code patterns.

It then generates a CLAUDE.md file at your project root with a summary of what it found. Claude will ask you to approve the file before saving it.

Review the CLAUDE.md content that Claude proposes. Accept the edit when prompted.
Confirm the file was created by checking your project folder. You should see CLAUDE.md listed alongside server.js and package.json.

Don't see a CLAUDE.md file?

Make sure you accepted the edit when Claude asked for approval. If you accidentally rejected it, run /init again.

Help me troubleshoot why /init didn't create my CLAUDE.md file.

Customize CLAUDE.md with your project conventions

The auto-generated CLAUDE.md is a starting point. You can refine it to include specific rules that Claude should follow when adding new features.

Ask Claude to update the file by typing this prompt:

Update CLAUDE.md to include: this project uses vanilla HTML/CSS/JS for the frontend, Express for the backend, data is stored in bookmarks.json, and all new features should follow the existing code style.

Why spell out these conventions?

Without explicit rules, Claude might introduce a frontend framework like React, switch to a database, or change the coding style between features. CLAUDE.md ensures consistency across every future session.

Think of it as onboarding documentation for your AI collaborator.

Accept the edit when Claude shows you the updated CLAUDE.md.
Ask Claude to show you the final file by typing:

Show me the contents of CLAUDE.md

You should see your project conventions listed clearly, including the vanilla HTML/CSS/JS frontend, Express backend, and bookmarks.json data store.

CLAUDE.md missing your conventions?

If Claude only partially updated the file, repeat your prompt with more specific instructions. You can also ask Claude to open the file so you can review it line by line.

Help me get Claude to update my CLAUDE.md correctly.

Test project memory in a fresh session

The real test of CLAUDE.md is whether Claude remembers your conventions after you clear the conversation. The /clear command starts a fresh conversation context, but CLAUDE.md persists on disk.

Clear your current session by typing:

/clear

Now ask Claude about your project by typing:

What is this project?

Claude should respond with details about your bookmark manager, referencing the conventions from CLAUDE.md. It knows about the Express backend, vanilla frontend, and JSON data store without you explaining anything.

Why does this work?

Claude reads CLAUDE.md at the start of every conversation automatically. Even after /clear wipes the conversation history, the file remains in your project folder. Claude picks it up again on the next message.

Claude not referencing your conventions?

Make sure CLAUDE.md is in the root of your bookmark-manager folder (not inside a subfolder). Also confirm the file was saved successfully in the previous substep.

Help me figure out why Claude isn't reading my CLAUDE.md file.

Your project now has persistent memory. No matter how many times you clear your session or come back tomorrow, Claude will read CLAUDE.md and understand your project conventions instantly. Next up, you'll use this foundation to polish the app's visual design and add editing capabilities.

Use Session Management and Polish the App

Your CLAUDE.md is in place and working. Claude now understands your project conventions the moment a new session starts.

In this step, you'll put the finishing touches on your bookmark manager. You'll use conversational prompts to polish the visual design, add edit functionality, and commit a clean history of your work.

In this step, get ready to:

Style bookmark cards with better spacing, colors, hover effects, and tags as colored pills.
Add edit functionality so users can update existing bookmarks.
Commit all changes and review the full git history.

Style the bookmark cards

Your bookmark manager works, but a polished interface makes it feel professional. You'll ask Claude to handle all the CSS styling in one prompt.

In your Claude Code session, type this prompt to request visual improvements:

Make the bookmark cards look nicer with better spacing, a color scheme, and hover effects. Show tags as colored pills.

What makes this prompt effective?

The prompt names specific visual goals (spacing, color scheme, hover effects, tag pills) instead of saying something vague like "make it pretty." Claude interprets these design intentions and picks appropriate CSS values.

Watch Claude read your existing HTML structure, plan where to add styles, and write CSS that matches the current layout.

Once Claude finishes, open a separate terminal window and start the server by running:

node server.js

Open your browser to http://localhost:3000 (or whichever port Claude configured).
You should see styled bookmark cards with visible spacing, a cohesive color scheme, hover effects when you mouse over cards, and tags displayed as small colored pill shapes.

Not seeing styled cards?

Hard-refresh the page with Cmd+Shift+R (macOS) or Ctrl+Shift+R (Windows) to clear cached CSS.
Make sure you have at least one bookmark with tags saved so the pill styling is visible.
If the page looks unchanged, ask Claude: "Did you save the CSS changes? Show me what files you modified."

Still stuck? Help me troubleshoot why my bookmark cards aren't showing the new styles after Claude made CSS changes.

Add edit functionality

Users should be able to fix typos or update bookmarks after saving them. This is a core feature for any content manager.

Switch back to your Claude Code session and type this prompt:

Add the ability to edit existing bookmarks, changing their title, URL, or tags.

What will Claude do with this?

Claude will read your existing code to understand the current bookmark structure. It will then add an edit button or mechanism to each bookmark card, create a new API endpoint for updating bookmarks, and build a frontend form or inline editing interface.

This is a multi-file change. Claude handles the coordination between the server route, the JSON storage logic, and the frontend JavaScript automatically.

Stop and restart your server if it's still running from earlier, then refresh your browser.
Click the edit option on an existing bookmark and change its title or tags.
Refresh the page to confirm the edit persisted in bookmarks.json.

Edit not saving changes?

Check that the server restarted after Claude made changes. Old server code won't have the new edit endpoint.
If the edit UI appears but changes don't persist, ask Claude: "The edit feature isn't saving. Can you check the PUT or PATCH endpoint is writing to bookmarks.json correctly?"
If no edit button appears at all, ask Claude: "I don't see an edit option on the bookmark cards. Can you add one?"

Need more help? Help me debug why my bookmark edit feature isn't working correctly.

Commit and review your git history

Each feature you've built represents a meaningful piece of work. A clean commit history documents how your project evolved over time.

In your Claude Code session, ask Claude to commit and display the history:

commit this change, then show me the full git log

What does Claude do here?

Claude stages all modified files, writes a descriptive commit message summarizing the polish and edit features, then runs git log to display your project's full history.

You should see multiple commits showing how features were added incrementally: the initial build, search and delete features, and now the visual polish with edit functionality.

Review the git log output Claude shows you.
You should see at least 3 commits with descriptive messages, each representing a distinct feature or improvement.

Why does incremental commit history matter?

Each commit captures a working state of your app. If a future change breaks something, you can roll back to any previous commit. This is the same workflow professional developers use daily.

Claude Code's Git integration makes this effortless. You never had to remember staging commands or write commit messages yourself.

Claude says there's nothing to commit?

This means Claude already committed the changes from the edit feature automatically. Ask Claude: "show me the full git log" to verify all features are captured.
If you only see one commit in the log, some earlier prompts may not have been committed. Ask Claude: "commit any uncommitted changes, then show the full git log."

Need help? Help me understand my git log output and whether all my features are properly committed.

Secret mission

Browser Bookmark Importer

Your bookmark manager works great for new links. But what about the hundreds of bookmarks you've already saved in your browser over the years? In this secret mission, you'll have Claude Code build an import feature that reads your browser's exported bookmarks file and brings all those links into your app.

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely locally, so there are no ongoing cloud costs.

Resources you used:

bookmark-manager project folder on your Desktop (includes all source files, node_modules, bookmarks.json, and git history).
Claude Code CLI tool (installed via WinGet or native installer).

Keep everything running

No action needed. Choose this if you plan to keep building on your bookmark manager or want to use Claude Code for other projects.

Your bookmark-manager folder stays on your Desktop with all your bookmarks intact.
Claude Code remains installed and ready for your next project.
Node.js and Git remain installed on your machine. These are general-purpose tools useful for many other projects.

Pause - I'll come back to this later

Stop the running server to free up your terminal. Your files stay on disk so you can pick up where you left off.

If your Express server is still running in a terminal, press Ctrl+C to stop it.
Your bookmark-manager folder and all bookmarks remain saved on your Desktop.
To resume later, open a terminal, navigate to the folder, and run your server again.

Delete - I don't want to use this again

Remove all project files and optionally uninstall Claude Code. This frees disk space and cleans up completely.

If your Express server is still running, press Ctrl+C to stop it.
Delete the project folder by running the command for your operating system below.

macOS

Remove the project folder:

rm -rf ~/Desktop/bookmark-manager

To uninstall Claude Code (optional):

rm -f ~/.local/bin/claude
rm -rf ~/.local/share/claude

Windows

Remove the project folder:

Remove-Item -Recurse -Force ~\Desktop\bookmark-manager

To uninstall Claude Code (optional):

winget uninstall Anthropic.ClaudeCode

Node.js and Git can stay installed. They are general-purpose development tools useful beyond this project.

Nice Work!

You just built a complete web application without writing a single line of code manually. Your bookmark manager is fully functional with add, search, tag, edit, and delete features, all created through conversation with Claude Code.

You've learned how to:

Built a fully functional bookmark manager web app using only natural language prompts with Claude Code.
Used plan mode to review Claude's approach before it writes code, then iterated on features conversationally.
Configured CLAUDE.md to give Claude persistent memory of your project conventions across sessions.
Added a browser bookmark importer that parses real HTML bookmark files exported from your browser and handles duplicates gracefully.

You now have the core workflow to build any project with Claude Code: plan first, build incrementally, use CLAUDE.md for memory, and commit often. These patterns apply to any project you tackle next.

Ready to quiz yourself?