Skip to main content

Summary

You made it. Here's a recap of everything you set up, what each piece does, and what you'll need to remember going forward.

What you built

You built a real project from scratch — described in plain English, written by Claude Code, stored on GitHub, and deployed to the internet on Cloudflare Pages. Whether you followed Path A (a personal profile site) or Path B (a full web app with login and a database), you now have a working, live project that you can continue building on.

Your accounts

Here's every account you created during this tutorial, what it's for, and when you'll use it again.

AccountWhat it doesWhen you'll use it again
GitHub (github.com)Stores your project code online. Every time you push code, GitHub saves it and Cloudflare picks it up for deployment.Every time you push code. You'll also come back here if you want to create new projects, view your commit history, or share your repo with someone.
Anthropic / Claude (claude.ai)Your AI assistant account. Powers Claude Code, which writes and edits your code.Every time you open Claude Code. Your subscription needs to stay active to keep using Claude Code.
Cloudflare (dash.cloudflare.com)Hosts your site on the internet for free. Automatically redeploys when you push to GitHub.Rarely — once your site is deployed, Cloudflare handles updates automatically. You'd only come back to add a custom domain, check build logs if a deploy fails, or manage DNS settings.
Supabase (supabase.com) (Path B only)Your database and authentication provider. Stores your app's data and handles user login.When you need to check your database, view users, debug auth issues, or add new login providers. The Supabase dashboard is also where you can browse your data directly.
Keep your login credentials safe

You created passwords and credentials for these services. Make sure you have them saved somewhere reliable — a password manager is ideal. The most important one to not lose is your Supabase database password (Path B), since you'll need it if you re-link the Supabase CLI.

Your tools

These are the tools installed on your computer. You don't need to reinstall them — they're ready to use for this project and any future projects.

ToolWhat it doesWhen you'll use it again
GitTracks changes to your code and syncs them with GitHub. Every commit is a saved snapshot you can go back to.Every time you commit or push code. Git runs in the background — you mostly interact with it through Claude Code or short terminal commands like git push.
Node.js & npmNode.js runs your project locally. npm installs the packages (libraries) your project depends on.Every time you run npm run dev to start your local development server, or when Claude Code installs a new package.
Claude CodeThe AI coding assistant that runs in your terminal. Reads your files, writes code, runs commands, and iterates with you.Every time you want to work on your project. Open your terminal, navigate to your project folder, and type claude to start a session.
Supabase CLI (Path B only)Lets Claude Code run database migrations directly from the terminal instead of you pasting SQL into the dashboard.Whenever you need to change your database schema — adding tables, columns, or security policies. Claude Code handles this for you.

Your key files

A few files in your project are especially important to know about.

FileWhat it doesWhen to touch it
CLAUDE.mdThe briefing document for Claude Code. It reads this at the start of every session to understand your project, tech stack, and rules.Update it whenever you establish a new pattern, add a major library, or want Claude to follow a new convention. It's a living document.
package.jsonLists your project's dependencies and scripts. npm run dev and npm run build are defined here.You rarely edit this directly — Claude Code and npm manage it. But it's good to know it exists.
.env (Path B only)Stores your Supabase connection details (Project URL and Publishable key). This file stays on your computer and is not pushed to GitHub.If you need to update your Supabase credentials, or if you clone your project on a new computer and need to recreate it.
.gitignoreTells Git which files to ignore (not push to GitHub). Your .env file and node_modules/ folder are listed here.If you add new files that should stay local (like secrets or large files), add them here.

Your workflow going forward

Now that everything is set up, here's what your day-to-day workflow looks like when you want to work on your project:

  1. Open your terminal and navigate to your project:

    cd ~/repos/your-repo-name
  2. Start Claude Code:

    claude
  3. Describe what you want in plain English. Claude reads your CLAUDE.md, understands your project, and writes the code.

  4. Test locally — open a second terminal and run npm run dev to see your changes at http://localhost:5173.

  5. Commit and push when you're happy with the changes:

    git add .
    git commit -m "Describe what you changed"
    git push
  6. Cloudflare auto-deploys — within a minute or two, your live site is updated. No extra steps needed.

That's the whole loop. Describe, review, test, commit, push. Your site updates automatically.

Where to go from here

Keep building. The vibe coding loop works for any feature you can describe. The more you use it, the better you'll get at writing prompts that give Claude exactly the right context.

Update CLAUDE.md as you go. Every time you settle on a pattern — a color scheme, a folder structure, a naming convention — add it to CLAUDE.md so Claude stays consistent.

Try the other path. If you did Path A and want to build something more ambitious, go back and try Path B. The prerequisites are already done — you can jump straight to Configure Supabase. If you did Path B and want a simple portfolio site, Path A takes under an hour.

Share your work. You have a real URL. Put it on your resume, share it on LinkedIn, send it to a friend. You built something real — that's worth showing off.