mern stack developer roadmap free

rajneesh

rajneesh

21 min read

  • react
MERN-STACK-ROADMAP-FOR-FREE

are you looking for a roadmap to master MERN stack, all for free? If you properly follow the road map that I am telling you, then with in six months you will completely master the react js, node js, mongodb and express with advance projects.The roadmap I am providing you that is same road map that I followed. Moreover, many of my friends also followed the same road map. That's why I guarantee you that if you follow this roadmap, You will never have any problems during building an advanced mern project.

What is the MERN stack?

Before learning MERN, let us see what is the full form of MERN is (mongodb,express,react js and node js). In MERN stack we learn different different technology. Like react js which is a frontend library. node js which is a run time environment that helps in running JavaScript on the server side. mongodb as a database. Express Which we use to create REST API.

  1. MongoDB: it is NOSql database which stores data in flexible, JSON-like documents and its free of cost.

  2. Express.js: Express is a minimal and flexible Node.js web application framework. Express provides a thin layer of fundamental web application features, without obscuring Node js. It simplify the routing, middleware creation, and handling HTTP requests.

  3. React: it is a frontend JavaScript library developed by Facebook. it use for building a user interfaces which is dynamic and interactive components that update efficiently as data changes.

  4. Node.js: Node.jsĀ® is a free, open-source, cross-platform JavaScript runtime environment that allows JavaScript to be run on the server side. its enables the use of JavaScript for backend development also build scalable and high-performance web applications.

let start the roadmap

step 1:build the base šŸ˜…

To learn MERN stack, our basic fundamentals must be clear, that's why we start from the beginning.

first we start with HTML and CSS. i am not want to waste your time by telling you that the full form of HTML is Hypertext Markup Language and the full form of CSS is Cascading Style Sheets. I provided you a link. It teaches you complete basic to advanced HTML. You have to complete this video within 2 days. after than I have also provided you a video of Basic to Advanced CSS. You also have to complete that within 4 days. With this two videos you will cover all the important topics of

HTML AND CSS

HTML and CSS. for example:-

CSS topic cover on that video is:-

STEP 2:LET LEARN JAVASCRIPT

Now you have covered all the topics of HTML and CSS. Now you have to practice by creating a mini projects.

first of all create facebook and instrgram ui clone with html and css after that we start learning javascript.

I have also provided you a YouTube playlist to learn JavaScript.Every topic of is covered in this javascript playlist. i will explain some of the topics in this blog. i will recommend you to please first watch whole playlist.if you do not like to watch video than you can follow this article for learning.

Variables

Variables are Containers for Storing data. in javascript variables are declare by three method let const and var. var is currently not used because of this scope is global .for full detail must watch video playlist.

Functions

JavaScript functions allow you to encapsulate the coding block and execute it whenever needed.

you can define a function using the function keyword. example:-


function greet(name){
 console.log(`Hello, ${name}!`);
 } 
// Calling the function greet('John');
 // Output: Hello, John!

Objects & Arrays

An array is a special variable, which store more than one value is a linear collection where can be accessed by the their index (which start from 0).

it can by created by square brackets [].

example:-

let numbers = [1, 2, 3, 4, 5];
 let fruits = ['apple', 'banana', 'orange'];
 let multiType = [1, 'hello', true, { key: 'value' }];

Objects are variables too. But objects can contain key-value pairs, where each key (also called a property) which maps to a value.

you can create object by curly braces {} .

let person = {
 name: 'John',
 age: 30,
 isStudent: false,
 hobbies: ['reading', 'gaming'],
 address: { city: 'New York', country: 'USA' } 
};

If/else Statements, Switch Statements

it is know as conditional statements we can use this method to create a code block specifier which execute when condition is true other wise else block is executed we can also add else if block for more conditions. example:-

if (condition) {
    //when condition is true
} else {
    //when condition is false
}

A switch statement provides a way to execute different code blocks based on different cases.

switch (expression) {
    case value1:
        // when expression match the value1 than this code execute
        break;
    case value2:
        // when expression match the value2 than this code execute
        break;
    ...
    default:
        // when no expression match than this block runs
}

Callbacks/Promises/Async Await

Callbacks are a traditional way of managing asynchronous operations in JavaScript.A callback is a function passed as an argument to another function.

example:-

function fetchData(callback) {
    setTimeout(() => {
        const data = 'Some asynchronous data';
        callback(data);
    }, 2000);
}

function processData(data) {
    console.log('Processing data:', data);
}

fetchData(processData);

Promises provide a more structured and composable way to work with asynchronous operations. A Promise represents a value that may be available now, in the future, or never. It has three states: pending, fulfilled, or rejected.

example:-

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = 'Some asynchronous data';
            if (data) {
                resolve(data); // Fulfill the promise
            } else {
                reject('Data not available'); // Reject the promise
            }
        }, 2000);
    });
}

fetchData()
    .then((data) => {
        console.log('Received data:', data);
    })
    .catch((error) => {
        console.error('Error fetching data:', error);
    });

async functions and await expressions provide a more readable and concise way to work with Promises and asynchronous code. An async function returns a Promise, and await is used to wait for the resolution of a Promise inside an async function.

example:-

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = 'Some asynchronous data';
            if (data) {
                resolve(data); // Fulfill the promise
            } else {
                reject('Data not available'); // Reject the promise
            }
        }, 2000);
    });
}

async function processData() {
    try {
        const data = await fetchData();
        console.log('Received data:', data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

processData();

Practice by marking projects

  • Countdown Timer

  • Quiz App

  • Recipe App

  • Notes App

  • ToDo App

  • Movies App

  • Drawing App

  • Password Generator

  • Weather App

know your base is created for a web developer it will take around i month to complete all of this with projects

STEP 3:Get Familiar with React

for react js i also provide a one short youtube video. you need to complete that video with in the 3 days .i am going to explain some of the topics that video in this article. we start with knowing that what is react js.

React is a JavaScript library created by facebook. its is a open-source library for building user interfaces (UI) and single-page applications (SPAs). React js focuses on providing a component-based approach for UI development and its very helpfull for making interactive and reusable UI components.

Key Concepts of React

  1. Component-Based Architecture: React js use a component-based architecture where UI is broken down into reusable, self-contained components. Each component manages their own state and combines together to build complex UI.

  2. Virtual DOM (Document Object Model): React utilizes a virtual DOM to efficiently update the browser's DOM. When data changes, React compares the virtual DOM with the previous state and only updates the parts of the actual DOM that have changed, resulting in better performance.

  3. Declarative Programming: React promotes declarative programming, where developers describe the desired UI state and React takes care of updating the DOM to match that state. This simplifies the development process and improves code readability.

  4. JSX (JavaScript XML): JSX allows us to write HTML elements in JavaScript. JSX makes it easier to define UI components and their structure.

Components

a component is a section of reusable jsx code it's HTML like code that can contain JavaScript. each component mange their own state. you can use either functional base components or class components. but class base components currently not prefers by the developers and react team also has discontinue the use class base components.

  • Functional Components:

const MyComponent = () => {
 return <div>Hello, React!</div>; 
};

  • Class Components:

    class MyComponent extends React.Component {
 render() { 
    return <div>Hello, React!</div>; 
   } 
}

JSX (JavaScript XML)

React uses JSX, a syntax extension to JavaScript that allows developers to write HTML-like code directly within JavaScript.

const element = <h1>Hello, World!</h1>;

Props (Properties)

props are ready-only properties they are shared between components. a parent component can send data to a child component when you include a component within a parent you can send that that child component key value pairs.

example:-

const Greeting = (props) => {
    return <div>Hello, {props.name}!</div>;
};

// Usage
<Greeting name="John" />;

ReactJS Hooks:

a react Hook is a special function that allows functional components to use react features without writing class components this was a change made in react version 16.8 basically we no longer need to write class components we can write function-based components that use react hooks to use react features there are many react hooks if a function begins with use it's probably a react hook use State use effect use context use reducer use callback and many more.

useState :- a react hook that allows the creation of a stateful variable and a Setter function to update its value in the virtual Dom basically by using the usestate hook we can create not just a variable but a stateful variable when you update this variable that change will be reflected in the virtual dom.

import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);

    const increment = () => {
        setCount(count + 1);
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
};

Event Handling

This is how you tell a component to do something when a user interacts with it, like clicking a button or entering text in a form.

Example: Setting up an event handler so that when a user clicks a 'submit' button, it sends their information to the server.

Conditional Rendering

conditional rendering allows you to control what gets rendered in your application based on certain conditions by utilizing conditional rendering we can show hide or change components here's an example:-

import React from 'react';

const ConditionalComponent = ({ isLoggedIn }) => {
    if (isLoggedIn) {
        return <p>Welcome, user!</p>;
    } else {
        return <p>Please log in to continue.</p>;
    }
};

export default ConditionalComponent;

if isLoggedIn is true than its render "welcome, user" else "please log in to continue"

STEP 4: Understand REST API's and how a backend server works using Express/Node

i again providing you a complete node js youtube course. where you can learn basic to advance about rest api , backend servers ,express ,node js and database. after watch this complete youtube playlist you will Covered the 60% of your learning follow my instruction you will become the master in mern stack. know i my going to explain you some of the topic of this playlist.

Node JS:

a brief overview of node.js and let's try to answer some of the basic questions related to node.js for example what is node.js and why do we need it what is the advantage of using node.js over other Technologies and where should we use node.js and where not so let's answer these questions in this lecture the official definition of node.js says that node.js is a JavaScript runtime built on Google's open source V8 engine in this definition there are two points to highlight the first point is that node.js is a JavaScript runtime environment and the second point is it uses Google's V8 engine now you must have used JavaScript before and you have probably used it inside a browser any browser natively understands HTML CSS and JavaScript and no matter if you write vanilla JavaScript or some JavaScript framework like reactor angular code that's all just JavaScript that gets executed inside a browser by the browser so in this case the browser is then the JavaScript runtime because here browser provides all the tools and libraries to execute and run JavaScript code for example when we use JavaScript in browser browser also provides us some api like fetch API or get element by ID function query selector function or even console.log function so we are able to use these api and functions in our JavaScript code when we run JavaScript in the browser because browser is the one which provides these functions and api and we make use of these functions and api from our JavaScript code now before 2009 JavaScript was only capable of running inside a browser there was no way to run a JavaScript program outside of the browser environment and in every browser there is a JavaScript engine which is responsible for executing the JavaScript code JavaScript engine is a tool which is required by browsers to execute and run JavaScript code every browser has their own JavaScript engine for example Firefox uses spider monkey Microsoft Edge uses chakra in the same way the JavaScript engine of Google Chrome is called as V8 engine so this V8 engine is the one which is responsible for executing the JavaScript program in the Chrome browser so before 2009 it was not possible to execute a JavaScript program outside of the browser but in 2009 a programmer named as Ryan Dahl the creator of node.js came out with a brilliant idea he thought it would be great to execute JavaScript outside of the browser and to make this possible he took Google's V8 engine which is the fasted JavaScript engine out there and embedded it inside a c plus program and he called it as node.js so similar to a browser node.js is a runtime environment for executing JavaScript code and it contains a JavaScript engine which can execute a JavaScript code and that JavaScript engine is the V8 engine and that's why we say node. js is a JavaScript runtime which is built on Google's V8 JavaScript engine and node.js also has certain apis which provides an environment for the JavaScript code in node.js and these apis are different from the apis we have in the browser so in the browser the browser provides us some apis and functions in the same way node. js also provides us some apis some modules and we can use these modules in our node.js program so in short node.js is a program that includes the V8 JavaScript engine and some additional apis that gives us capability to run JavaScript outside of the browser and now that we have JavaScript outside of the browser in a kind of Standalone environment which is node. js we can do so many things with JavaScript which were completely impossible before for example accessing the file system or better Network capabilities are now possible with node.js and all these factors together gives us the perfect condition for using node.js as a server-side language meaning now we can finally use JavaScript on the server side of web development in order to build fast highly scalable Network application for powering the backend of a website.

Express JS:

express.js is a free and open source web application framework for node.js Express is a minimal and flexible node.js web application framework that provides a robust set of features for web and mobile application development in simple words we can say that Express helps us develop node.js application by writing minimum node.js code it simplifies complex node.js codes with simple one or two line of codes so Express is a node.js framework this means that express.js provides some built-in classes and functions which we can use while developing a web application and we can write complex functionalities with simple one or two line of code without Express if we try to write the same functionality with core node.js the number of line of code can be large and we as a developer will have to write some complex Logics to achieve the same thing but with express it can be done with few line of codes and the complexity of the code is taken away by Express as the functionality is already defined by this framework.

  • Routing refers to how an applicationā€™s endpoints (URIs) respond to client requests.

  • Middleware: Middleware functions are functions that have access to the request object (req), the response object (res), and the next function in the applicationā€™s request-response cycle. The next function is a function in the Express router which, when invoked, executes the middleware succeeding the current middleware.

RESTful API:

api is a broad term that is used for any two programs communicating but this video is about a specific kind of api known as a representational state transfer or by its street name as rest which is an architectural style designed to guide the development of the world wide web now when you hear the term rest think stateless meaning it carries no information that could change over time instead you're dealing with representations of the data that you may have received from a database or from the client and that is because the state has been transferred over from the server to the client so how the rest api would work is if somebody wanted to make a post on a social media app then they would send out a request to the rest api and the rest api would post it into the database now this request when it gets sent out it will be broken up into three different parts the first is the request line and it will be carrying information such as the protocol that is being used and in this case it is http it will also contain the route that you want to connect to and even the http method which in this case it is post now there are plenty of http methods out there and they're just ways of telling the server what are the actions the user wants to make some of the most common ones would be get post patch and delete post means you want to create something get means read patch means update and delete means destroy and you may have noticed that together they make the crud operations so there are plenty of other http methods.

Backend Server:

The backend receives requests from a client, and then it generates and responses back to the client Just like the frontend, the backend has three different parts. server, application, and database The server is the computer that receives requests from a client And this computer runs an application that contains logic about how to respond to different requests The database is where all the information is stored The application accesses this database to get all the information that it needs and then generate appropriate responses for the client A client and a server communicate with each other using an API which stands for Application Programming Interface API contains the information about how a client should make a request and how the server must respond to the specific request It contains information like endpoint and data formats that the server and client must follow.

4. Storing data with MongoDB and Mongoose:

MongoDB:

it is a document oriented nosql database it was initially released in august 27 2009.mongodb replaces the concept of rows of conventional relational data models with something called as documents it offers developers the flexibility to work with evolving data models since it's document based mongodb allows embedded documents arrays and represents complex hierarchical relationships using a single record it is also schema free which means that the keys defined in the document are not fixed as a result massive data migrations can be ruled out.

Mongoose:

Mongoose is an object data modeling library for MongoDB and not Ria's providing a higher level of abstraction so it's a bit like the relationship between Express and node so Express is a layer of abstraction over regular node while Mongoose is a layer of abstraction over the regular MongoDB driver.

the features mongoose gives us is schemas to model or data and relationship easy data validation a simple query API middleware and much more so in Mongoose a schema is where we model or data so where we describe the structure of the data default values and validation we then take that schema and create a model out of it and the model is basically a wrapper around the schema which allows us to actually interface with the database in order to create delete update and read documents all right so this was just a very quick introduction.

STEP 5: Using Git

know learn github for save you data online and version control. for this i am not providing any recourse because making your research ability better ever coding having good information gathering skill.

STEP 6: start Practice

for practicing all the mern concept you need to practice 5 type of project i am going to providing you best resource for making that projects but first try with your self if you getting difficulty then you can see that project resource. before making project one time you can see that resource. and rest of learning while creating project.

ecommerce website :- with this project you can completed practice all the topic related to mern as a bonus you can learn my frameworks and library like bootstrap, react router dom or many more.

after completing all projects you can master everything about mern and as well as advanced frameworks and library which blow your skill of full stack web developer.

conclusion

completing this roadmap if you thing its helpful for you then you can like this post and also follow me on this site.

and please share this post with your friends who wants to learn the mern stack like a professional coder.

rajneesh

rajneesh

Creative, Elegant and Visionary

Latest

from the blog

The latest industry news,interviews and resources

Python's One-Line if else Magic

Python's One-Line if else Magic

Python's One-Line if else Magic

Best Alternatives to Adobe's Generative Fill AI Free

Best Alternatives to Adobe's Generative Fill AI Free

Fill for free online which enhance and boost your design works

Join our newsletter

we'll send you a nice letter once per week. No spam.

Features
Enterprise
Pricing
Developers
Company
Sign in
About us
Press
News
Careers
Media Kit
Contact
Docs
Blog
eBooks
Webinars
Forum
API
Facebook
Twitter
LinkedIn
Instagram
YouTube
GitHub
Startups
Enterprise
Government
SaaS
Marketplace
Ecormmerce
Privacy
Terms
Disclaimer
About
Settings
Contact
BiyondBytes

Ā© 2024 BiyondBytes. All rights reserved.