Sefism Full Stack Development Roadmap

What it is

Sefism's full stack development roadmap is for building and running a whole web product yourself: the React interface, the server, the database, and the Linux or AWS machine it all runs on. It is seven stages and about 445 hours, ending with a product on your own domain that at least ten real people use.

Like every Sefism roadmap, each stage lists topics in learning order with a short explanation, a check question and an AI study prompt that quizzes you rather than writing the code. Each stage has a milestone, Tauseef's practical advice, a checklist where the stage is more doing than studying, and resources labelled by their job.

By the end you can:

• 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.

Four stacks

You choose a stack when you open the roadmap, and the server, data and project stages change with it:

• Next.js (the default at /roadmaps/fullstack/): TypeScript end to end, with route handlers, server actions, PostgreSQL and Prisma.
• MERN: MongoDB, Express, React and Node, with a Vite React frontend and Mongoose.
• Django and React: a Python API with Django REST Framework, PostgreSQL and the Django ORM, and a Vite React frontend.
• Spring Boot and React: a Java API with Spring Data JPA, Flyway and Spring Security, and a Vite React frontend.

React is the frontend in all four, and the API design, security, deployment and shipping stages are shared.

Who it suits, and who should start elsewhere

It suits developers who want to build and run a complete product on their own: students planning a strong final year project, frontend or backend developers filling in the other half, and anyone who wants to freelance or build their own product and needs every layer.

The first stage is the browser side compressed into 90 hours. The roadmap says plainly that if all of it is new, you should work through the first two stages of the Frontend development roadmap first. If you only want one side, Frontend and Backend each go deeper than this roadmap does. For MongoDB in depth, see the MongoDB roadmap.

Time and a weekly plan

The seven stages total about 445 hours. The first two (web foundations, and Git, npm and React, 160 hours together) are foundation stages you can skim if you already build React apps. At the page's pacing that is about 89 weeks at 5 hours a week, 58 at 8 hours, or 40 at 12 hours.

A student with 12 hours a week: topics on two or three evenings and the stage milestone at the weekend. About nine to ten months, which lines up well with a final year project: start the product stage in your final semester.

Someone working full time with 8 hours a week: a little over a year. If you already work on one side of the stack, skim the stages you use daily and put the saved hours into data modelling and deployment.

Stage by stage

1. Web foundations: HTML, CSS and JavaScript (90 hours, foundation)

How a request reaches a server, semantic HTML and forms, Flexbox, Grid and responsive layout, JavaScript values, functions and scope, the DOM and events, promises and async/await, the event loop, and fetching data with loading, empty and error states. Milestone: a responsive plain JavaScript page that loads, filters and displays data from a public API with every state handled.

2. Git, npm and React (70 hours, foundation)

Git commits, branches and pull requests, npm and lockfiles, then React: components, state, effects and when you do not need one, and forms with validation. In the Next.js stack you use the App Router and server and client components; in the other three you build a Vite React app with client side routing. Milestone: a multi page React app reading from a public API, with a validated form and a clean commit history.

3. The server side

Titled by stack: The server side of Next.js, Node.js and Express, Python and Django, or Java and Spring Boot (55 hours). In Next.js: Node.js underneath, environment variables and secrets, route handlers, server actions, schema validation and error handling. Django covers models, views, the admin and Django REST Framework with CORS; Spring Boot covers dependency injection, REST controllers, DTOs with Bean Validation and ProblemDetail errors. Milestone: a server that validates input, returns clear errors and keeps every secret in environment variables, called by your React app.

4. Data and modelling (55 hours)

PostgreSQL with Prisma, the Django ORM, or Spring Data JPA and Flyway, or MongoDB with Mongoose for MERN. The relational stacks cover keys and relationships, normalisation, constraints, joins and aggregates, indexes and EXPLAIN, transactions and their ORM; MERN covers embedding against referencing, indexes with explain(), the aggregation pipeline and transactions. Milestone: a schema designed on paper first, built with migrations and constraints, with indexes you can justify and, for Django and Spring, every N+1 query removed from list endpoints.

5. APIs, authentication and caching (55 hours)

Resources, methods and status codes, one predictable error shape, pagination, filtering and versioning, storing passwords safely, sessions, cookies and tokens, secure cookies and CSRF, authorisation by role and ownership, CORS and rate limiting, and caching with Redis and HTTP headers. The Spring stack adds Spring Security for a React frontend. Milestone: sign in, role based access, validated input, paginated lists and one error format, plus one slow endpoint cached in Redis with the speed up proven in numbers.

6. Deployment, CI/CD, Linux and AWS (50 hours)

The shell, SSH and processes, stateless configuration, core AWS (IAM, EC2, S3, RDS and Route 53), domains, HTTPS and a reverse proxy, Docker and Docker Compose, GitHub Actions that test on every pull request and deploy on merge, and logs, uptime checks and backups. Milestone: your app on your own domain with HTTPS and a managed database, tests on every pull request, automatic deploys on merge, and an alert when it goes down.

7. Ship a complete product (70 hours)

Scope and data model first, tests on the critical paths, safe migrations, backups you have actually restored, error tracking and uptime, real users and iteration, a README with an architecture diagram and trade-offs, and what would change at ten times the users. Milestone: a deployed product with at least ten real users, tests on the flows that matter, error tracking, one restored backup and a README someone else could maintain it from.

Projects that fit

Each stack gets two suggestions. Next.js: a household meal planner and a peer code review platform for university courses. MERN: university society events with QR check-in and a collaborative whiteboard. Django and React: an adaptive study planner with spaced repetition and municipal complaint tracking. Spring Boot and React: a pharmacy stock ledger with batch expiry and a diagnostic lab reporting system.

How it works on Sefism

Everything here is free to learn from. The public page shows all seven stages, with the first two stages open to read. Adding the roadmap to your dashboard uses credits: new members get starting credits and the first roadmap you add is free. Once added, every stage opens, you can track your progress, the weeks follow your pace, and the companion cheat sheet opens with it. If you are unsure how to scope your product or which stack fits a job you want, ask Tauseef or book a 1:1 session.

The companion cheat sheet

The Full stack development cheat sheet follows the roadmap chapter by chapter in four editions, one per stack. Use it to revise after each stage and as a checklist before you ship.

Related on Sefism

• AI engineer or full stack developer?
• Which final year project helps you get a job?
• I can follow tutorials but cannot build anything alone
• What actually happens between your pull request and production
• Library picks used in the stages: Full Stack Open, Next.js Learn, the Django Tutorial, Spring Guides and AWS Cloud Practitioner Essentials

What you can do afterwards

Apply for full stack or product engineering roles with a live product and its README to talk through, take on freelance web work, or start on building and selling your own product.

FAQ

How long does it take to become a full stack developer? This roadmap is about 445 hours: roughly nine to ten months at 12 hours a week, or just over a year at 8.

Which full stack should I learn? Next.js keeps everything in TypeScript; MERN is JavaScript with MongoDB; Django and Spring Boot pair React with a Python or Java API. Look at the jobs you want and choose the stack they use.

Do I need AWS? Stage 6 lets you deploy to a Linux server or to AWS, and covers the core AWS services (IAM, EC2, S3, RDS and Route 53) for those who choose it.

Is full stack too broad for a first job? It is broad by design. The roadmap keeps it manageable by having one product run through every stage, so each layer is learned in context.