Junior → Senior Web Projects Roadmap

A structured, 5-level roadmap of 70+ real-world web projects that takes you from writing your first DOM script to designing senior-grade fullstack systems. Every project comes with a short build guide, the source code, and a live demo.

---

Why this repo exists

Most "project idea" lists are flat — 50 random apps with no order and no reasoning. This one is sequenced. The projects are ordered so that each one builds on the skills of the previous level, and each level maps to a recognisable point in a web developer's career: from absolute beginner, through intermediate frontend, into backend, then fullstack MERN, and finally senior-level distributed/AI/security systems.

If you finish a level, you can honestly claim the skill it represents. That is the point.

Who this is for

• Self-taught developers who want a path instead of a pile of tutorials.
• Junior developers trying to make the jump to mid-level with evidence, not vibes.
• Anyone building a GitHub portfolio that a recruiter can scan in 30 seconds.

How to use this roadmap

1. Find your level. Don't start at Level 1 if you already ship React apps — start where it gets uncomfortable.
2. Build, don't read. Open the project's guide, understand the goal, then build it yourself before looking at the reference code.
3. Ship every project. Each one gets its own repo and a live deployment. A project that isn't deployed doesn't count.
4. Write the README. Treat every project's README as practice for technical communication — it matters as much as the code.
5. Move up only when comfortable. A level is done when you could rebuild any project in it without a guide.
6. Track your progress. Fork this repo and use the Progress Tracker to check off projects as you go.

A note on AI tools

AI coding assistants (Copilot, Cursor, ChatGPT) are part of modern development — but when you use them matters more than whether you use them.

Level	AI approach
1 – 2	Don't use AI. Write every line yourself. You're building muscle memory for the language, the DOM, and the browser. If AI writes it for you, you skip the struggle that makes it stick.
3 – 4	Use AI as a pair programmer. You design the architecture, write the core logic, and let AI help with boilerplate, debugging, and refactoring. Always understand what it generates before you commit it.
5	Use AI as a power tool and build with it. Leverage AI for rapid prototyping, complex integrations, and code review — and build AI-powered products yourself (chatbots, recommendation engines, computer vision).

The rule of thumb: if you can't explain what the AI wrote, you're not ready to use it at that level yet.

Find your starting level

Not sure where to begin? Use the table below for a quick match, or take the detailed self-assessment quiz to be sure.

If you can honestly say…	Start at
"I'm new to JavaScript or still learning the basics"	Level 1 — JS Fundamentals
"I can write vanilla JS but haven't consumed real APIs"	Level 2 — Intermediate Frontend
"I build frontends comfortably but never touched Node or Express"	Level 3 — Backend Fundamentals
"I know backend basics but haven't shipped a fullstack app"	Level 4 — Fullstack MERN
"I ship fullstack apps and want architecture-level challenges"	Level 5 — Senior-Level Systems

Roadmap

Legend: ✅ built & deployed · 🚧 planned / in progress

---

Level 1 — JavaScript Fundamentals

Plain JavaScript, the DOM, events, and clean simple UI. No frameworks. The goal is to be fluent in the language and the browser before adding any abstraction.

Skills you'll gain:

• DOM manipulation & event-driven UI (click, keydown, input, touch, drag)
• State management with plain arrays and objects — the data → render cycle
• CSS Grid, Flexbox & responsive layouts (masonry, mobile-first)
• CSS 3D transforms & micro-animations (flip, fade, ripple effects)
• Timer mechanics — setInterval, Date.now(), drift-safe countdowns
• Form handling, input validation & conditional rendering
• LocalStorage persistence, data hydration & JSON export/import
• fetch + async/await for API consumption and error handling
• Browser APIs: Intersection Observer, Web Speech, Web Audio, Drag and Drop
• PWA fundamentals — Service Worker, manifest, offline caching
• Accessibility (ARIA labels, keyboard navigation, WCAG 2.1 AA)
• SEO essentials — Open Graph, JSON-LD structured data, semantic HTML
• Algorithm thinking — Fisher-Yates shuffle, Shunting-yard expression parsing

Project	What you'll build	Guide	Links
✅ Tic Tac Toe	Game state, win detection, click-driven DOM	Guide	Code · Demo
✅ Basic Calculator	Input handling, operations, UI state	Guide	Code · Demo
✅ Type Speed Test	Timers, keyboard events, WPM calculation	Guide	Code · Demo
✅ Memory Game	Array shuffling, match logic, flip animation	Guide	Code · Demo
✅ Countdown Timer	setInterval, date math, formatting	Guide	Code · Demo
✅ BMI Calculator	Form input, validation, formula output	Guide	Code · Demo
✅ Quote Generator	Data arrays, random selection, share action	Guide	Code · Demo
✅ Simple To-Do List	In-memory CRUD, list rendering, filtering	Guide	Code · Demo
✅ Photo Gallery	Grid layout, lightbox modal, lazy loading	Guide	Code · Demo
✅ Personal Portfolio Website	Responsive layout, semantic HTML, CSS craft	Guide	Code · Demo
✅ Weather App (Basic)	Static UI, layout, conditional rendering	Guide	Code · Demo

Level 2 — Intermediate Frontend

Real APIs, client-side state, responsive design, and a couple of games for logic practice. By the end of this level you can call yourself a junior frontend developer.

Skills you'll gain:

• React + TypeScript + Vite — modern frontend toolchain from scratch
• State management with Zustand (simple) and Redux Toolkit (complex — slices, thunks, selectors)
• Data visualization with Recharts — line, bar, pie, and area charts
• Form validation with React Hook Form + Zod schema definitions
• Accessible UI components with Radix UI, Headless UI & shadcn/ui pattern
• Map integration with Leaflet + react-leaflet (markers, routes, geospatial filtering)
• Server state & caching with TanStack React Query
• Drag-and-drop with dnd-kit — sortable lists, cross-container moves
• HTML5 Canvas game loop — requestAnimationFrame, delta-time physics, collision detection
• HTML5 Audio API — playback control, seekable progress, shuffle/repeat algorithms
• Markdown rendering with react-markdown + remark-gfm
• API key protection via Netlify Functions (serverless proxy)
• PWA with vite-plugin-pwa + Workbox — offline caching, installability
• XSS protection with DOMPurify for external API content
• Complex algorithm design — chess move validation, check/checkmate detection

Project	What you'll build	Guide	Links
✅ Weather App (API)	fetch, async/await, API keys, error states	Guide	Code · Demo
✅ Recipe App	Search, API consumption, detail views	Guide	Code · Demo
✅ Stock Market Dashboard	Charts, polling, number formatting	Guide	Code · Demo
✅ Real Estate Listing	Filtering, sorting, card grids	Guide	Code · Demo
✅ Expense Tracker	State management, categories, totals	Guide	Code · Demo
✅ Notes App	Persistence with localStorage, CRUD	Guide	Code · Demo
✅ Music Player	Audio API, playlist state, progress bar	Guide	Code · Demo
✅ Travel Planner	Multi-step state, itinerary building	Guide	Code · Demo
✅ Interactive Map	Leaflet/Mapbox, markers, geolocation	Guide	Code · Demo
✅ Fitness Tracker	Data entry, progress visualization	Guide	Code · Demo
✅ E-commerce Frontend	Product grid, filters, cart state	Guide	Code · Demo
✅ Chat UI	Message list, input, component composition	Guide	Code · Demo
✅ Flappy Bird	Game loop, collision detection, canvas	Guide	Code · Demo
✅ Chess Board Logic	Board representation, move validation	Guide	Code · Demo
✅ Social Media Dashboard	Widget layout, mock data, responsive grid	Guide	Code · Demo
✅ Analytics Dashboard	Charts, KPI cards, data visualization	Guide	Code · Demo

Level 3 — Backend Fundamentals

Node.js, Express, and databases (MongoDB / PostgreSQL). REST design, authentication, middleware, queues. This is where you become a backend developer.

Skills you'll gain:

• Node.js + Express 5 server architecture with MVC pattern
• REST API design — proper status codes, consistent error shapes, CRUD conventions
• Authentication: JWT (stateless) and OAuth 2.0 with Passport.js (session-based)
• Databases: SQLite (raw SQL), MongoDB (Mongoose), PostgreSQL (Prisma ORM + migrations)
• Redis — caching (cache-aside pattern, TTL), distributed rate limiting, job queues
• Input validation with express-validator and Joi
• API documentation with Swagger (swagger-jsdoc + swagger-ui-express)
• File uploads with Multer + Cloudinary (multipart handling, MIME validation)
• Transactional email with Nodemailer (SMTP, templates, bulk delivery)
• Background jobs with BullMQ — producer/worker pattern, retry/backoff, Bull Board monitoring
• Real-time communication with Socket.io — rooms, typing indicators, online presence
• Security hardening — Helmet, rate limiting (tiered + RFC headers), CORS, mongo-sanitize
• Scheduled automation with node-cron and structured logging with Winston
• Server-side pagination, full-text search, dynamic filtering & aggregation

Project	What you'll build	Guide	Links
✅ Authentication API	JWT/sessions, password hashing, protected routes	Guide	Code · Demo
✅ CRUD User API	REST design, controllers, DB models	Guide	Code · Demo
✅ RESTful To-Do API	Resource modeling, status codes, validation	Guide	Code · Demo
✅ Notes API (Auth)	Auth middleware, user-scoped data	Guide	Code · Demo
✅ Contact Form API	Email sending (Nodemailer) + DB storage	Guide	Code · Demo
✅ URL Shortener	Hashing, redirects, click tracking	Guide	Code · Demo
✅ Weather Proxy API	Hiding API keys, caching, proxying	Guide	Code · Demo
✅ Pagination + Search API	Query params, indexing, filtering	Guide	Code · Demo
✅ MCQ/Quiz API	Nested data, scoring logic	Guide	Code · Demo
✅ File Upload API	Multipart handling with Multer, validation	Guide	Code · Demo
✅ Newsletter System	Subscriptions, scheduled sends, templates	Guide	Code · Demo
✅ Currency Converter API	External API, caching, rate handling	Guide	Code · Demo
✅ Rate Limiter API	Middleware, store-backed throttling	Guide	Code · Demo
✅ Expense Tracker Backend	Aggregation, reports, user data	Guide	Code · Demo
✅ Job Queue	Background jobs with BullMQ + Redis, retries	Guide	Code · Demo
✅ OAuth Login	OAuth2 flow with Google/GitHub, Passport	Guide	Code · Demo
✅ Chat App Backend	WebSockets with Socket.io, rooms, events	Guide	Code · Demo

Level 4 — Fullstack MERN

MongoDB, Express, React, Node — end to end. This is the level that takes you from junior to mid-level. By the end you can design, build, and ship a complete product.

Skills you'll gain:

• End-to-end MERN architecture — React ↔ Express ↔ MongoDB data flow
• Monorepo structure with shared TypeScript + Zod schemas for end-to-end type safety
• Role-based access control (RBAC) — multi-role dashboards with permission-gated UI
• Dual JWT strategy — access + refresh token rotation with Axios request queuing
• Real-time with Socket.io — dual REST + WebSocket, presence, typing, read receipts
• Rich text & code editing — React Quill, Markdown + syntax highlighting, Monaco Editor
• Real-time collaboration — Yjs CRDT for conflict-free concurrent editing
• Video engineering — FFmpeg HLS transcoding, adaptive streaming with HLS.js
• Animation polish — Framer Motion page transitions, scroll animations, stagger effects
• Cloudinary upload pipelines — images, resumes, videos with MIME validation
• Multi-tenancy — organization-scoped data, team invitations, subscription tiers
• Atomic database operations — findOneAndUpdate for concurrent-safe booking
• Content workflows — approval systems, state machines (6-state application pipeline)
• Automated testing — Jest + Supertest (API), Vitest + React Testing Library (UI)
• Deployment — Netlify + Render split, Docker on Fly.io, render.yaml configs

Project	What you'll build	Guide	Links
✅ To-Do MERN	Full CRUD across React + Express + Mongo	Guide	Code · Demo
✅ Notes MERN	Auth + notes, fullstack data flow	Guide	Code · Demo
✅ Simple Blog MERN	Posts, routing, fullstack rendering	Guide	Code · Demo
✅ Weather App with Login	Auth-gated API consumption	Guide	Code · Demo
✅ User Authentication System	JWT + bcrypt, refresh tokens, protected UI	Guide	Code · Demo
✅ Expense Tracker	Mongo aggregation + chart visualization	Guide	Code · Demo
✅ Blog with Comments & Likes	Relations, nested resources, optimistic UI	Guide	Code · Demo
✅ Recipe App MERN	CRUD + search + favorites, fullstack	Guide	Code · Demo
✅ Movie Database	External API + user-saved favorites	Guide	Code · Demo
✅ Portfolio w/ Admin Panel	Public site + protected CMS	Guide	Code · Demo
✅ Event Booking System	Bookings, availability, email confirmations	Guide	Code · Demo
✅ Job Board	Multi-role dashboards, applications	Guide	Code · Demo
✅ Chat App	Realtime messaging + notification system	Guide	Code · Demo
✅ Social Media Platform	Follow graph, feed, notifications	Guide	Code · Demo
✅ LMS	Courses, quizzes, progress tracking, roles	Guide	Code · Demo
✅ Video Streaming Platform	Upload, streaming, transcoding basics	Guide	Code · Demo
✅ Online Code Editor	Monaco editor + realtime collaboration	Guide	Code · Demo
✅ SaaS Dashboard Template	Multi-tenant patterns, billing-ready UI	Guide	Code · Demo

Level 5 — Senior-Level Systems

Distributed systems, real-time architecture, AI/ML integration, security, and blockchain. These projects are about architectural reasoning — the kind of work that ends the "junior" conversation for good.

Skills you'll gain:

• Authoritative server architecture — server validates all state changes, clients send intentions
• Dual WebSocket channels — separate device ingest and dashboard streams for independent scaling
• Hybrid storage — Redis for real-time state + PostgreSQL for persistent data
• PostGIS geospatial queries — spatial indexes, polygon containment, distance calculations
• NestJS modular backend with TypeORM and Drizzle ORM
• Real-time map visualization — MapLibre GL with smooth marker interpolation
• Matchmaking and ride-matching — Redis-backed queues, geospatial pairing, dynamic pricing
• Reconnection resilience — grace periods with state recovery from Redis
• Geofencing — boundary detection, enter/exit events, spatial alerting
• IoT data pipelines — MQTT protocol, device telemetry ingestion, time-series storage
• AI/ML integration — LLM context windows, streaming responses, collaborative filtering, embeddings
• Computer vision & audio — face detection model integration, speech-to-text transcription APIs
• Metrics & observability — Sentry, structured logging (Pino), alerting dashboards, uptime monitoring
• Financial security — transaction isolation, audit logging, ACID compliance, fraud prevention
• Blockchain fundamentals — smart contracts, immutable ledgers, cryptographic verification
• Networking concepts — tunneling logic, encryption layers, VPN protocol simulation
• TypeScript monorepo with shared types for compile-time event safety

Project	What you'll build	Guide	Links
✅ Multiplayer Game Backend	Authoritative server, state sync, latency handling	Guide	Code · Demo
✅ Vehicle Tracking System	Real-time GPS streams, geofencing	Guide	Code · Demo
🚧 IoT Dashboard	Device telemetry, MQTT, time-series data	Guide	Code · Demo
🚧 Ride-Sharing Backend	Matching, geospatial queries, pricing	Guide	Code · Demo
🚧 Remote Monitoring System	Metrics ingestion, alerting, dashboards	Guide	Code · Demo
🚧 AI-Powered Chatbot	LLM integration, context windows, streaming	Guide	Code · Demo
🚧 Content Recommendation System	Collaborative filtering, embeddings	Guide	Code · Demo
🚧 Face Detection App	Computer vision, model integration	Guide	Code · Demo
🚧 Speech Recognition App	Audio processing, transcription APIs	Guide	Code · Demo
🚧 VPN Simulation	Networking concepts, tunneling logic	Guide	Code · Demo
🚧 Online Banking System	Transactions, security, audit logging	Guide	Code · Demo
🚧 Blockchain Voting System	Smart contracts, immutability, verification	Guide	Code · Demo
🚧 Crypto Exchange (frontend)	Order book UI, real-time price feeds	Guide	Code · Demo

---

Repository structure

junior-to-senior-web-projects/
├── README.md            ← you are here
├── CONTRIBUTING.md       ← how to add your own project
├── assets/
│   └── banner.svg
└── docs/
    ├── TEMPLATE.md       ← copy this for every new project guide
    ├── PROGRESS.md        ← fork & track your progress
    ├── find-your-level.md ← self-assessment quiz
    ├── level-1/ … level-5/
    │   └── <project>.md  ← one short build guide per project

Each guide follows the same shape: purpose → tech stack → numbered build steps → deployment → tips → README guidance. Copy docs/TEMPLATE.md to start a new one.

Contributing

This roadmap is meant to grow. If you've built one of these projects — or have a better project idea for a level — open a PR. See CONTRIBUTING.md.

Author

Built and maintained by Serkan — GitHub

If this roadmap helped you, a ⭐ helps other developers find it.

License

Released under the MIT License. Use it, fork it, learn from it.