Choose Your Path
Before jumping into setup, take a minute to understand the two tracks this guide offers. Both use the same core tools — the difference is scope and complexity.
Path A: Personal Profile Site
A personal profile site is a single-page (or few-page) website that represents you. Think of it as a modern business card — your name, what you do, links to your work, maybe a photo and a short bio.
What you'll build
| Feature | What it does |
|---|---|
| Hero section | Your name, title, and a short tagline |
| About section | A paragraph or two about yourself |
| Links / projects | Links to your LinkedIn, GitHub, portfolio, or anything else you want to showcase |
| Contact info | How people can reach you |
| Responsive design | Looks good on phones, tablets, and desktops |
Tech stack
| Technology | Role |
|---|---|
| React + Vite | The frontend framework — what the user sees in the browser |
| Tailwind CSS | Styling — makes the site look good without writing custom CSS from scratch |
| Claude Code | The AI assistant that writes the code based on your instructions |
No database. No login. No backend. Just a clean, fast website you can deploy for free.
Who this is for
- You want to get something live fast (under an hour)
- You don't have a specific app idea — you just want to learn the workflow
- You want a personal landing page you can put on your resume or LinkedIn
Path B: Full Web App with Login & Database
This path is for people who want to build a real application — something with user accounts, private data, and interactive features. You'll set up authentication, a database, and protected pages, then build out whatever app idea you have.
What you'll build
The guide walks you through the foundation — authentication, database setup, and protected routes. From there, you decide what the app actually does. Some examples:
- A personal CRM to track your professional network
- A reading list tracker with notes and ratings
- A habit tracker or journal
- An inventory or collection manager
- Anything that involves users storing and managing private data
Core features (shared across all app ideas)
| Feature | What it does |
|---|---|
| GitHub login | Sign in securely with your GitHub account — no passwords to manage |
| Protected pages | Pages that only logged-in users can access |
| Database tables | Store and retrieve your app's data in Supabase (PostgreSQL) |
| Row Level Security | Database-level rules that ensure users can only see their own data |
| CRUD operations | Create, read, update, and delete records through the UI |
Tech stack
| Technology | Role |
|---|---|
| React + Vite | The frontend — what the user sees and interacts with in the browser |
| React Router | Handles page navigation without full page reloads |
| Tailwind CSS | Styling — makes the app look good without writing custom CSS from scratch |
| Supabase | The backend — database, authentication, and Row Level Security |
| Supabase CLI | Lets Claude Code run database migrations directly from the terminal |
| Claude Code | The AI assistant that writes the code based on your instructions |
Who this is for
- You have a specific app idea you want to bring to life
- You want to learn how authentication and databases work
- You want a framework you can keep extending after the guide ends
Which should I pick?
Not sure? Start with Path A. You can always come back and do Path B later — the prerequisites are the same, and you'll already know the workflow. Path A takes under an hour and gives you something real to show for it.
Have an idea? Go with Path B. The guide gives you the foundation (login, database, protected routes), and then you build out whatever features your app needs using the same vibe coding loop.
What's next?
Whichever path you choose, the next step is the same: head to Researching Dependencies to learn how to evaluate libraries before committing to them, then move on to Prerequisites to get your tools installed.