Full Stack Roadmap for Software Developer from beginner to Expert with React and Node at Scale.

Overview

MERN-Stack-2022

Become MERN Full Stack Developer in 6 Months

MERN Stack Batch

Key Features:

  • Build an in-depth understanding of all the full stack concepts.
  • Create your strong social media profile on LinkedIn and GitHub.
  • Build 15+ projects including 5+ Major Projects.
  • Showcase your skills with a portfolio of real projects.
  • Get a chance to face the interviews in different companies hiring Full Stack Engineers.
  • Work on Live projects in parallel to get an understanding of how companies create end-to-end software solutions.

MongoDB‌ ‌|‌ ‌ExpressJS‌ ‌|‌ ‌ReactJS‌ ‌|‌ ‌NodeJS‌ ‌

Full‌ ‌Stack‌ ‌Web‌ ‌Application‌ ‌Development‌ ‌

Technology Stack

  1. HTML
  2. CSS
  3. Bootstrap
  4. JavaScript
  5. 5‌ ‌Minor‌ ‌Projects
  6. ReactJS
  7. Firebase
  8. MongoDB
  9. Node
  10. Express
  11. GIT‌ ‌-‌ ‌version‌ ‌control
  12. 5‌ ‌Major‌ ‌Projects
  13. Deployment

HTML

HTML stands for Hyper Text Markup Language. It is the simplest language in the world as you do not get any errors while working with HTML.

Day 1

Different tags - html, title, body, paragraph, heading 1 to 6, anchor, break row, link, img

Different attributes - style, href, rel, src,

Code is Here

Interview Questions

What is HTML?

How the HTML code compile?

What data structure is used behind the scenes in HTML?

What is HTML parser?

How to add CSS with HTML file?

Day 2

Tags - table, th, td, strong, b, em, span, abbr and title attribute, target attribute anchor tag , download attribute in anchor tag with image and text as well, specify name of the download attribute.
rel attribute in anchor tag

What are absolute and relative URLs?

How to navigate to a specific part of the page? CSS ids

How to use the loading attribute to lazy load images? loading attribute in image tag. Lazy Loading Details

Day 3

How to build a form? tags - submit button, checkbox, radio, date, email, file, number, password, reset, search.

Textarea, select, fieldset, legend.

How to configure a form to comunicate with server with attributes: action, enctypes, method, target.

How to change the design of datetype input field.

How to preview the image with file input type?Here

enctypes -

  • application/x-www-form-urlencoded (the default)
  • multipart/form-data
  • text/plain

How Form submission attributes work.

How to perform client side form validation. using HTML

How to make a button to submit a form.

How to reset a form.

How to structure a web form.

CSS

Day 4

Selector, Class and id , Comment, border, color, background- color, image, repeat, attachment,

Border - style , width, color, shorthand, border-radius

Margin - top, right, bottom, left

Padding -

What is box model?

Universal selector *

Text align - left, center, justify, text-decoration - overline, none, under-line, line-through, text-transform, text-indent

Day 5

CSS link, visited, hover, active

Table - border, width height, text-align, padding, tr:hover, tr:nth-child(even), responsive table

Navigation Bar

Website Layout

Day 6

Mini Project

div, header, section

JavaScript

Day 7

JavaScript - How it works?

How to add it with HTML?

How console works?

What is Document?

how variables work in JS?

Operators

Algorithm based questions

  • 1, 2 , 3, 5, 8, 13, 21, 34
  • sum of even - 10 4m / 2 = sum

Day 8

While loops, Questions, typeof

Loose equality vs strict equality

Day 9

For Loop, do while, arrays

Events

Day 10

functions

Project- Captcha Generator

Day 11

Validations on forms

Day 12

What are local and global variables?

How to create an object in Javascript to hold values?

How this keyword works?

Difference between var and let?

Day 13

Function Statements, Function Expressions

Arrow functions, single line arrow function without return, without arguments, dynamically creating arrow functions

Multi line arrow function with return statement

Day 14

Template Literals

What is Module?

Day 15

Object Literals, Object class, Function constructor and new keyword.

Day 16

JavaScript Project - Speech Recognition

Day 17

CSS transitions, vendor prefixes for cross browser support wih WebKit.

Property compatibility

Create your own transition timing function

Day 18

JavaScript Array object, different types of array representations.

Methods for stack and queue operations, push pop shift unshift.

Array with for loop, for in , for of,

Multidimensional array

Other important methods: - splice, slice, concat, foreach, indexOf, lastIndexOf, includes, find, filter, reverse, split, join

Array.isArray

Day 19

JavaScript String, Single and dobule quotes, backticks.

Special characters: new line character, length,

Strings are immutable

String methods: charAt, toUpperCase, toLowerCase, indexOf, includes, startsWith, endsWidth, slice, substring, substr

Bitwise not ~

NodeJS

Day 20

Node JS - VM (V8 / Chakra)

Why Node?

which node, which npm, which npx

// Modern JS test
(async (a = 1, ...b) => ({ ...b, a, [a]: `${a}` }))()

// New Promise APIs
util.promisify
require('fs').promises

What is RELP? Node.js Read-Eval-Print-Loop (REPL)

Node Hello World.

Common JS (module formatting system)
- require and module.exports

ES6
- import and export

Day 21

NPM - Node Package Manager

Semantic Versioning Calculator

What is npm install and init?

Package.json vs package-lock.json

Creating and publishing your own npm package.

Day 22

MERN authantication project Node and express Server setup

Process object

Used packages:

"dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.2",
    "concurrently": "^7.0.0",
    "express": "^4.17.3",
    "is-empty": "^1.2.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.2.8",
    "passport": "^0.5.2",
    "passport-jwt": "^4.0.0",
    "validator": "^13.7.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }

Day 23

MERN authentication Project Models and Validation

Register and Login Validations

User schema model

routes for register user

Day 24

MERN authentication Project

API for register

Day 25

MERN Authentication Project

API for Login, Passport JWT strategy

Postman api testing

Day 26

MERN Authentication Project

React App

Day 27

MERN Authentication Project

React App Navbar component

Day 28

MERN Authentication Project

React App Landing page

Login Page

Day 29

MERN Authentication Project

React App Landing page

Register and Login

ReactJS

Day 30

React Basics

Why React?

CDN - unpkg - React, ReacrDOM and babel

Understanding JSX (JavaScript XML)

  • JSX Elements
  • Comment
  • Rendering JSX
  • Style and className in JSX
  • Injecting data into JSX

Interview Questions

  • What is babel?
  • What is transpiler?
  • What is single page application?
  • What is DOM?
  • What is Virtual DOM?

Day 31

React and Node Setup, create react app

Install these extensions from Visual Studio Code

  • Prettier
  • ESLint
  • Bracket Pair Colorizer
  • ES7 React/Redux/GraphQL/React-Native snippets

create-react-app

  • adding first JSX code with react

Interview Questions

  • What is module?
  • What is package?
  • What is NPM?
  • What is webpack?

Day 32

React and JSX with create-react-app

Create React app

  • add jsx and render the content
  • Inject Data into JSX
  • Add image in the page

Day 33

React Components

JavaScript Function and JavaScript Class

  • Functional Component / Presentational Component / Stateless Component / Dumb Component
  • Class Component / Container Component/ Statefull Component / Smart Component

Rendering React Components

Interview Questions

  • What is React Component?
  • Difference between normal function and arrow function.
  • How to make reusable react components?
  • How small is a React component?
  • What is the difference between a pure JavaScript function and a functional component?

Day 34

React Components with Variables

Creating Hexadecimal color with react

Map function for generating li tag using JSX

Day 35

React Props

Props in functional Components

String Props

Interview Questions

  • What is props in a React component ?
  • How do you access props in a React component ?
  • What data types can we pass as props to components ?

Day 36

React Props

Props objects

  • Different types of props object
  • String, number, boolean, array, object, function, props

Day 37

React Map List Keys

Working of Map function with Numbers, arrays of arrays, arrays of object.

Key mapping,

Interview Questions

  • Why you need to map an array ?
  • Why we need keys during mapping an array ?

Day 38

React Class Components Statefull components

Class Components, props in class components, methods in class components.

Convert all the functional components into class components.

Interview Questions

  • What is inheritance and how do you make a child from a parent class?
  • What is class based React component ?
  • What is the difference between functional React component and class based React component ?
  • When do we need to use class based components instead of functional components

Day 39

React class componenets

Methods in class components

Interview Questions

  • What is the use cases of class based component ?
  • Which type of component do use most frequently ? functional or class-based component

Day 40

React State

Interview Questions

  • What is state in React ?
  • What is the difference between props and state in React ?
  • How do you access state in a React component ?
  • How do you set a set in a React component ?

Day 41

React Folder Structuring, import and export

Interview Questions

  • What is the importance of React Folder Structure and File Naming
  • How do you export file
  • How do you import file
  • Make a component of module and export it as named or default export
  • Make a component or module and import it

Day 42

React Events

  • What is an event?
  • What is the different between an HTML element event and React event?
  • Write at least 4 keyboard events?
  • Write at least 8 mouse events?

Day 43

React Forms, Input fields,

Interview Questions

  • What is the importance of htmlFor?
  • Write an input type which is not given in the example if there is?
  • What is a controlled input?
  • What do you need to write a controlled input?
  • What event type do you use to listen changes on an input field?
  • What is the value of a checked checkbox?
  • When do you use onChange, onBlur, onSubmit?
  • What is the purpose of writing e.preventDefault() inside the submit handler method?
  • How do you bind data in React? The first input field example is data binding in React.

Day 44

React form validations

  • What is validation?
  • What is the event type you use to listen when an input changes?
  • What are event types do you use to validate an input?

Day 45

React Project

Building a markdown Editor

Day 46

MERN Major project

Ecommerce SaaS product

All the code will be available on other Repo

  • intial project setup
  • react-router-som
  • Creating routes using switch route
  • Home, Login, Register

Day 47

MERN Major project

Ecommerce SaaS product

  • bootstrap material design
  • ant design
  • menu component code
  • ant design css

Day 48

Ecommerce SaaS product

  • Change icons and align to left and right
  • it should be selected when we click the buttons
  • Add react react router link for corresponding pages
  • Firebase google account
  • Create a project in firebase
  • copy code for javascript and paste it in a new file in src called firebase.js

Day 49

Ecommerce SaaS Product

  • Creating a registration form
  • firebase auth signin email
  • react tostify
  • firebase authentication for google and email
  • promises
  • await and async

Day 50

Ecommerce SaaS Product

  • Complete registration page

Solved the error in firebase configuration

Day 51

Ecommerce SaaS Product

  • Registation complete through email verification link
  • Authenticate user with password as well.
  • Store email in local storage and get it for complete registration

Day 52

Ecommerce SaaS Product

  • Update password
  • Redux installation for Global State change

redux, react-redux, redux-devtools-extension

redux-devtool extension for chrome

  • Creating reducer seperately

Day 53

Ecommerce SaaS Product

  • Logout Functionaly
  • State in redux

Day 54

Ecommerce SaaS Product

  • Login Page

Day 55

Ecommerce SaaS Product

  • Login With google
  • Conditional login and logout for dashboard.
  • Forgot password
  • conditional redirect

Day 56

Ecommerce SaaS Product

  • setup backend node server

  • install packages

  • express - for backend server

  • body-parser - to parse the JSON data to javascript so that server can communicate with client with JSON data

  • mongoose - its a middleman to connect with mongoDB

  • cors - to avoid the Cross Origin Resourse Sharing, error occurs due to different domain or different origins.

  • morgan - it simply prints the url.

  • express-jwt - it will help us verify the json web token

  • firebase-admin - to send the token to firebase so that we can verify

  • jsonwebtoken - to deal with web tokens

  • nodemon - to continues run the server

  • dotenv - to load variables from the env file

  • create server file and first api

Day 57

Ecommerce SaaS product

  • setup database mongodb atlus
  • create routes
  • using filesystem for every route and apply them as middleware

Day 58

Ecommerce SaaS product

  • create controllers for every routes
  • Create a user schema
  • setup firebase-admin
You might also like...
React frontend + Node API source code for for the minting website for the Ninja Developer Hacking Squad's NFT collection
React frontend + Node API source code for for the minting website for the Ninja Developer Hacking Squad's NFT collection

React frontend + Node API source code for for the minting website for the Ninja Developer Hacking Squad's NFT collection

Mis-your-index is an open-source mis software based on React.js and python web framework Flask
Mis-your-index is an open-source mis software based on React.js and python web framework Flask

Mis-your-index is an open-source mis software based on React.js and python web framework Flask

为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件 / Words learning and English muscle memory training software designed for keyboard workers
为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件 / Words learning and English muscle memory training software designed for keyboard workers

Qwerty Learner English 为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件 📸 在线访问 Vercel: https://qwerty.kaiyi.cool/ , https://qwerty-learner.vercel.app/ GitHub Pages: https://

Tensor EMR is a web based Open Source Electronic Medical Record software application
Tensor EMR is a web based Open Source Electronic Medical Record software application

Tensor EMR is a web based Open Source Electronic Medical Record software application. It features patient registration, patient chart management, appointment & scheduling, queue management, eRx, and more.

Proyecto de software para administración de gimnasios.
Proyecto de software para administración de gimnasios.

GymNew Proyecto de software para administración de gimnasios. Screenshot Installation Una pequeña introducción sobre la instalación. $ git clone https

E-commerce Web App for audio products. A full-stack project, using Nodejs and Express in the backend, MongoDB as database, React, and Redux on the front-end.

E-commerce Web App for audio products. A full-stack project, using Nodejs and Express in the backend, MongoDB as database, React, and Redux on the front-end.

A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powered by RAWG API.
A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powered by RAWG API.

Game Store Monorepo A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powe

To Clarify - a full stack MERN web application designed to help freelance web developers keep workflow organized and to establish clarity and transparency with clients
To Clarify - a full stack MERN web application designed to help freelance web developers keep workflow organized and to establish clarity and transparency with clients

To Clarify - a full stack MERN web application designed to help freelance web developers keep workflow organized and to establish clarity and transparency with clients

Build a Full Stack Marketplace on Ethereum with React, Solidity, Hardhat, and Ethers.js
Build a Full Stack Marketplace on Ethereum with React, Solidity, Hardhat, and Ethers.js

Building a Digital Marketplace on Ethereum The technologies used in this workshop are React, Next.js, Tailwind CSS, HardHat, Solidity, and Ethers. Get

Owner
Himanshu Ramchandani
Data Science Consultant | Mentor | Python at Scale | MERN Stack Engineer
Himanshu Ramchandani
A beginner tictactoe 2 player game made in React

Nano React App Default Javascript Template The default template project for nano-react-app. npm start — This will spawn a development server with a de

Binaya Bajracharya 4 May 20, 2022
WunderGraph is the Next-Generation API Developer Platform with a focus on Developer Experience.

WunderGraph is the Next-Generation API Developer Platform with a focus on Developer Experience.

WunderGraph 852 Dec 30, 2022
A full E-Commerce Full Stack Amazon Clone which built using ReactJS. You can register, sign in and shop!

Amazon Clone with ReactJS In this Amazon Clone application you can register on the site, log in with your account, shop, pay for the products and see

Mert Çankaya 15 Jul 7, 2022
A Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality!!

A Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality!!

Özge Coşkun Gürsucu 50 Oct 3, 2022
A Responsive Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality

A Responsive Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality including user register, user login, user authentication, shop cart management, order management, and payment using Stripe, etc.

Mostafa Habib 3 Aug 18, 2022
Instagram MERN - Full-Stack Instgram Clone using MERN Stack and Socket.io

Instagram MERN Full-Stack Instgram Clone using MERN Stack and Socket.io Visit Now ?? ??️ Tech Stack Frontend: Backend: Realtime Communication: Cloud S

Jigar Sable 327 Jan 4, 2023
A full stack application of a personal wallet made with React, Node and MongoDB

The frontend of a full stack application of a personal wallet made with React, Node and MongoDB that allows you to add inputs, outputs and see all your extract.

Bernardo Rodrigues 5 Jun 2, 2022
A full stack task manager application built with node, react,mongodb,and mantine.

A full stack task manager application built with node, react,mongodb,and mantine.

Rajan 1 Mar 12, 2022
Full Stack e-commerce app built with Express, Node.js, MySQL and React

Auction Point Auction Point is a website where users can buy and sell items. My aim with this Full Stack project was the design and development of an

Themis Valtinos 7 Dec 29, 2022
A social media Full Stack Application using React, Node.js

PinShare This is a Full Stack Application using React, Node.js, sanity the app is called PinShare and it is a simple social media app that allows user

Ravi Singh 6 Sep 3, 2022