Practice
Data Structures and Algorithms
Machine Coding Round (LLD)
System Design & Architecture (HLD)
Frontend UI Machine Coding
Resources
Career Advice and Roadmaps
Data Structures and Algorithms
Machine Coding Round (LLD)
System Design & Architecture (HLD)
Backend Development
Frontend Development
Project Ideas for Software Developers
Core Computer Science
Companies
SDE Jobs & Internships
Interview Questions
Compare Companies
IDE
Online IDE
Collaborative IDE

Fullstack Development Roadmap for Beginners | MERN Stack

Gaurav Chandak
Gaurav Chandak
Disclaimer: This article was written few years ago and may no longer be relevant as software engineering has changed a lot in the last few years. This is what may be more relevant now: Future of Software Engineering - Gaurav Chandak

Fullstack Development is a type of software development that involves working on both the backend (server) and the frontend (client).

There are various ways to become a fullstack developer. There are many technologies that you can work with to become a fullstack developer. We will talk about a path that involves starting with HTML, CSS, JS and then learning the MERN stack.

MERN stack denotes MongoDB, Express, React and Nodejs. Here, Nodejs and Express is used to build the backend, React is used to build the frontend and MongoDB is used as the database. MERN stack has become very popular as it is very easy and fast to build applications using the MERN stack.

Irrespective of the tech stack and the tutorials, there is only way to become a developer and that is "to build stuff". Most learners fall into tutorial hell (which we will talk about later) and never learn how to build applications.

The roadmap can be broadly classified into 5 parts:

  • Getting started with frontend development (HTML, CSS, JS)
  • Learning React
  • Learning Express.js and MongoDB
  • Building projects
  • Interview Preparation

Let's look at each of them in detail.

Learn HTML, CSS, JavaScript

HTML, CSS and JavaScript are at the core of all websites.

  • HTML provides the basic structure.
  • CSS provides the skin to the structure in the form of design, formatting, and layout.
  • JavaScript adds interactivity and logic to the website.

Things to keep in mind

  • Start with HTML, CSS and JavaScript. Do not directly jump to learning React or other frameworks/libraries.
  • CSS is difficult but is something that you should learn well. Do not directly jump to using Tailwind or Bootstrap.
  • Do not wait to complete JS before starting to build projects. JS is huge and takes time to learn.
  • Most companies have UI Machine Coding Round for frontend development roles where you cannot use any framework/library.

Free resources for learning HTML, CSS, JavaScript

  • Javascript Language: First Steps, Building blocks, and Objects
  • HTML: workattech/learn-web-dev/learn-html.md
  • CSS Basics: workattech/learn-web-dev/learn-css-basics.md
  • Javascript DOM and Events: DOM and Events
  • CSS Intermediate: learn-web-dev/learn-css-intermediate.md
  • Web Basics: Web Basics
  • Async JavaScript: Async JS and Using fetch

Learn React

React is one of the most used frontend libraries in tech companies. Almost all the modern tech companies from early-stage startups to the biggest tech companies like Microsoft and Facebook use React.

Things to keep in mind

  • Do not wait to learn React completely before you start using it. Build something or solve assignments while learning.
  • React has a very big community and is being actively built by Facebook and the community. It is not going anywhere so you can safely bet on it.

Free resources for learning React

  • React Docs: React Docs
  • Ben Awad - React Hooks: React Hooks Tutorial

Learn Backend using Express and MongoDB

Node + Express forms the N and E of the MERN stack. Most big companies use Java or Java-like languages for the backend. Most startups use Python or Node+Express for the backend.

Express helps build the backend very easily while staying in JavaScript ecosystem. It is preferred for self-projects as it helps focus on learning development and building projects pretty fast.

MongoDB is one of the most popular NoSQL databases. It forms the M of the MERN stack and works pretty well with the JS ecosystem.

Free resources for learning backend (using Express and MongoDB)

  • Express Getting Started: Getting Started - Express Docs
  • Express Guide: Guide - Express Docs
  • REST API Design: Basics, Best Practices
  • MongoDB: MongoDB Manual
  • Mongoose (MongoDB ODM): Mongoose Docs
  • Session Management: Sample MERN App

Build Projects

Learning languages and technologies is not enough if you can't use it to build something.

Most people either run behind certifications or end up in tutorial hell. Companies do not care about certifications. They want to see your project demos and code.

Most students get stuck in tutorial hell while learning development. Tutorial hell means watching tutorials and building whatever the instructor is building and continuing doing that across tutorials without actually building anything outside that.

Project Ideas

  • Utility Apps/Developer Tools: Utility Apps and Developer Tools (Will help practice JS and development in general)
  • Developer Profile Platform: Developer Profile Platform (Will help learn how to implement a given design)
  • Rating and Review Website: Rating and Review Website (Will help learn full-stack development including DB design and session management)
  • E-commerce website: E-Commerce Platform Clone (Will help learn e-commerce lifecycle and software development)

Interview Preparation

Even after learning how to develop stuff, you will need to do a bit more to clear interviews. Doing the following must be good enough to help you clear interviews of most companies.

  • Most companies have a DSA round and you may have to spend 3-4 months and learning and practicing DSA.
  • Learn and practice how to build a small application within 1.5-2 hours for Machine Coding Round: Backend Machine Coding Round and Frontend Machine Coding Round.
  • Prepare Top JavaScript Interview Questions.
  • Prepare Top React Interview Questions.
  • Prepare Core CS (OOP, OS, DBMS, Computer Networks).
  • Do P2P Mock Interviews on pramp.

---

I hope that this roadmap can help you get started with fullstack development and assist you in getting your first fullstack developer job.

If you have any questions not covered in any of the articles, you can reach out to me on Whatsapp at .

You should also join our discord community to get help and stay motivated in your journey.

2
Gaurav Chandak
Gaurav Chandak
Gaurav is the co-founder of workat.tech and has previously worked at Flipkart and Microsoft. He intends to actively contribute to the future of education through workat.tech.
SDE Bootcamp - Become a software engineer at a product-based company
Practice Data Structures & Algorithms
Learning Resources
Interview Prep Resources
Blog
  • Career Advice and Roadmaps
  • Data Structures & Algorithms
  • Machine Coding Round (LLD)
  • System Design & Architecture
  • Backend Development
  • Frontend Development
  • Awesome Project Ideas
  • Core Computer Science
Practice Questions
  • Machine Coding (LLD) Questions
  • System Design (HLD) Questions
  • Topic-wise DSA Questions
  • Company-wise DSA Questions
  • DSA Sheets (Curated Lists)
  • JavaScript Interview Questions
  • Frontend UI Machine Coding Questions
Online Compilers (IDE)
  • Online Java Compiler
  • Online C++ Compiler
  • Online C Compiler
  • Online Python Compiler
  • Online JavaScript Compiler
Topic-wise Problems
  • Dynamic Programming Interview Questions
  • Linked List Interview Questions
  • Graph Interview Questions
  • Backtracking Interview Questions
  • Arrays Interview Questions
  • Trees Interview Questions
Company-wise Problems
  • Amazon Interview Questions
  • Microsoft Interview Questions
  • Google Interview Questions
  • Flipkart Interview Questions
  • Adobe Interview Questions
  • Facebook Interview Questions
DSA Sheets (Curated Lists)
  • Top Interview Questions
  • FAANG Interview Questions
  • Most Asked Interview Questions
  • 6 month DSA Practice Sheet
  • 3 month DSA Practice Sheet
  • Last minute DSA Practice Sheet