Ship Your TODO App — Go Live with Vercel

Share your app with the world

Over the past three articles, we've been building a TODO app together.

• Part 1: Setting up the project
• Part 2: Building the screen
• Part 3: Saving data

Right now, you have a TODO app that can add, delete, and toggle tasks — and data persists even when you close the browser. But it only runs on your computer.

Today, we're putting it on the internet. Once deployed, your app gets its own URL. Send that URL to a friend, and they can use it from their phone.

Upload your code to GitHub

To deploy, you first need to upload your code to GitHub.

If you created a GitHub account in Part 4 of the First Steps series, you're all set. If not, go create one first.

Ask Claude Code:

Here's what Claude Code will do:

1. Initialize Git (a version control system) in the project
2. Create a new repository on GitHub
3. Upload the code

You might be asked to log in to GitHub during this process. Your browser will open automatically with a login page — just follow the prompts.

Deploy with Vercel

Once the code is on GitHub, it's time to deploy with Vercel.

Vercel is a service that makes it dead simple to put web apps on the internet. If you've done the First Steps series Part 4, this is the same process.

1. Go to vercel.com and log in with your GitHub account
2. Click "Add New Project"
3. Select my-todo-app (the one you just uploaded)
4. Click "Deploy"

Then just wait. In a minute or two, the deploy will finish and you'll see a URL.

You'll get a URL like https://my-todo-app-xxxxx.vercel.app. That's your TODO app's address.

Check the live app

Click the URL and make sure everything works:

1. Try adding a TODO
2. Toggle the checkbox
3. Delete one

Works just like it did on your computer, right?

Now try it on your phone. Type the URL into your phone's browser, or send it to yourself via text or email.

Your TODOs should work on your phone too. The first time I saw my own app running on my phone, I couldn't help but take a screenshot. Seeing it work on both desktop and mobile — take a moment to enjoy that.

Share it with someone

Now that it's live, show it off.

Send the URL to a friend or family member. Tell them "I built this TODO app." They can access it from their phone or computer.

One thing to keep in mind: since we're using LocalStorage, data is stored in each person's browser separately. Your TODOs won't show up on your friend's screen. Everyone gets their own list.

If you wanted everyone to share the same TODOs, you'd need a server-side database. That's a topic for another day — what we have is plenty.

Updating your app

Once you share the URL and get feedback, you'll probably want to make changes. Just update the code with Claude Code, then push it back to GitHub:

Vercel automatically redeploys whenever code is pushed to GitHub. Update the code, and the live app updates itself. No manual steps needed.

This workflow — "update the code → upload to GitHub → auto-deploy" — is exactly what professional engineers do every day. You're already doing the same thing.

Wrap-up — Your TODO app is complete!

Across four articles, we built a TODO app from zero and put it on the internet. Let's look back:

• Part 1 — Set up Claude Code and created the project
• Part 2 — Built a screen with add, delete, and completion toggle
• Part 3 — Added LocalStorage so data persists
• Part 4 (this one) — Deployed to Vercel and got a URL

"Build the UI → handle data → deploy." That flow applies to any web app, not just TODO apps. Everything you learned in this series transfers directly to your next project.

Building a TODO app is a classic beginner exercise, but surprisingly few people actually see it through to deployment. If you made it this far, you're someone who can build and ship an app.

What will you build next? A chat bot, a media site, an automation tool — check out the other series for more ideas.