🚀 Full-Stack Developer Roadmap
Build a complete web application from an empty folder to a deployed product. You'll own every layer — the UI in React, the backend in Next.js, the database in Supabase, and AI features with OpenAI — through one project that grows with you.
Adjust pace, depth, and focus based on your experience.
Personalized setup
Choose your experience level and goals before beginning.
Module 1
HTML & CSS: Structure and Style That Scale
Module 2
JavaScript: The Language Behind Everything
Module 3
TypeScript: Make JavaScript Trustworthy
Module 4
React: Build UIs That Compose
Module 5
Next.js App Router: React for Production
Module 6
Node.js: Understand Your Server Runtime
Module 7
Next.js API Routes & Server Actions: Your Backend Layer
Module 8
Supabase: Database, Auth & Storage in One Platform
Module 9
AI Features with OpenAI: Make Vault Intelligent
Module 10
REST API Design: Polish the Interface
Personalized setup
Choose your experience level and goals before beginning.
Module 1
HTML & CSS: Structure and Style That Scale
Module 2
JavaScript: The Language Behind Everything
Module 3
TypeScript: Make JavaScript Trustworthy
Module 4
React: Build UIs That Compose
Module 5
Next.js App Router: React for Production
Module 6
Node.js: Understand Your Server Runtime
Module 7
Next.js API Routes & Server Actions: Your Backend Layer
Module 8
Supabase: Database, Auth & Storage in One Platform
Module 9
AI Features with OpenAI: Make Vault Intelligent
Module 10
REST API Design: Polish the Interface
Capstone Project
What you'll build by the end
You'll build Vault — an AI-powered personal knowledge base. Users sign up, save bookmarks and notes, organize them into collections, and upload files. AI auto-generates summaries and tags for saved content, and a semantic search lets you find anything by meaning. The app has a polished Tailwind UI with dark mode, real-time updates across tabs, protected routes, a clean REST API, and streaming AI responses. Each module adds a real layer to the same product — by the end, you'll have a deployed full-stack app that demonstrates everything in this roadmap.
Full Curriculum
10 modules · 42 topics · 10-14 weeks
Module 1
HTML & CSS: Structure and Style That Scale
Before React, before Tailwind — understand the platform. Modern HTML and CSS can do far more than most developers realize, and getting the fundamentals right makes everything that follows easier.
- 1Semantic HTML: Structure That Machines and Humans Understand
- 2CSS Grid & Flexbox: The Two Layout Systems You Actually Need
- 3Custom Properties & Responsive Design: Build a System, Not a Page
Project: Build the Vault marketing site: a responsive landing page with a hero, feature grid (CSS Grid), pricing cards (Flexbox), and a footer. Use semantic HTML, CSS custom properties for a consistent color system, and make it score 95+ on Lighthouse accessibility. No frameworks, no libraries.
Module 2
JavaScript: The Language Behind Everything
React, Next.js, Node.js — they're all JavaScript. Developers who struggle with frameworks almost always have JS gaps. This module fills them with the exact patterns you'll use in component code and API handlers.
- 1Destructuring, Spread & Template Literals: The Syntax You'll Write Daily
- 2Promises & Async/Await: Fetch Data Without Losing Your Mind
- 3Array Methods: map, filter, reduce — How React Renders Lists
- 4Closures, Scope & the Event Loop: Why Your Code Runs When It Runs
- 5ES Modules: Import/Export & How Modern JS Projects Are Organized
Project: Build an interactive bookmark manager in vanilla JS: fetch data from a mock API, render a filterable/sortable list to the DOM, add debounced search, handle loading and error states, and persist data to localStorage. This becomes the prototype for Vault.
Module 3
TypeScript: Make JavaScript Trustworthy
TypeScript catches bugs at write-time instead of runtime. Learn to describe the shape of your data, type your functions, and let the editor tell you when something's wrong — before your users find out.
- 1Type Annotations, Interfaces & Type Aliases: Describe Your Data
- 2Union Types, Narrowing & Discriminated Unions: Model Real States
- 3Generics: Write Reusable Code That Stays Type-Safe
- 4Typing React & Node.js: Props, Events, Request/Response
Project: Convert the bookmark manager to TypeScript: define interfaces for Bookmark, Collection, and User, type every function, use discriminated unions for bookmark status (unread | read | archived), configure strict mode, and watch the compiler catch three bugs that vanilla JS missed.
Module 4
React: Build UIs That Compose
React's core idea is simple: UI = f(state). Learn to decompose interfaces into components, manage state at the right level, and extract reusable hooks — the patterns that separate clean React code from spaghetti.
- 1JSX, Components & Props: Turn Data Into UI
- 2State & Effects: useState, useEffect & the Rules of Hooks
- 3Forms, Validation & Controlled Components in React
- 4Custom Hooks: Extract Logic Components Shouldn't Own
- 5Context & useReducer: Share State Without Prop Drilling
Project: Rebuild Vault's bookmark manager as a React app: a sidebar with collections, a main panel with a bookmark grid, a detail drawer, an add-bookmark modal with URL validation, and a command palette (Cmd+K). Use useState, useReducer for grid state, context for the active collection, and a custom useDebounce hook.
Module 5
Next.js App Router: React for Production
Next.js gives React the pieces it's missing — routing, server rendering, data loading, and performance optimization. Learn the App Router model and the rendering strategies that make full-stack React actually work.
- 1App Router: Layouts, Pages, Route Groups & Parallel Routes
- 2Server Components vs Client Components: The Mental Model
- 3Data Fetching: When to Use Server Components, fetch & Revalidation
- 4Loading States, Error Boundaries & Suspense Streaming
Project: Migrate Vault to Next.js: create route groups for the marketing site (/) and the app shell (/app), use server components for the bookmark list, add loading.tsx skeletons, implement /app/collections/[id] with parallel routes for collection detail + bookmark grid, and set up proper metadata for SEO.
Module 6
Node.js: Understand Your Server Runtime
Your Next.js API routes and server actions run on Node.js. Understanding the runtime — the event loop, streams, environment config — makes you a better full-stack developer, not just a framework user.
- 1The Event Loop: How Node.js Handles Concurrency Without Threads
- 2Streams, Buffers & File I/O: Process Data Without Loading It All
- 3Environment Variables, dotenv & Configuration Patterns
Project: Build a Node.js script that scrapes a URL's metadata (title, description, og:image) for Vault's "add bookmark" feature. Handle redirects, timeouts, and malformed HTML gracefully. Use environment variables for config and streams for efficient HTML parsing.
Module 7
Next.js API Routes & Server Actions: Your Backend Layer
Build your backend inside Next.js. API routes handle external requests; server actions handle form submissions and mutations. Together, they give you a complete backend without a separate server.
- 1API Routes: Request Handling, Validation & JSON Responses
- 2Server Actions: Mutations, Form Handling & Revalidation
- 3Middleware: Auth Checks, Redirects & Request Transformation
- 4Input Validation with Zod: Never Trust the Client
Project: Build Vault's backend: API routes for bookmark CRUD (POST /api/bookmarks, GET /api/bookmarks?collection=x&sort=-created), a server action for the "add bookmark" form that fetches metadata and saves to the database, input validation with Zod, and middleware that rejects unauthenticated requests with proper error responses.
Module 8
Supabase: Database, Auth & Storage in One Platform
Wire Vault to a real backend. Supabase gives you PostgreSQL, authentication, and file storage with a JavaScript client — no separate backend infrastructure needed.
- 1Schema Design in Supabase: Tables, Relations & Row-Level Security
- 2The Supabase Client in Next.js: SSR, Middleware & Cookie Auth
- 3Authentication: Email, OAuth, Sessions & Protected Routes
- 4Real-Time Subscriptions: Live Data Without Polling
- 5Storage: File Uploads, Signed URLs & Access Policies
Project: Connect Vault to Supabase: design the schema (users, bookmarks, collections, tags), add Row-Level Security so users only see their own data, implement email + Google OAuth login with session handling in Next.js middleware, add real-time subscriptions so bookmarks sync across tabs, and build a file upload endpoint for PDF/image attachments stored in Supabase Storage with signed download URLs.
Module 9
AI Features with OpenAI: Make Vault Intelligent
Add AI that users actually want. Learn to call OpenAI from your server, stream responses to the frontend, and build features that feel magical — while handling the real-world concerns of cost, latency, and failure.
- 1OpenAI from the Server: Chat Completions, System Prompts & Models
- 2Streaming to the Frontend: Server-Sent Events via API Routes
- 3Embeddings & Semantic Search: Find Content by Meaning
- 4Basic RAG: Answer Questions Using Your Own Data as Context
- 5Production AI: Cost Tracking, Retries, Timeouts & Fallbacks
Project: Build three AI features: (1) auto-summarize — when a bookmark is saved, generate a 2-sentence summary and suggest tags via a background server action, (2) smart search — use embeddings to let users search bookmarks by meaning ("articles about system design"), (3) ask your vault — a chat interface that answers questions using your saved bookmarks as context (basic RAG). All features stream responses and handle rate limits gracefully.
Module 10
REST API Design: Polish the Interface
A great API isn't just functional — it's predictable, consistent, and self-documenting. Refactor Vault's API to follow the conventions that make other developers (and your future self) productive.
- 1URL Design & HTTP Methods: The Conventions Everyone Expects
- 2Pagination & Filtering: Cursor-Based, Query Params & Link Headers
- 3Error Responses: Status Codes, RFC 7807 & Consistent Error Shapes
- 4Security Headers, Rate Limiting, CORS & CSRF Protection
Project: Refactor Vault's API endpoints: implement cursor-based pagination on GET /api/bookmarks, add filtering (?collection=x&tag=y&q=search), return RFC 7807 error responses, add rate limiting per user, set proper CORS/CSP headers, and generate an OpenAPI spec that documents every endpoint with request/response examples.
Ready to start?
Sign up and AI will personalize this roadmap for your experience level.
Create my learning plan