Build Roadmaps

Tribute Page

Semantic HTML structure, image embedding, timeline layout, responsive design. The absolute starting point — every web dev should build a tribute page first.

Survey Form

Form fields, validation, labels, fieldset grouping, responsive form layout. HTML forms are the foundation of every web app.

Product Landing

Hero section, feature cards, testimonials, pricing table, responsive navigation. A real-world page layout from scratch.

Doc Page

Sidebar navigation, code blocks, section anchors, media queries, table of contents. The pattern every documentation site uses.

Portfolio

Projects grid, about section, contact form, skills, mobile nav, dark mode toggle. Your own corner of the web.

Blogger Clone

Post editor, publish flow, archive, RSS feed, comments. Blogger launched in 1999 and put publishing power in everyone's hands.

Yahoo! Clone

Category directory, link lists, search box, news feed, email login mock. Yahoo started in 1994 as "Jerry's Guide to the World Wide Web" — the first web portal.

Craigslist Clone

Category listings, post detail, search/filter, simple text-first layout. Craigslist launched in 1995 and proved that a website doesn't need to be pretty to be useful.

Hotmail Clone

Inbox, compose, send, folders, search, contact list. Hotmail launched in 1996 as the first free web-based email — making email accessible to anyone with a browser.

eBay Clone

Item listings with bids, auction timer, seller profiles, search/filter, watchlist. eBay launched in 1995 as AuctionWeb and built the peer-to-peer marketplace — bidding made the web transactional.

Match.com Clone

Profile creation, browse/search, swipe/like, matching, chat/messaging. Match.com launched in 1995 and pioneered online dating — one of the first platforms to monetize human connection on the web.

Random Quote Machine

🎯 Bridge app — first JavaScript + API call

One button, one API call, one DOM update. A "New Quote" button fetches from an API and displays the quote + author below. Teaches fetch(), async/await, and DOM manipulation in their simplest form — no routing, no state management, just an event listener and a network call. The absolute starting point for interactive web apps.

News App

Article feed, category filters, search, bookmark/save, trending stories, personalized recommendations. Google News launched in 2002 and Digg in 2004 — news aggregation was the web's killer app before social media rewired how we discover stories.

Wikipedia Clone

Article render, edit view, search, categories, table of contents, history. Wikipedia launched in 2001 and built the largest knowledge repository in human history.

Google Clone

Search box, results page, ranking by relevance, pagination, search suggestions. Google launched in 1998 and organized the world's information.

IMDb Clone

Movie/TV search, detail pages with cast and crew, user ratings and reviews, genre filtering, watchlist. IMDb started in 1990 as a Usenet list and became the definitive entertainment database — searchable catalog with community ratings.

Flickr Clone

Photo upload, gallery grid, tags, comments, lightbox view. Flickr launched in 2004 and pioneered social photo sharing with tags and communities.

Forum App

Category list, topic threads, post replies, user profiles, moderation tools, search. phpBB launched in 2000 and forums became the default community platform — before social media, every niche had its forum.

Bookmark Manager

🎯 Bridge app — state persistence before social apps

Add, list, delete, and organize bookmarks stored in the browser. Teaches localStorage for data persistence, form handling with JavaScript, and the Create-Read-Delete pattern that powers every interactive app. No backend, no API — just the browser's built-in storage. Master this app before moving to social clones that layer on multi-user and real-time state.

Tumblr Clone

Dashboard, post types (text/photo/quote), reblog, follow feed, tags. Tumblr launched in 2007 and blended blogging with social curation.

X / Twitter Clone

Compose, feed, follow/unfollow, retweet, like, trending topics. The microblogging pattern that changed how the world communicates.

Reddit Clone

Subreddits, posts, voting, threaded comments, user profiles. The social news platform that defined online communities in the late 2000s.

YouTube Clone

Video grid, search, channel page, player embed, comments, recommended sidebar. How user-generated content platforms work.

Music Streaming

Browse library, search, playlist creation, player controls, album/artist pages. Spotify launched in 2008 and changed music forever — streaming is now the primary way people consume music.

Anime & Manga Tracker

Anime/manga/manhwa database, search/filter by genre, ratings and reviews, watchlist/reading list, recommendations, seasonal charts. MyAnimeList launched in 2004 and Crunchyroll in 2006 — anime fandom built the web's most passionate content communities.

Twitch Clone

Stream card grid, category browse, chat overlay, follow system. Twitch launched in 2011 and built the live-streaming economy.

GitHub Clone

Repo browser, code viewer, pull requests, issues, profile, star/follow, commit history. GitHub launched in 2008 and became the social network for developers — hosted version control with community collaboration built in.

WhatsApp Clone

Chat list, one-on-one messaging, group chats, media sharing, read receipts, status update. WhatsApp launched in 2009 and brought messaging to everyone — no SMS fees, just an internet connection.

Facebook Clone

News feed, friend system, timeline/profile, like/react, share, groups, events, notifications. Facebook launched in 2004 and defined modern social networking — the platform that connected a billion people.

Slack Clone

Channels, threads, direct messages, message reactions, user presence. Slack launched in 2013 and transformed workplace communication.

Discord Clone

Server list, channel tree, chat area, voice channel mock, member list. Discord launched in 2014 and became the home of online communities.

Weather App

City search, geolocation, 7-day forecast, unit toggle, weather icons. The quintessential API project.

Personal Finance

Transaction feed, budget categories, spending charts, savings goals, net worth tracker. Mint launched in 2006 and made personal finance visual — connecting bank accounts to show exactly where your money goes.

Pokémon Pokédex

🎯 Bridge app — from single fetch to multi-endpoint async

A searchable Pokémon directory powered by PokéAPI. Shows a list of Pokemon with sprite images, search/filter by name, and a detail view with stats, types, and evolution chain. Teaches multiple API endpoints, async rendering of lists with images, search filtering, and the list-detail navigation pattern — the foundation of every data-driven app from IMDb to GitHub. More complex than a single-quote fetch, simpler than integrating a map library.

Map App

Interactive map, search/geocode, markers with info cards, directions overlay, custom tile layer. Google Maps API launched in 2005 and made location data a standard web feature — every developer's second API project after weather.

Stock Portfolio

Stock search, price chart, portfolio tracker, P&L calculation, allocation pie chart. Every developer builds a stock app — it's the ultimate API integration project.

Kickstarter Clone

Project page, pledge tiers, funding bar, rewards, backer count. Kickstarter launched in 2009 and made crowdfunding a household concept.

Airbnb Clone

Property search with map, listing detail, booking calendar, host profiles, reviews, payment flow. Airbnb launched in 2008 and proved that a marketplace platform could turn spare rooms into a global industry.

Fantasy Football

League creation, draft system, roster management, live scoring, leaderboards, head-to-head matchups. FanDuel launched in 2009 and DraftKings in 2012 — daily fantasy turned every Sunday into a season.

Drum Machine

Sound pads, volume controls, recorder, key bindings, loop patterns. Touch-friendly audio interfaces made music creation mobile.

Dashboard

Widget grid, fetch data, filters, charts, export. The admin panel pattern that had to work on every screen size.

Fiverr Clone

Service listings, search/filter by category, seller profiles, gig ordering, reviews, messaging. Fiverr launched in 2010 and turned freelance services into a marketplace — before AI took over, this was how the gig economy worked.

Netflix Clone

Browse grid, category carousels, detail page, search, user profiles. Netflix launched in 1997 as a DVD-by-mail service and pioneered the streaming catalog UI.

Instagram Clone

Photo feed, like/heart, comments, filters, profile grid. Instagram launched in 2010 and defined mobile-first visual social media.

Tinder Clone

Swipe cards, match animation, profile detail, chat mock. Tinder launched in 2012 and invented the swipe interaction pattern used everywhere today.

TikTok Clone

Vertical scroll feed, video card, like/share, profile. TikTok launched in 2016 and reinvented mobile content consumption with full-screen vertical video.

Sports Betting

Live odds feed, bet slip, game lines (spread/moneyline/over-under), parlay builder, cash-out, live in-play betting. DraftKings and FanDuel expanded from fantasy into sports betting after the 2018 PASPA ruling — mobile betting became a billion-dollar industry overnight.

NFT Gallery

Collection grid, metadata card display, rarity ranking, trait filter, owner history. How digital ownership is displayed — OpenSea-style.

Portfolio Tracker

Multi-wallet watchlist, P&L chart, allocation pie chart, transaction history, price alerts. CoinGecko and CoinMarketCap's core dashboard.

Blockchain Explorer

Block viewer, transaction hash display, block height, mempool visualization. Bitcoin's blockchain made visible — every crypto developer starts here.

Etherscan Clone

Transaction list, address detail page, token transfers tab, gas tracker, contract verification badge. The most-used app in crypto — Etherscan.

Crypto Wallet

Key generation mock, address display, balance overview, send/receive UI. The core UX pattern that every crypto user interacts with daily.

DEX Swap

Token A → Token B swap UI, price impact, slippage tolerance, liquidity pool visualization. Uniswap pioneered the AMM — the economic engine of DeFi.

Mempool Visualizer

Live pending transactions, fee heatmap, block inclusion simulation, replace-by-fee UI. The mempool is where every Bitcoin transaction starts its journey.

Prediction Market

Market creation, buy/sell shares, probability chart, resolution system, portfolio P&L. Polymarket built crypto-native prediction markets on-chain — turning any event into a tradeable contract.

Dark Mode Toggle

CSS injection, site-specific rules, toggle persistence, per-domain settings, performance. The most-installed extension category on the web.

Tab Manager

Manifest.json, popup UI, tab querying, storage API, badge text. The foundation of every Chrome/Firefox extension ever built.

Link Saver

Right-click menu, sync storage, keyboard shortcuts, export/import, folder organization. The pattern every bookmarking tool uses.

Page Highlighter

DOM injection, CSS overrides, selection highlighting, persist state, toggle on/off. How extensions modify any page you visit.

Invoice Generator

Line item entry, tax calculation, auto-numbering, PDF preview layout, send/download mock. FreshBooks, Wave, and Xero — billing is the original SaaS use case.

Education App

Course catalog, lesson progress tracker, quiz system, completion certificates, leaderboard. Khan Academy, Duolingo, and Coursera exploded in the 2020s — remote learning made EdTech a household category.

File Manager

File grid/list toggle, upload mock, folder navigation, search, storage quota bar. Dropbox, Google Drive, and Box — every cloud storage app uses this layout.

Project Board

Columns (To Do / In Progress / Done), add cards, drag between columns, card detail modal, assignee avatars. Trello and Jira's core interaction — the kanban board.

CRM Pipeline

Contact list, kanban deal stages, add/edit contacts, drag cards, pipeline value summary. The core of every sales SaaS — Salesforce, HubSpot, Pipedrive.

Subscription Billing

Plan selection, pricing tiers, invoice generation, payment method mock, billing history table. Stripe's core product — recurring billing is how SaaS makes money.

Analytics Dashboard

Metrics cards, line/bar charts with Chart.js, date range picker, filter controls, export CSV. The dashboard pattern used by Mixpanel, Amplitude, and Google Analytics.

Zoom Clone

Video call interface, participant grid, screen share, chat, mute controls, meeting scheduler, virtual backgrounds. Zoom launched in 2011 but became a household name during COVID — video conferencing went from boardroom to kitchen table overnight.

Hugging Face Clone

Model hub browser, dataset viewer, Spaces demos, model card detail, inference API mock, community page. Hugging Face started as a chatbot in 2016 and became the GitHub of AI — hosting 1M+ models and the libraries that power modern ML.

AI Summarizer

Paste text, LLM summarization, bullet points, key terms, length control. Your first real AI-powered product feature.

AI Chatbot

Chat UI, streaming responses, conversation memory, personality config, export. The product pattern that changed software forever.

AI Code Reviewer

Paste code, AI review, suggestions, complexity score, markdown export. Practical AI that gives real value on day one.

AI Agent

Tool definitions, planner, executor, feedback loop, observability dashboard.

Multi-Agent

Worker pool, coordinator, task queue, monitoring, failure recovery.

Webhook Catcher PWA

Generate unique URL, receive live webhooks, inspect headers/body, replay requests. Like RequestBin but self-contained — the debugging tool every developer needs.

Lisp Interpreter

Tokenize → parse → AST → eval in the browser. Teaches recursion, closures, environments, and how every programming language works under the hood — one S-expression at a time.

Mini Web Browser

HTML parser + CSS layout engine + render tree. Build a minimal browser that fetches a page, parses the DOM, applies styles, and paints to Canvas — the web, simplified.

TF-IDF Search Engine

Tokenization, inverted index construction, TF-IDF ranking, query processing with relevance scoring. Build the algorithm that powered the early web — before PageRank changed everything.

Autonomous SEO Agent

Build an AI agent that analyzes blog content for SEO gaps, generates optimized versions, and autonomously improves rankings. Proves the $50k+ MRR SEO agent pattern.

Multi-Agent Marketing Attribution

Build 4 coordinated agents: Data Collector, Attribution, Reporter, and Orchestrator. Learn agent-to-agent communication and real business value.

Social Media Content Pipeline

Build a pipeline of agents connected via MCP: Trend Researcher, Content Writer, Visual Designer, and Scheduler. Teaches Model Context Protocol.

LinkedIn Lead Gen Agent

Research prospects, score fit, draft personalized outreach, and manage follow-up queue. Teaches AI personalization at scale + SQLite agent memory.

Video Content Repurposing Agent

Take a long-form script, extract short-form clip opportunities, write hooks, generate captions. The #1 content repurposing pattern.

Revenue Data Analyst Agent

Connect to Stripe, analyze MRR trends, detect anomalies, generate daily reports. Real Stripe API integration with agent tools.

App Security Audit Agent

Scan a GitHub repo for security issues autonomously — hardcoded keys, vulnerable deps, CORS misconfigs. The agent decides what to check next.