ShieraSign in
The Roadmap

Twelve months,
forty-eight weeks.

Every week has a resource drop, a mid-week code-along, hands-on activities, and a single shippable deliverable. Click any week to jump straight to the lesson notes.

M1
Month 1Markup, layout, and the muscle memory every UI needs.

HTML, CSS & Web Foundations

Get rock-solid at HTML and CSS before touching any framework. By the end of the month you can sketch any layout, make it responsive, and deploy it.

HTML5CSSFlexboxGridTailwindGit
W1HTML5 + Semantic Structure + Git BasicsThree semantic HTML pages on GitHub + first PR opened and merged.W2CSS Fundamentals — Cascade, Selectors, Box ModelHand-styled portfolio with consistent typography and spacing scale.W3Flexbox, Grid & Responsive DesignFully responsive portfolio deployed to GitHub Pages or Vercel.W4Modern CSS + Tailwind IntroductionPortfolio rewritten in Tailwind with working dark-mode toggle.
M2
Month 2One language, no framework — learn JS properly.

JavaScript Deep Dive

Learn JavaScript the language before adding any library. From variables to async/await, every concept practiced in a small, shippable project.

JavaScriptES6+DOMFetchlocalStorage
W1JS Syntax, Variables, Operators & Control FlowA small interactive JS page committed to GitHub.W2Functions, Scope, Closures & Array MethodsAn array-driven UI rendered from a hardcoded dataset.W3DOM Manipulation, Events, Forms & localStorageA persistent client-side app shipped publicly.W4Async JS — Promises, async/await, Fetch & ES ModulesA real API-driven app shipped to production.
M3
Month 3Add types, master Git workflows, set up real tooling.

TypeScript + Git Mastery + Tooling

Layer TypeScript on top of the JavaScript you already know. Get fluent with branches, PRs, conflicts. Set up the dev tooling every modern project uses.

TypeScriptGitViteESLintPrettierpnpm
W1TypeScript Basics — Types, Interfaces & InferenceA previous vanilla-JS project ported to strict TypeScript.W2TypeScript Advanced — Unions, Narrowing, Generics, Utility TypesA reusable typed utility library committed to GitHub.W3Git Mastery — Branches, PRs, Conflicts & RebaseTwo merged PRs with at least one conflict you resolved yourself.W4JavaScript Tooling — pnpm, Vite, ESLint, PrettierA reusable starter template you'll use for the rest of the program.
M4
Month 4Pure React with Vite — no Next.js yet.

React Fundamentals

Learn React as a client-side library first. Components, props, state, effects, context, custom hooks. By the end of the month you've built a real SPA with no framework helping you.

React 19ViteJSXHooksContext
W1React Fundamentals — JSX, Components & PropsA reusable component library bootstrapped with Vite.W2useState, Events, Controlled Forms, Lists & KeysA stateful interactive React app.W3useEffect, Data Fetching & Lifting State UpA React app that fetches and renders real API data.W4Context API & Custom HooksA polished React SPA with global state and custom hooks.
M5
Month 5Real-world React patterns, still no Next.js.

Advanced React — Routing, Forms & Server State

Learn the libraries every React job expects: React Router, React Hook Form + Zod, TanStack Query. Ship a multi-page React app that feels production-grade.

React RouterReact Hook FormZodTanStack QuerySuspense
W1React Router — Routes, Params & NavigationA multi-page React app with proper URL-based navigation.W2Forms — React Hook Form + Zod ValidationA validated, accessible signup + checkout flow.W3TanStack Query — Fetching, Caching & MutationsA product catalog with cached fetching and optimistic mutations.W4Suspense, Lazy Loading, Error Boundaries & AccessibilityA polished React app that passes a basic a11y audit.
M6
Month 6Now you build the server you've been calling.

Node.js + Express + REST APIs

Understand what a server actually is. Write Node, build REST APIs with Express, and at end of month wire your own React frontend to your own Express backend.

Node.jsExpressRESTZodCORS
W1Node.js Fundamentals — Modules, fs, npm & EnvironmentA Node CLI tool committed to GitHub.W2HTTP Fundamentals + Express — Routes & MiddlewareAn Express server with custom logger middleware.W3REST API Design — CRUD, Status Codes & ValidationA documented REST API tested with HTTPie or Postman.W4Connect React Frontend to Express BackendA deployed fullstack app — your React UI calling your Express API.
M7
Month 7Real data, real auth, and the resume that gets interviews.

Databases, Auth & Career Module v1

Move off in-memory storage to a real database. Add authentication. Then turn the work so far into a resume, LinkedIn, and portfolio you can send to recruiters.

PostgreSQLSQLPrismaJWTbcryptResume
W1SQL Fundamentals with PostgreSQLA seeded Postgres DB and 10 hand-written queries.W2Prisma ORM — Schema, Migrations & RelationsM6W4 backend migrated from in-memory to Postgres via Prisma.W3JWT Authentication & Password HashingA fullstack app with real auth — signup, login, protected pages.W4Career Module — Resume, Portfolio & LinkedInA reviewable resume + a polished portfolio + an optimized LinkedIn.
M8
Month 8Now Next.js makes sense — you know React AND servers.

Next.js Frontend — App Router

Learn Next.js as the fusion of two things you already understand: React on the client and a Node server on the backend. App Router, Server vs Client Components, SEO, deploy.

Next.js 15App RouterServer ComponentsMetadataVercel
W1Next.js App Router — Routing & LayoutsA multi-page Next.js marketing site with shared layouts.W2Server Components vs Client ComponentsA previous React project ported to Next.js with the right Server/Client split.W3Data Fetching, Dynamic Routes & SEOA SEO-optimized content site with dynamic routes.W4Deploying Next.js to Vercel — Full WalkthroughA complete Next.js project live on a custom domain.
M9
Month 9One framework, both halves — the real Next.js promise.

Next.js Fullstack — Server Actions, Caching, Auth

Use Next.js as your fullstack stack: Server Actions for mutations, advanced caching, Prisma + Auth.js. Ship a real fullstack app you'd put on your resume.

Server ActionsCachingPrismaAuth.jsRoute Handlers
W1Server Actions & Route HandlersA real Next.js app where forms work with JS disabled.W2Caching & RevalidationA dashboard with measurable cache hits and instant invalidation.W3Prisma in Next.js + Auth.js (NextAuth)A Next.js + Prisma + Auth.js app with login.W4Complete Next.js Fullstack AppA polished fullstack Next.js app deployed and on your resume.
M10
Month 10Make your app provably correct — and start daily DSA reps.

Testing, DevOps + DSA Light

Add the engineering discipline that separates 'works on my machine' from 'safe to deploy on a Friday'. Unit, E2E, Docker, CI — plus a steady DSA habit for interview season.

VitestTesting LibraryPlaywrightDockerGitHub Actions
W1Unit Testing with Vitest + React Testing LibraryA test suite running on every push with green coverage badges.W2End-to-End Testing with PlaywrightE2E suite covering the golden path of your fullstack app.W3Docker + GitHub Actions CI/CDA Dockerized app shipped by a green CI pipeline.W4DSA — Arrays, Strings, Hash Maps & Two Pointers10 LeetCode easies solved with written explanations.
M11
Month 11Wire LLMs into real apps; squeeze every ms; level up DSA.

AI Integration + Performance + DSA Medium

Treat AI like any other dependency: typed, cached, server-only, monitored. Tighten Web Vitals. Move from DSA easies to mediums in the interview-prep window.

Anthropic SDKVercel AI SDKPPRStreamingDSA: trees
W1AI APIs — Anthropic / OpenAI SDKA server-side AI endpoint with rate limits and cost tracking.W2Vercel AI SDK — Streaming, Tool Use & Structured OutputsA streaming AI chat UI with tools and citations.W3Next.js Performance — PPR, Streaming & Web VitalsMeasurable Lighthouse improvement on your headline project.W4DSA — Trees, BFS/DFS & Recursion8 LeetCode mediums solved with recorded walkthroughs.
M12
Month 12Ship the headline project. Land the interview. Graduate.

Capstone, Interview Prep & Demo Day

Take everything from M1–M11 and channel it into a polished capstone, a sharpened interview game, and a real Demo Day presentation.

System DesignSTAR StoriesMock InterviewsDemo Day
W1Capstone Scoping & System DesignApproved capstone spec + system design doc + ER diagram.W2Capstone Build + Behavioral STAR PrepCapstone MVP deployed + 6 polished STAR stories.W3Mock Interviews & Capstone Polish3 recorded mock interviews + capstone feature-complete.W4Demo Day & 30-Day Post-Grad PlanDemo Day complete + certificate + a written 30-day post-graduation plan.