Roadmap · Build products
Full stack development (MERN)
Opens with creditsFor developers who want to build and run a complete web product on their own, from the React interface to the database and the server it runs on, in Next.js, MERN, Django with React or Spring Boot with React. By the end you can model data, build a secure API and UI, deploy to Linux or AWS and ship every change through CI.
Curated by Tauseef Fayyaz7 stages, 56 topics~21 months at a few hours a weekBy the end, you will be able to
- Build a React interface that talks cleanly to your own backend, with loading, error and signed in states
- Design a data model in PostgreSQL or MongoDB and write the queries, indexes and migrations your app needs
- Build an API with authentication, role checks, validation, pagination and caching on a slow endpoint
- Deploy to a Linux server or AWS with HTTPS and ship every change through a GitHub Actions pipeline
- Ship one complete product with real users, and explain its data model, architecture and trade-offs
The path
7 stages, in the order to learn them. Open one to start.
1Web foundations: HTML, CSS and JavaScriptThe browser side, compressed: semantic HTML, responsive CSS and enough JavaScript for the DOM, events and fetch. If all of this is new, work through the first two stages of the Frontend roadmap first.8 topics · ~4 months
- 1How a request reaches a serverEverything in this roadmap sits on one loop: the browser asks, and a server answers.
- 2Semantic HTML and formsHTML describes what content is, and the right element does work for you.
- 3Flexbox, Grid and responsive layoutMost layouts need two tools.
- 4JavaScript values, functions and scopeIn this roadmap JavaScript runs in the browser and, for most stacks, on the server too.
- 5The DOM and eventsThe DOM is the live tree of objects the browser builds from your HTML.
- 6Promises and async/awaitNetwork calls, file reads and database queries take time.
- 7The event loopJavaScript runs your code on a single thread, one step at a time.
- 8Fetching data with loading, empty and error statesThis topic ties the stage together.
8 in this stageOpen this stage2Git, npm and ReactVersion control and packages, then a real React frontend built with Vite: components, state, effects, forms, client side routing and talking to an API.8 topics · ~3 months
- 1Git commits, branches and pull requestsGit saves snapshots of your project.
- 2npm, package.json and lockfilesnpm installs the libraries your project uses and runs its scripts.
- 3A Vite React project and its dev serverVite creates and serves a React project.
- 4Components, JSX and propsA React interface is a tree of components.
- 5State, events and lifting state upState is data that changes over time and should update the screen.
- 6Effects and data fetching
useEffectkeeps a component in step with something outside React, like a network request, a timer or a subscription. - 7Forms and validationForms are where users hand your app data, so they hold most of the frontend's logic.
- 8Client side routingA single page app has one HTML page.
8 in this stageOpen this stage- Node.js and ExpressJavaScript on the server: modules, the event loop and environment variables, then HTTP servers with Express, routing, middleware and consistent error handling.7 topics · ~3 monthsOpens with credits
- MongoDB and data modellingStoring data in MongoDB without making a mess: documents and collections, when to embed and when to reference, indexes, aggregation, and Mongoose schemas with validation in your Express API.7 topics · ~3 monthsOpens with credits
- APIs, authentication and cachingDesigning APIs other people can rely on, securing them with sessions or tokens and role checks, and adding caching and rate limiting where they actually help.9 topics · ~3 monthsOpens with credits
- Deployment, CI/CD, Linux and AWSRunning your app somewhere real and changing it safely: the Linux command line and SSH, Docker, a first deploy to a server or AWS with HTTPS, and a GitHub Actions pipeline that tests and deploys every change.8 topics · ~2 monthsOpens with credits
- Ship a complete productOne real product end to end, built the way a small team would: scoped, modelled, tested, deployed, observed and used by real people, then explained well enough that someone else could maintain it.9 topics · ~3 monthsOpens with credits
5 more stages, 40 more topics, free with an account.
You have seen the open stages of the Full stack development roadmap. Every topic it covers is listed above, and an account opens the rest: what each topic means, a question to check yourself, the courses, the practice and Tauseef's advice for every stage. Early access is open: sign up and your account is active shortly after.
Everything here is free to learn from. A few things, like adding a roadmap, keeping a cheat sheet or asking Tauseef a question, use credits. You get 15 when you join, your first roadmap is free, and if you are learning seriously and run out, you can ask for more. Credits only make sure the platform goes to people who are actually learning.
Related on Sefism
Picked from the other libraries by shared topics.
Best practices
See all- TypeScript Best PracticesModern TypeScript best practices for 2026: strict settings, TypeScript 7, modeling data with unions, safe narrowing, runtime validation, generics and typed linting.
- Next.js App Router Best PracticesNext.js 16 App Router best practices: Server Components, Cache Components and use cache, secure Server Actions, proxy.ts, metadata and images.
- React Best PracticesModern React best practices for 2026: pure components, lean state, fewer effects, React Compiler, form actions, accessibility and testing.
Checklists
See all- Web Accessibility ChecklistA practical web accessibility checklist built on WCAG 2.2 level AA, with a severity and a concrete way to verify every check.
- Web Performance ChecklistA practical web performance checklist built on Core Web Vitals: LCP, INP and CLS, with a severity and a concrete way to verify every check.
- Web Application Security ChecklistA practical web application security checklist built on the OWASP Top 10:2025 and ASVS 5.0, with a severity and a way to verify every check.
Project structures
See all- MERN (MongoDB, Express, React, Node) project structureOne repository with a React app built by Vite in client/, an Express API with Mongoose in server/, and a tiny shared/ package that both import for request shapes and types. npm workspaces give you one install and one command to run both, and one example feature (clinic appointments) runs through every folder so you can see how a request travels from a form to MongoDB and back, and what tests, security and operations a real team adds around it.
- Next.js full stack (database and auth) project structureOne Next.js app that is both your frontend and your backend: pages render on the server, forms call Server Actions, and Route Handlers serve the few real HTTP endpoints (auth, webhooks, jobs, health). PostgreSQL through Prisma ORM, sign-in through Better Auth, background jobs with Inngest, and every database read goes through a small Data Access Layer that checks who is asking. The example features are invoices and clients for freelancers.
- .NET with Angular project structureThe common enterprise pairing: an ASP.NET Core Web API and an Angular app as two projects in one solution, exactly as the Visual Studio template lays them out. In development the Angular dev server proxies API calls to .NET; in production the API serves the built Angular files from one origin, so cookie sign-in with ASP.NET Core Identity just works. The Angular API client is generated from the API's OpenAPI document, so both sides always agree. The example features are orders and products.
Career questions
See all- What should I learn to become a web developer, and in what order?Learn the web platform first (HTML, CSS, JavaScript, how HTTP works), then one frontend framework, then a backend with a database, and build a real project at each stage. If you already know WordPress, you are not starting over: your HTML, CSS and PHP experience transfers.
- How do I choose between frontend, backend, mobile, cloud, cybersecurity, data and AI without trying them all for years?Do not try to pick the best field; pick the one whose daily problems you can tolerate on a bad day. Run a short, cheap experiment in two or three candidates, compare what you enjoyed doing rather than what sounded exciting, check the local job market, and commit for six to nine months.
- Should I become an AI engineer or stay a full stack developer?For most full stack developers this is not an either/or. AI engineering is largely full stack engineering plus models, evaluation and data. Keep your full stack strength, add AI features to real work, and move titles only when you have shipped AI work you can point to.
Cheat sheets
See allWork with me
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com