Roadmap for MERN Stack Developer

Learn all the concept below :

HTML :

• Architecture of a website -Different technologies in making the website
• Web Development Introduction
• HTML Document structure
• HTML Comments
• HTML Basic Tags
• HTML Formatting Tags
• HTML Color Coding
• HTML Tag vs. Element
• HTML Attributes
• Div and Span Tags for Grouping
• Image and Image Mapping
• HTML Lists ( ordered list , unordered list and definition list )
• HTML Table tags
• HTML Form tags ( input , textarea etc )
• HTML media tags

CSS :

• CSS Introduction
• CSS Comments
• Selectors ( including Advanced selector )
• CSS units ( pixel , percentage ,em , rem )
• CSS Box - model
• CSS Styling properties
• CSS Colors ( Hexcode , rgb color code )
• CSS Text formatting
• CSS Display Properities ( flex , block , inline )
• CSS Pseudo Classes
• CSS Position properties ( static , relative , absolute and fixed )
• CSS Animations
• CSS Media Query

Javascript :

• What is Javascript,
• JavaScript history,
• Relation between JavaScript and ECMAScript,
• Versions of JavaScript.
• General overview of server-side JavaScript
• JavaScript in Web browser Embedding JavaScript in HTML, Execution of JavaScript code.
• Syntax, Variables, Values, Data Types Syntax review, Keywords and reserwed words, Variable declaration, Variable scope, Block scope.
• Data Types Primitive values, Reference values,Types, Type convertion.

• Expressions and Operators Expressions (arithmetic, relational, logical, assigment and others), Operators overview.

• Control structures Flow control and conditionals, Loops and iteration. Jumps

• Error handling Throwing errors, Error handling.

• Numbers Number literals, Number object, Number methods, Math object Date object Working with Numbers. Strings String literals, String object, String methods, Working with Strings.
• Arrays Creating and populating Arrays, Array methods, Working with Arrays.
• Functions Defining functions, Calling functions, Functions as values, Arguments and parameters, Function scope, Closures, Arrow functions.
• Indexed Collections Set object type Map object type
• JSON
• Iterators and generators Working with Iterators Working with Generators
• Modules
• Promises
• Regular Expressions Creating regular expressions, RegExp object and its methods, String methods for matching patterns.
• Objects Creating object, Properties, Methods, Build-in JavaScript objects.

• Prototype based Object Oriented Programming Defining Constructors, Prototypes, Inheritance,

• The window object,Dialog boxes, Timers, The location object, The navigator object, Browsing history

• Document Object Model, Document structure, Selecting document elements and query selectors, Moving thorough DOM tree, HTML elements and attributes, Creating, changing and deleting nodes.

• Handling Events, Event propagation, Event handlers registering and invocation, Event object, Types of event.
• Ajax JavaScript and HTTP communication, Synchronous and asynchronous requests.

Bootstrap :

• OVERVIEW OF BOOTSTRAP
  1. Introduction of Bootstrap
  2. Syntax of Bootstrap
  3. Container and Container-fluid
  4. Connectivity of Bootstrap in page
• Bootstrap Component
  1. Jumbotron
  2. Button
  3. Grid
  4. Table
  5. Form
  6. Alert
  7. Wells
  8. Badge and label
  9. Panels
  10. Pagination
  11. Pager
  12. Image
  13. Glyphicon
  14. Carousel
  15. Progress Bar
  16. List Group
  17. Dropdown
  18. Collapse

React :

• Introduction to React
  1. What is React?
  2. Why React?
  3. React version history
  4. React 16 vs React 15
  5. Just React – Hello World
  6. Using create-react-app
  7. Anatomy of react project
  8. Running the app
  9. Debugging first react app
• Templating using JSX
  1. Working with React. createElement
  2. Expressions
  3. Using logical operators
  4. Specifying attributes
  5. Specifying children
  6. Fragments
• About Components
  1. Significance of component architecture
  2. Types of components
  3. Functional
  4. Class based
  5. Pure
  6. Component Composition
• Working with state and props
  1. What is state and it significance
  2. Read state and set state
  3. Passing data to component using props
  4. Validating props using propTypes
  5. Supplying default values to props using defaultProps
• Rendering lists
  1. Using react key prop
  2. Using map function to iterate on arrays to generate elements
• Event handling in React
  1. Understanding React event system
  2. Understanding Synthetic event
  3. Passing arguments to event handlers
• Understanding component lifecycle and handling errors
  1. Understand the lifecycle methods
  2. Handle errors using error boundaries
• Working with forms</str
  1. Controlled components
  2. Uncontrolled components
  3. Understand the significance to default Value prop
  4. Using react ref prop to get access to DOM element
• Context
  1. What is context
  2. When to use context
  3. Create Context
  4. Context.Provider
  5. Context.Consumer
  6. Reading context in class
• Code-Splitting
  1. What is code splitting
  2. Why do you need code splitting
  3. React.lazy
  4. Suspense
  5. Route-based code splitting
• Hooks
  1. What are hooks
  2. Why do you need hooks
  3. Different types of hooks
  4. Using state and effect hooks
  5. Rules of hooks
• Routing with react router
  1. Setting up react router
  2. Understand routing in single page applications
  3. Working with BrowserRouter and HashRouter components
  4. Configuring route with Route component
  5. Using Switch component to define routing rules
  6. Making routes dynamic using route params
  7. Working with nested routes
  8. Navigating to pages using Link and NavLink component
  9. Redirect routes using Redirect Component
  10. Using Prompt component to get consent of user for navigation
  11. Path less Route to handle failed matches
• Just Redux
  1. What is redux
  2. Why redux
  3. Redux principles
  4. Install and setup redux
  5. Creating actions, reducer and store
• Immutable.js
  1. What is Immutable.js?
  2. Immutable collections
  3. Lists
  4. Maps
  5. Sets
• React Redux
  1. What is React Redux
  2. Why React Redux
  3. Install and setup
  4. Presentational vs Container components
  5. Understand high order component
  6. Understanding mapStateToProps and mapDispatchtToProps usage
• Redux middleware
  1. Why redux middleware
  2. Available redux middleware choices
  3. What is redux saga
  4. Install and setup redux saga
  5. Working with Saga helpers
  6. Sagas vs promises
• Unit Testing
  1. Understand the significance of unit testing
  2. Understand unit testing jargon and tools
  3. Unit testing react components with Jest
  4. Unit testing react components with enzyme
• Webpack Primer
  1. What is webpack
  2. Why webpack
  3. Install and setup webpack
  4. Working with webpack configuration file
  5. Working with loaders
  6. Working with plugins
  7. Setting up Hot Module Replacement
• Isomorphic React
  1. What is server-side rendering (SSR)?
  2. Why SSR
  3. Working with render To String and render To StaticMarkup methods

NODE JS | EXPRESS JS | MONGODB :

• Fundamentals of Node.js, core modules, and NPM (Node Package Manager)

• How Node.js works behind the scenes: event loop, blocking vs non-blocking code, event-driven architecture, streams, modules, etc.

• Fundamentals of Express (Node.js framework): routing, middleware, sending responses, etc.

• RESTful API design and development with advanced features: filtering, sorting, aliasing, pagination

• Server-side website rendering (HTML) with Pug templates

• CRUD operations with MongoDB database locally and on the Atlas platform (in the cloud)

• Advanced MongoDB: geospatial queries, aggregation pipeline, and operators

• Fundamentals of Mongoose (MongoDB JS driver): Data models, CRUD operations, data validation, and middleware

• Advanced Mongoose features: modeling geospatial data, populates, virtual populates, indexes, etc.

• Using the MVC (Model-View-Controller) architecture

• How to work with data in NoSQL databases

• Advanced data modelling: relationships between data, embedding, referencing, and more

• Complete modern authentication with JWT: user sign up, log in, password reset, secure cookies, etc.

• Authorization (user roles)

• Security: best practices, encryption, sanitization, rate limiting, etc.

• Accepting credit card payments with Stripe: Complete integration on the back-end and front-end

• Uploading files and image processing

• Sending emails with Mailtrap and Sendgrid

• Advanced error handling workflows