Full-stack developer (MERN / Next.js) roadmap

The browser sends a request (for example GET /products) to a server using HTTP. The server sends back a response with a status code like 200 (OK) or 404 (not found) and some data. Understanding this trip makes every later topic, from APIs to deployment, much easier.

HTML uses tags like <header>, <main>, <form>, <button> and <img> to describe the page. Using the right tag helps screen readers and search engines. Forms are especially important for a full-stack developer, because forms send data to your server.

Learn the box model (content, padding, border, margin), then Flexbox for rows and columns of items and Grid for full layouts. Build mobile first, because most Indian users open sites on phones. You do not need to be a designer, but your pages should look clean.

Learn variables, if/else, loops, functions, arrays and objects. Practise array methods like map, filter and find, because you will use them on every list of data. Spend real time here: weak JavaScript makes React and Node.js feel very hard.

The DOM is the tree of objects the browser builds from your HTML. You can find elements, change their text and react to events like click and submit. Building a few small apps this way helps you understand what React does for you later.

fetch() asks a server for data and returns a promise, a value that arrives later. async/await lets you write this waiting code top to bottom. Always handle errors and show a loading message while you wait.

Git saves versions of your code as commits so you can go back when something breaks. GitHub keeps your code online and lets others see and review it. Push every practice project and write a short README for each one.

Learn to move between folders (cd), list files (ls or dir), create and delete files, and run programs. Most install, build and deploy steps are terminal commands. Being calm in the terminal saves you hours every week.

npm installs ready-made code (packages) from the internet into your project. Vite runs a fast local development server and bundles your code for production. You will start most React practice projects with npm create vite@latest.

You build the page from small reusable pieces called components, like ProductCard or Navbar. Props pass data into a component, like arguments into a function. Thinking in components makes big apps easier to change.

useState remembers a value, and React redraws the component when it changes. useEffect runs code after the page draws, for example to load data from your API. Learn the rules of hooks early to avoid confusing bugs.

React Router shows a different component for each web address, like /products and /products/42. You read values such as the product id from the address. Next.js, which you learn later, has its own file-based routing.

Learn controlled inputs, showing an error next to the wrong field and disabling the button while saving. Libraries like React Hook Form and Zod help with bigger forms. Remember that the server must check the data again.

TypeScript is JavaScript with types: you say a price is a number and a name is a string. Your editor then warns you when you mix them up. Using it on both frontend and backend lets you share types, which is a big win in full-stack work.

Tailwind gives you small classes like p-4, flex and text-lg that you put straight on elements. It is fast once you know plain CSS well. Keep your designs simple and consistent.

Node.js runs JavaScript outside the browser, so the same language powers your backend. Learn modules, reading environment variables and the event loop, which is how Node handles many requests at once. Never block the event loop with very long work.

An API is a set of web addresses your frontend calls, like GET /api/products or POST /api/orders. Express is a small Node.js library for building these routes. Learn HTTP methods, status codes, route parameters and middleware, which is code that runs before your route.

MongoDB stores data as documents that look like JSON, grouped in collections. Mongoose lets you define a schema (the shape of each document) and validate data. MongoDB Atlas gives you a small free database in the cloud for practice.

Check every request body on the server, for example with Zod, and send a clear 400 error when it is wrong. Use one error-handling middleware so every error returns the same shape. Log errors on the server but never send secret details to the user.

Store passwords only as hashes, using bcrypt or argon2, never as plain text. After login, the server gives the browser a session cookie or a token such as a JWT (JSON Web Token) to prove who the user is. Learn the difference between authentication (who you are) and authorisation (what you may do).

Keep secrets like database URLs and API keys in a .env file that is listed in .gitignore. Read them in Node.js with process.env. If you ever push a secret by mistake, change (rotate) it at once.

Call your Express API from React with fetch or a tool like TanStack Query. Learn about CORS, the browser rule that blocks calls between different domains unless the server allows them. Show loading, empty and error states on every screen.

Use Postman, Thunder Client or curl to send requests and look at the responses. Later, write automated tests with Vitest or Jest and Supertest. Test the unhappy paths too: missing fields, wrong ids and logged-out users.

Next.js adds file-based routing, server rendering and server-side code to React. Server components fetch data on the server, so pages load fast and secrets stay safe. Route handlers and server actions replace a separate Express server for many apps.

A relational database stores data in tables with rows and columns, linked by ids. Learn SELECT, INSERT, UPDATE, DELETE, JOIN and GROUP BY. PostgreSQL is free, powerful and used by many Indian startups and large companies.

An ORM maps database tables to objects in your code. In Prisma you describe your tables in a schema file, and it creates TypeScript types and migrations for you. A migration is a saved step that changes the database structure safely.

Decide which tables you need (users, products, orders) and how they relate: one-to-many or many-to-many. Add indexes on columns you search often. Draw your tables on paper before you write any code.

Use a tested library such as Auth.js (NextAuth) or a hosted auth service instead of writing everything yourself. Learn sessions, secure cookies, Google login and protecting pages and API routes. Always check permissions on the server, not only by hiding buttons.

A payment gateway like Razorpay handles UPI, cards and net banking for you. Your server creates an order, the user pays in the gateway checkout, and your server verifies the payment signature before marking the order paid. Always practise in test mode with test keys, and never trust a "paid" message that only comes from the browser.

A webhook is a request that another service sends to your server when something happens, like a payment succeeding. Your server must check the webhook signature to be sure it is real. Handle the same event arriving twice without creating two orders.

Store files in object storage (like Amazon S3 or Cloudinary), not inside your database. Save only the file link in the database. Check the file type and size on the server before accepting it.

Unit tests (Vitest or Jest) check small functions. Integration tests check your API with a real test database. End-to-end tests with Playwright click through the app like a user, for example sign up, add to cart and pay in test mode.

A Docker image packs your app with everything it needs to run. A container is a running copy of that image. Docker Compose can start your app and a PostgreSQL database together with one command.

CI (continuous integration) runs lint, type-check and tests on every pull request. CD (continuous deployment) ships the code when the checks pass. A green check on every pull request is normal in good teams.

Learn platforms like Vercel and Render, and the basics of a cloud provider such as AWS: servers, storage, managed databases and domains. Use HTTPS everywhere and keep production secrets in the host settings. Keep backups of your database and know how to restore them.

Cache data that does not change often, in memory, in Redis or with Next.js caching. Add database indexes and avoid running one query per item in a list (the N+1 problem). Measure first with real numbers, then fix the slowest part.

Learn load balancers, horizontal scaling, queues for slow jobs, caching, and read replicas for busy databases. Practise by designing well-known apps on paper, like a URL shortener or a food-delivery order flow. Always explain the trade-offs, not just the boxes.

Learn the OWASP Top 10: injection, broken access control, cross-site scripting (XSS) and more. Use parameterised queries, check permissions on every request and rate-limit login. Keep packages updated and never log passwords or tokens.

Use structured logs, an error-tracking tool and simple uptime checks. Watch response times and error rates after every release. When something breaks, write a short note on what happened and how to stop it happening again.