MERN Stack Developer roadmap!
MERN stands for:
"MongoDB, Express.js, React.js, and Node.js."
What is a stack?
A “stack” refers to any combination of programming languages and technologies or a combination of software products.
Few things need to consider for before choosing stack your project:
- Know your requirements
- agility
- Expertise and knowledge of a team
- Flexibility & scalability of the development team
- The final development cost
MERN stack is a popular and powerful stack to work in.
MongoDB: A document-based open source DB
Express: A Fast, minimalist web framework for Node.js
React A JS front-end library for building UI.
Node.js: It brings JavaScript to the server
1- Introduction to JavaScript
- What is JavaScript?
- What is the ECMA Script?
- JS vs. Other Static Languages
- Setting up Dev Environment
- JS Advantages And Disadvantages
- JS Data Types – Primitive & Non-Primitive
- Variables and Statements: var, let, const keywords
2- JavaScript Data Types and Operators
- Numbers
- Math Object
- Boolean
- Null and Undefined
- Operators
- Operators Precedence
3- JavaScript Functions, Scope, and Prototypes
- JavaScript Functions
- Function Parameters
- Advanced Function
- Scope
- Hoisting
- Prototypes
4- ES6: Object-Oriented JavaScript
- Objects
- Object Properties
- ES5 Classes
- ES6 Classes
- Class Members and Methods
- Prototype and Class
- Inheritance
5- JavaScript Advanced Concepts: Module, Promises, and Ajax
- JavaScript Modules
- CommonJS, AMD and UMD
- ES6 Modules
- Promises
- Async/Await
- AJAX
- AJAX Advantages & Disadvantages
6- Introduction to Node.js
- Intro to Node.js
- Why Server-side JavaScript?
- Node.js Architecture
- JS Event Loop
- Node.js Application Area
- Advantages of Node.js
- Limitations of Node.js
- Node.js Application Deployment Server
7- Node.js Fundamentals
- Node CLI
- Module
- Callback
- NPM and NPM CLI
- Local packages and Global packages
- Buffers
- Streams
- Events and Event Emitters
- File System
- Path Modules
8- Express.js Fundamentals
- Introduction to Express
- Routing
- Nodemon
- Router Class
- View Engine
- Express Generator
- Handlebars
- Middleware
- Express Request Processing
9- Introduction to MongoDB
- What is NoSQL Database?
- Types of NoSQL Database
- Introduction to MongoDB
- Why MongoDB?
- MongoDB Advantages and Limitations
- MongoDB Installation and Configuration
- MongoDB: Hierarchical Objects
- Mongo Shell
10- Working with MongoDB
- Data Types
- Collections and Capped Collection
- Documents
- MongoDB CRUD Operations
- Querying Collections
- Schema Validations
- Indexes
- Find document(s) and Perform Operations
11- MongoDB Advanced Concepts
- Data Modeling
- Embedded Document
- Reference Document
- Model Relationships
- Aggregation
- Map-reduce
- Data Import/Export
- Database Backup/Restore
12- Building REST API Using Express, MongoDB
- Express Project Architecture
- Setting Up Project
- Defining Models and Relationships using Mongoose
- Repository Design Patterns
- Async and Await
- Defining Controllers and Routes
- Performing CRUD Operations
13- Introduction to React: Getting Started
- Introduction to React
- React Top-Level APIs
- React CLI
- JavaScript XML (JSX)
- JSX Transpiler: Babel
- Top-Level SX Fundamentals
14- React Fundamentals
- Introduction to React Component
- Types of React Components
- Props
- State
- Data Binding
- Events in React
15- React Routing
- React Router Basics
- NavLink and Link
- React Routes
- Route Parameters
- Routing with Login and Logout State
- Nested Routes
- Lazy Loading
16- React Advanced Concepts
- React Components Inheritance
- React Components Composition
- Passing Data to Child Components
- Component Life Cycle
- React Hooks
- State and useEffect Hooks
17- React Forms and Validations
- Introduction to React Forms
- Controlled Form
- Uncontrolled Form
- Creating React Form
- React Form Validations
- Custom Validations
18- MERN Stack App with CRUD Operations
- MERN Stack App Structure
- Setting Up Project
- Configuring Frontend Using React
- Configuring Routing using React Router
- Defining API Client using Axios
- Performing CRUD Operations
- Deployment
19- React Unit Testing
- Introduction to Unit Testing
- React Jest Test Setup
- Unit Testing Enzyme
- Simulate Event
- Testing Component
20- React State Management Using Redux
- Intro to Redux
- When to Use Redux?
- Intro to React Redux
- Setting Up React App with React-Redux
- Redux Flow
- Creating Actions, Reducers, & Store
- Connecting React Components to Store
Top 5 Online Courses to Learn MERN Stack in more depth 👇
💻 Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL)
Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL)
💻 MERN Stack Front To Back: Full Stack React, Redux & Node.js
Created by Traversy Media
💻 The MERN Fullstack Guide By Maximilian Schwarzmüller
React, NodeJS, Express & MongoDB — The MERN Fullstack Guide
💻 Full-Stack Web Development with React Specialization
This course is offered by the hong kong university of science and technology and instructed by its professor, Jogesh K. Muppala.
Full-Stack Web Development with React Specialization
💻 MERN Stack Master Course - Building your own Instagram
MERN Stack Master Course - Building your own Instagram
That’s all for today about the MERN stack roadmap.
There is a high demand for MERN stack developers in the web development community.
Happy Coding. Hope you find this useful.
Please share your feedback.