Build. Don't Copy.

Six projects. Zero copy-paste. FAANG-level finish.

A project ladder that starts at a portfolio site and ends at a system you could defend in a FAANG system-design round. We give you the milestones, the structure, and hints when you're stuck — never the code. Every line you ship is yours.

All six project briefs are free. Sign in to unlock the step-by-step hints and track your milestones — progress syncs to your account.

View Roadmap

Also free: the 90-day DSA Roadmap

Projects

Milestones

Code given

Personal progress

0 of 58 done

No code handed out — you write every line.

Step-by-step milestones with hints when you're stuck.

The capstone is scoped like a real FAANG system-design round.

Stage 1 / 6Week 1

Project 1 · Developer Portfolio

A fast, responsive personal site built with plain HTML, CSS, and JavaScript — no frameworks yet. This is where you earn layout, spacing, and deployment fundamentals.

Read the full build guide

0/8 complete

What it proves: you can ship something real to a URL, and you understand the web platform before hiding it behind a framework.

Step 1MilestoneFoundation

Define the scope and sketch a wireframe

Planning

Step 2MilestoneFoundation

Build the semantic HTML skeleton

HTML

Step 3MilestoneFoundation

Make the layout responsive with flexbox and grid

CSSResponsive

Step 4MilestoneFoundation

Build the projects grid with reusable cards

CSSComponents

Step 5MilestoneFoundation

Add a dark mode toggle that remembers the choice

CSSJavaScript

Step 6MilestoneFoundation

Wire a contact form with client-side validation

FormsJavaScript

Step 7MilestoneFoundation

Hit 95+ on every Lighthouse category

PerformanceA11y

Step 8MilestoneFoundation

Deploy to a real URL

DeployGit

Stage 2 / 6Week 2

Project 2 · DevBoard — Kanban Task Manager

A drag-and-drop kanban board with filters, undo, and persistence — pure client-side state management. Do it in vanilla JS or React; the milestones are the same.

Read the full build guide

0/9 complete

What it proves: you can model state, keep the DOM in sync with it, and handle the interaction details (drag, undo, keyboard) that separate demos from products.

Step 1MilestoneCore

Design the data model before any UI

StateModeling

Step 2MilestoneCore

Render the whole board from state

StateRendering

Step 3MilestoneCore

Create, edit, and delete tasks

CRUD

Step 4MilestoneCore

Drag and drop tasks between columns

Drag & DropEvents

Step 5MilestoneCore

Add filters and instant search

StateSearch

Step 6MilestoneCore

Persist everything to localStorage

Persistence

Step 7MilestoneCore

Implement undo for the last 10 actions

StateUX

Step 8MilestoneCore

Make it keyboard-accessible

A11y

Step 9MilestoneCore

Polish: empty states, transitions, favicon

PolishUX

Stage 3 / 6Weeks 3-4

Project 3 · Inkwell — Full-Stack Blog Platform

Your first real backend: a multi-user publishing platform with auth, a database, markdown editing, and image uploads. Suggested stack: Next.js + Postgres (or Firebase), but any full-stack combo works.

Read the full build guide

0/10 complete

What it proves: you can design a schema, protect routes, validate input on the server, and ship a database-backed app — the baseline for every junior full-stack role.

Step 1MilestoneIntermediate

Choose the stack and scaffold the project

Architecture

Step 2MilestoneIntermediate

Implement authentication with OAuth

Auth

Step 3MilestoneIntermediate

Design the schema: users, posts, tags

DatabaseModeling

Step 4MilestoneIntermediate

Build the post CRUD API with server-side validation

APIValidation

Step 5MilestoneIntermediate

Add a markdown editor with live preview

EditorSecurity

Step 6MilestoneIntermediate

Support image uploads for covers and inline images

StorageAPI

Step 7MilestoneIntermediate

Add pagination and full-text search

DatabaseSearch

Step 8MilestoneIntermediate

Draft/publish workflow and protected routes

AuthAPI

Step 9MilestoneIntermediate

SEO: metadata, OG images, sitemap

SEO

Step 10MilestoneIntermediate

Deploy with separate dev and prod environments

DeployDevOps

Stage 4 / 6Weeks 5-6

Project 4 · Huddle — Real-Time Chat & Collaboration

Channels, presence, typing indicators, optimistic sends, and reconnection — the real-time engineering layer most tutorials skip. Suggested: WebSockets (socket.io or native ws) with any backend.

Read the full build guide

0/9 complete

What it proves: you can reason about events, ordering, and failure — the exact instincts interviewers probe when they ask 'what happens if the network drops?'

Step 1MilestoneAdvanced

Design the event protocol before writing handlers

ProtocolDesign

Step 2MilestoneAdvanced

Implement channels and live presence

WebSocketsPresence

Step 3MilestoneAdvanced

Persist messages and load history on join

DatabaseWebSockets

Step 4MilestoneAdvanced

Typing indicators and read receipts

UXWebSockets

Step 5MilestoneAdvanced

Optimistic sends with reconciliation

StateUX

Step 6MilestoneAdvanced

Handle reconnection and offline queueing

ResilienceWebSockets

Step 7MilestoneAdvanced

Rate limiting and abuse protection

Security

Step 8MilestoneAdvanced

Load test the socket layer

PerformanceTesting

Step 9MilestoneAdvanced

Deploy somewhere WebSockets actually work

DeployArchitecture

Stage 5 / 6Weeks 7-8

Project 5 · Lilypad Market — Storefront with Payments

A real e-commerce flow: catalog, cart, Stripe checkout, webhook-driven orders, and an admin dashboard. Money makes every bug matter.

Read the full build guide

0/10 complete

What it proves: you can build transactional systems where consistency matters — payments, inventory, and order state are the same problems FAANG asks about at scale.

Step 1MilestoneAdvanced

Model the catalog: products, variants, inventory

DatabaseModeling

Step 2MilestoneAdvanced

Product listing with faceted filters

SearchUX

Step 3MilestoneAdvanced

Product page with variant selection

UXState

Step 4MilestoneAdvanced

Server-synced cart

StateAPI

Step 5MilestoneAdvanced

Stripe Checkout in test mode

Payments

Step 6MilestoneAdvanced

Webhook-driven order lifecycle

PaymentsConsistency

Step 7MilestoneAdvanced

Transactional emails

Step 8MilestoneAdvanced

Admin dashboard: orders and inventory

AuthAdmin

Step 9MilestoneAdvanced

Instant search with debouncing

SearchPerformance

Step 10MilestoneAdvanced

Error monitoring and analytics

Observability

Stage 6 / 6Weeks 9-12

Project 6 · Ripple — The FAANG-Level Capstone

A scalable social platform: media uploads with background processing, a feed that survives fan-out math, Redis caching, queues, rate limiting, and observability. This is a system-design interview answer that actually runs.

Read the full build guide

0/12 complete

What it proves: everything. You designed for scale, made explicit tradeoffs, measured the result under load, and can defend every decision in writing. This is the project that carries your resume.

Step 1MilestonePortfolio

Write the system design doc first

System Design

Step 2MilestonePortfolio

Set up the monorepo with CI

DevOpsArchitecture

Step 3MilestonePortfolio

Auth, profiles, and the follow graph

AuthDatabase

Step 4MilestonePortfolio

Media upload pipeline with background processing

QueuesStorage

Step 5MilestonePortfolio

Build the feed with an explicit fan-out strategy

System DesignFeed

Step 6MilestonePortfolio

Add Redis caching with deliberate invalidation

CachingRedis

Step 7MilestonePortfolio

Queue-driven notifications

QueuesWorkers

Step 8MilestonePortfolio

Rate limiting and idempotency keys

APIResilience

Step 9MilestonePortfolio

Search across users and posts

Step 10MilestonePortfolio

Observability: structured logs, metrics, tracing

Observability

Step 11MilestonePortfolio

Load test and write the scaling report

PerformanceTesting

Step 12MilestonePortfolio

Ship it: demo video + architecture case study

CareerStorytelling