Claude Code with Git Worktrees

Build a budget tracker with parallel Claude Code worktree sessions

Introduction

⚡️ 30 Second Summary

You have one AI coding assistant, but what if you could run three of them at the same time, each building a different feature for you in parallel?

In this project, you will use Git worktrees and Claude Code to build a personal budget tracker with three features developed simultaneously in separate terminal sessions, then merge everything together into one working app.

What You'll Build

A personal budget tracker web app that runs locally in your browser, built as a modular multi-file project with vanilla HTML, CSS, and JavaScript using localStorage for data persistence. Each feature lives in its own dedicated files, built in parallel across separate worktrees.

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

💰 A working budget tracker that lets you add expenses and income, view categorized spending, and see monthly summary charts.
🌳 Hands-on experience using Git worktrees to run 2-3 Claude Code sessions simultaneously in separate terminals.
🔀 A repeatable parallel workflow you can use on any future project to multiply your productivity with Claude Code.
💎 Secret Mission: Create a custom subagent with worktree isolation that automatically dispatches parallel agents to add new features.

Want a complete demo of how to do this project, from start to finish? Check out our 🎬 walkthrough with Maximus

Do I need to pay to do this project?

This project requires a Claude Pro or Claude Max subscription for access to Claude Code. Everything else runs locally with no additional costs. You will need a macOS, Linux, or Windows (via WSL) computer with a terminal.

Not sure if this project is right for you? Check if it matches your goals

If you're up for a bit of a challenge, quiz yourself on the key concepts up ahead in this project.

Set Up Your Tools

To build a budget tracker with parallel Claude Code sessions, we first need to make sure we have the right tools installed. Claude Code is a command-line AI coding assistant, and Git is the version control system that powers worktrees.

In this step, get ready to:

Install Claude Code.
Install and configure Git.

Install Claude Code

✔️ I already have Claude Code

Open your terminal and run:

claude --version

You should see a version number like 2.x.x. If the command is not found, switch to the I need to install it tab.

What version do I need?

You need Claude Code version 2.0 or later for this project, since the -w worktree flag was introduced in version 2. If you have an older version, you can update by running npm update -g @anthropic-ai/claude-code.

🆕 I need to install it

Install Claude Code

Claude Code is installed as a native binary, so it's a single command!

🍎 macOS / Linux

Open your terminal.
Copy & paste the following command:

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

Press Enter.

🖼️ Windows

Claude Code on Windows requires Git Bash, which comes with Git for Windows. Let's check if you have it, then install Claude Code.

Open PowerShell and run:

git --version

If you see something like git version 2.x.x, you're good to go.

Already have Git?

If git --version printed a version, skip to the next step.

Install Git

Go to git-scm.com/downloads/win in your browser.
Click the download link for your system (64-bit for most machines).

Run the downloaded installer.
If you see a security warning, click Run.

Walk Through the Setup Wizard

The default settings are fine for most screens. Here's what you'll see:

Accept the license agreement and click Next.

Leave the destination as C:\Program Files\Git and click Next.

Leave the default components selected and click Next.

Leave the Start Menu folder as Git and click Next.

Leave the default editor setting and click Next.

Leave "Let Git decide" selected for the initial branch name and click Next.

On the "Adjusting your PATH environment" screen, make sure "Git from the command line and also from 3rd-party software" is selected. Click Next.

Why does the PATH setting matter?

This option lets you run git from PowerShell and other programs, not just Git Bash. Claude Code needs this to work correctly.

Leave "Use bundled OpenSSH" selected and click Next.

Leave the HTTPS transport backend setting and click Next.

Leave the terminal emulator setting and click Next.

Leave the default git pull behavior and click Next.

Leave "Git Credential Manager" selected and click Next.

Leave the extra options as-is and click Install.

Wait for the installation to finish.

Click Finish.

Verify Git Bash is installed by opening PowerShell and running:

git --version

You should see something like git version 2.x.x.

Install Claude Code

In the same PowerShell window, copy & paste the following command:

irm https://claude.ai/install.ps1 | iex

Press Enter.

What does this command do?

irm downloads the installer script and iex executes it. This installs Claude Code as a standalone program on your machine. Claude Code uses Git Bash under the hood to run commands, which is why Git for Windows is required. Read more in the official docs.

💡 Prefer WSL?

If you have Windows Subsystem for Linux (WSL) set up, you can install Claude Code inside WSL using the macOS/Linux command instead. WSL 2 also enables sandboxing for enhanced security.

Verify the installation by running:

claude --version

✔️ I see a version number

You should see something like claude 2.1.x. The exact version may differ. Claude Code is installed!

ⓧ Command not found

🍎 macOS / Linux

Did your installer show a Setup notes warning?

Run the following commands to fix it:

echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

What does this command do?

The first line adds ~/.local/bin (where Claude Code lives) to your PATH permanently by writing it to your shell config file. The second line reloads the config so the change takes effect right away.

🙋‍♀️ Using bash instead of zsh?

Replace ~/.zshrc with ~/.bashrc in the commands above. Not sure which shell you're using? Run echo $SHELL to find out.

🖼️ Windows

Close your PowerShell window and open a new one. The installer updates your PATH, but existing terminals won't see the change until restarted.
If it still doesn't work, try running the installer again:

irm https://claude.ai/install.ps1 | iex

Verify the installation again by running:

claude --version

Still stuck?

Get help with your error or share your error with the NextWork community!

Set Up Your Claude Account

Claude Code needs a paid account to run. You can use either a Claude subscription or Anthropic API credits.

Why does Claude Code cost money?

Claude.ai (the chatbot) and Claude Code both use tokens to process your messages. The difference is how many tokens they use. A chatbot conversation is short and lightweight. Claude Code reads your entire project, writes full files, and runs commands, so it uses significantly more tokens per session. A paid account gives you the token budget Claude Code needs to do its job.

✔️ I already have one of these

You're all set! You'll connect Claude Code to your account in the next step.

🤔 Help me decide

There are two ways to pay for Claude Code:

Which option should I choose?

If you're new to Claude, start with a Pro subscription. You get Claude Code plus the Claude.ai chatbot, all in one plan.

If you only want to try Claude Code for this project, API credits let you pay for exactly what you use.

📋 Set up a Claude subscription

Claude Code works with a Claude Pro ($20/mo) or Max ($100/mo) subscription. Here's how to set one up:

Go to claude.ai in your browser.

Click Sign Up and create an account with your email or Google account.
Once logged in, click Upgrade in the center of the page.

Select the plan of your choice.

Choose either monthly or yearly billing.
Enter your payment details.

Your subscription gives you a monthly token allowance that covers Claude Code usage. Pro is plenty for this project.

🪙 Set up Anthropic API credits

Claude Code also works with pay-as-you-go API credits (~$6/day average). Here's how to set them up:

Go to console.anthropic.com in your browser.
Sign in, or create an account with your email or Google account.

Once logged in, select Buy credits in the center of the Claude Console.

Add credits to your account. $5-10 is more than enough for this project.
Click Add Payment Method.
Enter your payment details.

Go to API Keys in the left sidebar.
Click Create Key.
Give it a name (e.g., "claude-code").
Copy the key.

Save the key somewhere safe. You'll use it in the next step.

Free credits for new accounts

New Console accounts sometimes get $5 in free credits, enough to complete this entire project. Check your Billing page after signing up.

Install and Configure Git

✔️ I already have Git

Run this command to confirm:

git --version

You should see something like git version 2.x.x. If the command is not found, switch to the I need to install it tab.

🆕 I need to install Git

🍎 macOS

Run this command in your terminal:

xcode-select --install

Follow the prompts to complete the installation.

🖼️ Windows

Download Git from git-scm.com/download/win.
Run the installer and accept the default settings.
Close and reopen your terminal after installation.

Confirm the installation by running:

git --version

You should see something like git version 2.x.x.

Still not working?

If Git is still not recognized, try restarting your terminal or computer. Need more help?

🙋‍♀️ Still stuck?

Get help with your error or share your error with the NextWork community!

Your tools are installed. Next up, you will create a project and see how Git worktrees let you work on multiple features at the same time.

Create Your Project and Learn the Git Basics

Now that your tools are ready, let's create the project that Claude Code will work on. You will be building a budget tracker app, and to manage the code, you need a solid foundation in Git.

Before we jump into worktrees later, you need to understand a few core Git concepts. In this step, you will set up your project, have Claude Code scaffold it, and learn the building blocks of Git.

In this step, get ready to:

Create your project folder and initialize a Git repository.
Use Claude Code to scaffold your budget tracker app.
Learn key Git concepts like branches, commits, and worktrees.

Create Your Project Folder

Open your terminal.
Navigate to your Desktop so the project is easy to find:

cd ~/Desktop

Create a new folder and navigate into it:

mkdir budget-tracker && cd budget-tracker

Initialize a new Git repository:

git init

What does git init do?

git init turns your folder into a Git repository. This means Git will start tracking every change you make to files in this folder. Think of it as telling Git, "Hey, keep an eye on this project for me."

Scaffold Your App with Claude Code

Now let's use Claude Code to build the starting point of your budget tracker.

Start a Claude Code session:

claude

Claude Code may show a security prompt asking if you trust this project folder.

Select Yes, I trust this folder to continue.

What is this trust prompt?

Claude Code asks this the first time you open a project folder. Since Claude Code can read, edit, and execute files, it wants to make sure you are working in a folder you trust. You created this folder yourself, so it is safe to trust it.

Copy and paste the following prompt into Claude Code:

Create these files in the current directory for a budget tracker app:
- index.html: Include Pico CSS from CDN (https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css). Use a <main class="container"> wrapper. Add a title "My Budget Tracker" in a <header>. Add an empty <section> where features will be injected. Link styles.css and app.js.
- styles.css: Custom accent color (#7c3aed), subtle tweaks that complement Pico's base theme (e.g. section spacing, feature card padding)
- app.js: a shared utility that loads and saves transactions to localStorage as a JSON array, plus a helper that re-renders all feature sections on data change

What does this prompt do?

This prompt sets up a multi-file structure so that later, each worktree can build its feature in separate files without stepping on each other. Pico CSS is a lightweight CSS framework that automatically styles your HTML elements, so your app looks polished without writing much custom CSS.

Claude Code will ask for permission before creating each file.

Select Yes, allow all edits during this session so Claude can create all three files without asking each time.

Why does Claude Code ask for permission?

Claude Code asks before creating or editing files so you stay in control. This is a safety feature that prevents unexpected changes to your project. You will see this prompt whenever Claude wants to modify a file.

See What You Built

Let's open your new file in the browser to see what Claude Code created for you.

Type /exit in Claude Code to end the session.
You should now see your normal terminal prompt. Open index.html in your browser:

🍎 macOS

open index.html

🖼️ Windows

explorer.exe index.html

Nothing opened?

Make sure you exited Claude Code first. The open command needs to run from your normal terminal, not from inside a Claude Code session. Type /exit in Claude Code, then try the command again. You can also navigate to the budget-tracker folder on your Desktop and double-click index.html to open it directly.

You should see a clean, centered page with the title "My Budget Tracker". There is no functionality yet, but this is the foundation you will build on.

Commit Your Work

Now let's save this progress to Git. Start Claude Code again:

claude

Now commit your work. Ask Claude to save your changes:

Commit all changes with the message "Initial scaffold for budget tracker"

Claude Code will show a "Do you want to proceed?" prompt asking permission to stage and commit your files.

Select Yes to allow the command. You can also select the "Yes, and don't ask again" option to skip this prompt for future Git commands.

What just happened?

You just created a commit, which is a saved snapshot of your project. Git saved a record of exactly what your project looks like right now. You can always go back to this snapshot later if something goes wrong.

Exit Claude Code by typing /exit or pressing Ctrl+C twice.

Your project is set up and your first commit is saved. Next, you will use worktrees to build features in isolated workspaces.

Launch Your First Worktree Session

Your budget tracker has a basic structure but no real features yet. Now it is time to add the ability to log transactions, but without risking the working scaffold on your main branch.

This is where worktrees come in. A branch is like a parallel timeline for your project. Normally, switching to a new branch changes the files in your current folder, so you can only work on one branch at a time. Worktrees solve this by giving each branch its own separate folder on your computer. This means you can have multiple branches open at the same time, each with its own Claude Code session running independently.

Why are worktrees suddenly everywhere?

Git worktrees have been around since 2015, but most developers rarely used them. When you are the only one writing code, working on one branch at a time is fine. But Claude Code changes that. If one AI session takes 5 minutes to build a feature, building three features one at a time takes 15 minutes. With worktrees, you can run three Claude Code sessions in parallel, each in its own isolated folder and branch, and build all three features in the same 5 minutes. That is a 3x speedup just by opening extra terminal windows.

In this step, get ready to:

Launch a worktree session with Claude Code.
Build an "add transaction" feature using AI.
Verify your worktree and branch setup.

Launch a Worktree Session

First, make sure you have exited Claude Code from the previous step. You should see your normal terminal prompt, not the Claude Code interface.

How do I know if I am still in Claude Code?

If you see a > prompt with the Claude Code interface, you are still inside a session. Type /exit or press Ctrl+C twice to exit and return to your normal terminal.

You should still be in the budget-tracker directory from the previous step. If not, navigate back to it.

Launch Claude Code with the worktree flag.

claude -w add-transactions

What does claude -w do?

The -w flag tells Claude Code to create a worktree. This does three things at once:

Creates a new folder at .claude/worktrees/add-transactions/.
Creates a new Git branch called worktree-add-transactions.
Starts a Claude Code session inside that isolated folder.

Your main branch stays completely untouched.

🙋‍♀️ Getting an error about "Failed to resolve base branch HEAD"?

This error means your Git repository does not have any commits yet. Go back to Step 2 and make sure you committed your scaffold. You can fix this quickly by running: git add . && git commit -m "Initial scaffold for budget tracker", then try claude -w add-transactions again. Need more help?

Notice that you are now working inside a separate directory. Any changes you make here will not affect your main branch.

Let's see where the worktree lives on your computer. Open the budget-tracker folder on your Desktop in your file explorer and show hidden files so you can see the .claude folder:

🍎 macOS

Press Cmd+Shift+. (period) in Finder to toggle hidden files.

🖼️ Windows

In File Explorer, click View in the toolbar and check Hidden items.

Open the .claude folder, then open worktrees/add-transactions/. This is the separate copy of your project that the worktree created.

Build the Transaction Feature

Now that you are inside the worktree session, ask Claude to build the transaction feature.

Type the following prompt into Claude Code:

Create two new files for a transaction feature:
- transactions.js: Wrap the feature in an <article> element (Pico styles these as cards). Include a form with fields for description, amount, a category <select> (Food, Transport, Entertainment, Bills, Shopping, Other), and a type toggle for income/expense using Pico's role="switch" toggle. Use the shared load/save helpers from app.js. Display a transaction list below the form as a styled <table> with delete buttons. Call the shared re-render helper after changes.
- transactions.css: Income rows in green, expense rows in red. Minimal overrides since Pico handles most form and table styling.
Also update index.html to add <link> and <script> tags for the new files.

What does this prompt do?

Instead of editing the existing files, this prompt tells Claude to create brand new files (transactions.js and transactions.css) just for this feature. This is important because later, when you have multiple worktrees building different features at the same time, each one will be working in its own files. No two worktrees will try to edit the same file, which means you can merge everything together cleanly at the end.

Claude Code may ask for permission to create and edit files.

Select Yes or Yes, allow all edits during this session to let it proceed.

Claude will create the new files and make a small update to index.html to link them.

Commit and Verify

Ask Claude to commit the changes.

Commit all changes with the message "Add transaction feature with dedicated JS and CSS files"

Type /exit and press Enter to exit the Claude Code session.

Claude Code will show an "Exiting worktree session" prompt asking whether to keep or remove the worktree.

Select Keep worktree so your feature branch and files stay on your computer. You will need them later when you merge everything together.

Now let's see what the transaction feature looks like.

Open the worktree's index.html in your browser:

🍎 macOS

open .claude/worktrees/add-transactions/index.html

🖼️ Windows

explorer.exe .claude\worktrees\add-transactions\index.html

Make sure you are back in your main budget-tracker directory before running the next commands:

cd ~/Desktop/budget-tracker

Let's confirm the worktree is set up correctly.

List all active worktrees.

git worktree list

You should see two entries: your main working directory and the new .claude/worktrees/add-transactions/ worktree.

List all branches to see the new worktree branch.

git branch

You should see both main and worktree-add-transactions listed.

Not seeing the worktree branch?

Make sure you ran claude -w add-transactions from inside the budget-tracker directory. How do I check which directory I am in?

You have seen a worktree in action. A fully isolated workspace where you can build a feature without touching your main branch. But the real power comes next: running multiple worktree sessions at the same time.

Go Parallel: Run Two More Worktree Sessions Simultaneously

You have built your first feature in its own worktree. That proves the concept works, but so far you have only used a single Claude Code session. A real project has multiple features that all need building. What if you could build them all at the same time?

That is exactly what Git worktrees unlock. By opening additional terminal windows, you can run multiple Claude Code sessions in parallel, each one working on a different feature branch in complete isolation.

In this step, get ready to:

Launch a second Claude Code worktree session for category breakdown.
Launch a third Claude Code worktree session for monthly summary.
Verify all three worktrees are running in parallel.

Launch the Category Breakdown Session

Open a second terminal window. You can do this with Cmd+N (macOS Terminal) or Ctrl+Shift+N (Windows Terminal).

Why a new terminal window?

Each Claude Code worktree session needs its own terminal because each session is an independent process working on its own branch. You cannot run two Claude Code sessions in the same terminal.

Navigate to your project directory:

cd ~/Desktop/budget-tracker

Launch a new worktree session for the category breakdown feature:

claude -w category-breakdown

Paste the following prompt into Claude Code:

Create two new files for a category breakdown feature:
- categories.js: Wrap in an <article> element. Read transactions using the shared helpers from app.js. Show each category as a row with the category name, total, percentage, and a <progress> bar (Pico styles these automatically). Expenses only. Auto-update on load and on data change using the shared re-render helper. Include a "Total Expenses" summary.
- categories.css: Category-specific colors for the progress bars. Minimal overrides since Pico handles card and progress styling.
Also update index.html to add <link> and <script> tags for the new files.

What does this prompt do?

Claude will create two new files: categories.js handles the logic for reading your transactions and grouping them by category (Food, Transport, etc.), and categories.css styles everything. The result is a visual spending breakdown with progress bars showing how much you spent in each category. It pulls data from the same localStorage helpers in app.js that the transaction feature uses.

Press Enter to submit the prompt.
If Claude Code asks for permission, select Yes or Yes, allow all edits during this session.

Claude Code starts building the category breakdown feature. While it works, leave this terminal running and move on to the next substep.

Launch the Monthly Summary Session

Open a third terminal window with Cmd+N (macOS) or Ctrl+Shift+N (Windows).
Navigate to your project directory again:

cd ~/Desktop/budget-tracker

Launch another worktree session, this time for the monthly summary feature:

claude -w monthly-summary

Claude Code may show the trust prompt again for this new worktree folder. If it does, select Yes, I trust this folder.

Paste the following prompt:

Create two new files for a monthly summary feature:
- summary.js: Wrap in an <article> element. Show current month totals (income, expenses, net balance) using the shared helpers from app.js. Use a CSS grid of three stat boxes inside the card. Green for positive, red for negative. Month-by-month history for the last 3 months as a styled <table>. Savings rate percentage. Auto-update on data change using the shared re-render helper.
- summary.css: Stat box grid layout, green/red color accents. Minimal overrides since Pico handles card and table styling.
Also update index.html to add <link> and <script> tags for the new files.

What does this prompt do?

Claude will create two new files: summary.js calculates your monthly income, expenses, and net balance, and summary.css styles the layout. The result is a dashboard card with three stat boxes at the top and a month-by-month history table below. It reads from the same shared helpers in app.js, so all three features stay in sync.

Press Enter to submit the prompt.
If Claude Code asks for permission, select Yes or Yes, allow all edits during this session.

You now have three terminal windows open, each running its own Claude Code session in a separate worktree. Each session is building a different feature on its own branch, completely isolated from the others.

How is this possible?

Each worktree creates a separate working directory linked to the same Git repository. Each session creates its own feature files (transactions.js, categories.js, summary.js) on its own branch. Since each feature lives in dedicated files, the worktrees barely overlap, which is exactly how real teams use worktrees.

Verify Your Parallel Worktrees

Wait for both Claude Code sessions to finish building their features.

Once both sessions are done, commit and exit each one individually.

Switch to your category breakdown terminal. Ask Claude to commit:

Commit all changes with an appropriate message

Type /exit and press Enter.
Claude Code will show an "Exiting worktree session" prompt. Select Keep worktree.
Switch to your monthly summary terminal. Ask Claude to commit:

Commit all changes with an appropriate message

Type /exit and press Enter.
Select Keep worktree again.

Let's peek at one of the features you just built. Open the category breakdown worktree's index.html to see it in action:

🍎 macOS

open .claude/worktrees/category-breakdown/index.html

🖼️ Windows

explorer.exe .claude\worktrees\category-breakdown\index.html

Now open the monthly summary feature:

🍎 macOS

open .claude/worktrees/monthly-summary/index.html

🖼️ Windows

explorer.exe .claude\worktrees\monthly-summary\index.html

Each worktree's page only shows its own feature. Soon you will merge all three together.

In any terminal window, navigate to your project directory:

cd ~/Desktop/budget-tracker

Run this command to see all active worktrees:

git worktree list

You should see three worktrees listed, each pointing to a different branch.

Run this command to verify the branches:

git branch

You should see main plus three feature branches: the one from the previous step and the two you just created.

Not seeing three worktrees or branches?

Make sure both Claude Code sessions have finished and exited cleanly. If a session was interrupted, you may need to clean up the worktree manually.

You have three features built in parallel, each on its own branch. Next up, you will merge all of them together into a single working application.

Merge Everything Together

You have built three separate features across three worktrees. Each one is working on its own, but your main branch still has none of them. To finish the budget tracker, you need to bring all three features together.

How do you combine three separate branches into one working app? That is exactly what merging does. Since each feature created its own dedicated files, most of the merge will be clean. But all three branches added <script> and <link> tags to index.html, so you may run into small merge conflicts that Claude Code can help resolve.

In this step, get ready to:

Merge all three feature branches into main.
Resolve merge conflicts with Claude Code.
Test the complete budget tracker in your browser.

Switch Back to the Main Project

Before merging, you need to make sure you are in the main project directory, not inside a worktree.

Navigate to the budget-tracker directory in your terminal.

cd ~/Desktop/budget-tracker

Why does the directory matter?

Worktrees are separate working directories linked to the same Git repository. When you merge branches, you need to be in the main working directory, not inside a worktree folder. Running a merge from inside a worktree would merge into that worktree's branch instead of main.

Merge the First Branch

Let's start by merging the transaction feature. You will run the merge command yourself so you can see what happens.

Run this command to merge the first feature branch into main:

git merge worktree-add-transactions

What just happened?

git merge takes all the changes from the worktree-add-transactions branch and applies them to your current branch (main). In this case, it copied over transactions.js, transactions.css, and the new <script> and <link> tags that were added to index.html. Your main branch now has the transaction feature as if you had built it here all along. This merge was clean because no other branch had changed index.html yet, so there was nothing to conflict with.

Open index.html to see the transaction feature now live on your main branch:

🍎 macOS

open index.html

🖼️ Windows

explorer.exe index.html

The transaction form is now part of your main branch. Try it out! Add a couple of test transactions (for example, "Lunch" for $12 under Food, or "Bus fare" for $3 under Transport) to make sure the form works. You will need this data later when you merge the other features.

Merge the Second Branch

Now merge the category breakdown feature.

Run this command:

git merge worktree-category-breakdown

This time, you will likely see a message that says "CONFLICT" and "Automatic merge failed". Do not panic! This is normal.

Refresh index.html in your browser to see what a merge conflict actually looks like:

You should see ugly text like <<<<<<< HEAD ======= >>>>>>> worktree-category-breakdown at the top of the page. The transaction form still works below it, but the page is broken because Git left conflict markers inside your HTML file.

What am I looking at?

Both the transaction branch and the category branch added <script> and <link> tags to the same spot in index.html. Git does not know which version to keep, so it wrote both versions into the file separated by markers. Everything between <<<<<<< and ======= is from your current branch (main, which has the transaction tags). Everything between ======= and >>>>>>> is from the category breakdown branch. You need all the tags from both branches, but Git cannot figure that out on its own. Instead of fixing this by hand, let Claude Code handle it.

Start Claude Code:

claude

Ask Claude to resolve the conflict:

There is a merge conflict in index.html. Resolve it by keeping all the script and link tags from both branches so every feature's files are loaded. Then commit with the message "Merge category breakdown feature"

What did Claude do?

Claude opened index.html, found the conflict markers where Git got stuck, and edited the file to keep the <script> and <link> tags from both branches. Before the fix, index.html only loaded the transaction files. Now it loads the category breakdown files too. Claude then staged the fix and committed it, which tells Git the conflict is resolved.

Exit Claude Code with /exit or Ctrl+C twice.
Refresh index.html in your browser. You should now see the category breakdown section alongside the transaction form. If you added test transactions earlier, the category bars should already show your spending data.

Merge the Third Branch

One more to go. Merge the monthly summary feature.

Run this command:

git merge worktree-monthly-summary

You will likely see another merge conflict in index.html for the same reason. Use Claude Code to resolve it again.

Start Claude Code:

claude

Ask Claude to resolve:

There is a merge conflict in index.html. Resolve it by keeping all the script and link tags from all branches. Then commit with the message "Merge monthly summary feature"

Exit Claude Code with /exit or Ctrl+C twice.
Refresh index.html in your browser one more time. All three sections should now be visible: the transaction form, the category breakdown, and the monthly summary.

All three features are now merged into main. Because each feature lived in its own dedicated files, the only conflicts were the small overlaps in index.html where each branch added its tags. This is the real-world benefit of modular code combined with worktrees.

Test the Complete Budget Tracker

Now that all features are merged, open the complete app in your browser to see everything working together.

🍎 macOS

Run this command to open the app.

open index.html

🖼️ Windows

Run this command to open the app.

explorer.exe index.html

Add a few transactions to test the form.
Check that the category breakdown updates as you add transactions.
Check that the monthly summary displays totals correctly.

All three features that you built in parallel are now working together in one app.

Why is this approach powerful?

You just built three features simultaneously using worktrees and Claude Code, then merged them together. Each feature lived in its own files (transactions.js, categories.js, summary.js), so the merge was mostly automatic. In a traditional workflow, you would build one feature, merge it, then start the next. With worktrees and modular code, all three were in progress at the same time.

Your budget tracker is complete with all three features merged and working.

What about those worktree directories?

Claude Code automatically cleans up worktrees when they have no uncommitted changes. If you ever need to check manually, run git worktree list to see active worktrees and git worktree remove <path> to remove any you no longer need.

Secret mission

You have been launching worktree sessions manually from separate terminals. But what if Claude Code could do this automatically?

In this secret mission, you will create a custom subagent with built-in worktree isolation. Instead of opening extra terminals, Claude will spin up isolated worktrees on its own whenever you ask it to build a new feature.

In this secret mission, get ready to:

Create a custom subagent configuration file.
Use the subagent to build a "Budget Goals" feature.
Merge the subagent's feature branch into main.

Create a Subagent with Worktree Isolation

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 costs.

Resources you used:

Local budget-tracker directory with Git repository.
localStorage data in your browser from the budget tracker app.

✔️ Keep everything running

No action needed. Choose this if you're still actively building or want to keep testing right away.

Your project files are stored locally with no ongoing costs. The Git repository and all your code are safe on your machine.

✋ Pause - I'll come back to this later

Shut down running processes to free up memory, but keep all your files and data so you can pick up where you left off.

There are no running processes to stop for this project. Your files and Git history will remain in the budget-tracker directory whenever you're ready to return.

ⓧ Delete - I don't want to use this again

Remove all project resources and start fresh if you ever want to rebuild.

Open your terminal.
Delete the project directory:

rm -rf ~/Desktop/budget-tracker

To clear the budget tracker's localStorage data in your browser:

Open your browser and navigate to the URL you used to view the app.
Open Developer Tools with Cmd+Option+I (macOS) or Ctrl+Shift+I (Windows).
Go to the Application tab.
Select Local Storage in the left sidebar.
Right-click the relevant entry and select Clear.

Well Done!

Nice work! 🚀 You've just built a fully functional budget tracker app while mastering Git worktrees and parallel Claude Code sessions.

You've learned how to:

🔧 Set up a Git repository and use essential concepts like commits, branches, and merging.
🚀 Launch your first Claude Code worktree session with claude -w.
⚡ Run multiple Claude Code sessions in parallel, each in its own isolated worktree, building features simultaneously.
🔀 Merge multiple branches together into a single working app with transaction logging, category breakdowns, and monthly summaries.
🧹 Understand how Claude Code handles worktree cleanup automatically.
💎 Create a custom subagent with isolation: worktree for automatic parallel agent dispatch.

Ready to quiz yourself? 💪

p.s. Does it say "Still tasks to complete!" at the bottom of the screen?

This means you still have screenshots left to upload, or questions left to answer!

Press Ctrl+F (Windows) or Command+F (Mac) on your keyboard.
Search for the text Return to later.
Jump straight to your incomplete tasks!
🙋‍♀️ Still stuck? Ask the community!