Fullstack Development Roadmap for Beginners | MERN Stack

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