Skip to content

Latest commit

 

History

History
101 lines (66 loc) · 5.83 KB

Readme.md

File metadata and controls

101 lines (66 loc) · 5.83 KB

Roadmap to become a Full Stack MERN Stack Developer

What Is a Stack?

Stacks are groupings of multiple technologies used to create a single web application. Each web application is built with a variety of databases, libraries and frameworks. In the MERN stack, the technology group is based around JavaScript and is intended to simplify and streamline the process of web development. All the technologies in the MERN stack make up an end-to-end framework that developers can use from start to finish on single applications.

What Is the MERN Stack?

[ M = "MongoDB", E = "ExpressJS", R = "React", N = "NodeJS"]

MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack.

We can build a full stack web application using MERN Stack. The application can be as simple as Todo List to as complex as E-commerce Website. MERN stack works on the concept of seperating the frontend from the backend. The core idea of separate front-end and back-end is to allow the front-end to call the back-end API, and interact through JSON data, thereby reducing the concurrency/load pressure of the back-end server and improving performance and scalability. In which the MERN architecture permits you to easily construct 3-tier architecture (frontend, backend, and database).

React is used to build the frontend, Nodejs and Express is used to build the backend, and MongoDB is used as the database.

The roadmap can be broadly classified into 4 parts:

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

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

Learn React

React is declarative JavaScript framework for creating dynamic client-side applications in HTML. React lets you build up complex interfaces through simple components, connect them to data on your back-end server, and render them as HTML. 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 resource for learning React

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.js bills itself as a “fast, unopinionated, minimalist web framework for Node.js,”. 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. Express.js has powerful models for URL routing (matching an incoming URL with a server function), and handling HTTP requests and responses. By making XML HTTP Requests (XHRs) or GETs or POSTs from your React.js front end, you can connect to Express.js functions that power your application.

MongoDB is a cross-platform document-based database known as a nonrelational document-orientated database, or NoSQL. Conventional relational databases use a schema design based on tables and columns, however, MongoDB has no such schema. Instead, MongoDB stores data in flexible documents using a query language based on JavaScript Object Notation (JSON). The size, number and content of document fields vary, so the data structure can be altered later on. MongoDB is easy to scale and quite flexible, making it popular among many web developers.

Free resource for learning backend (using Express and MongoDB)

Build Projects

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

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

  • E-commerce website
  • Food Delivery App
  • Social Media App
  • Chat Messaging App
  • Content Management System
  • Blog Site
  • Workout Tracker App
  • Project Management Dashboard
  • Portfolio App

HAPPY LEARNING!