Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hemansnation/mern-stack-roadmap-2022
Full Stack Roadmap for Software Developer from beginner to Expert with React and Node at Scale.
https://github.com/hemansnation/mern-stack-roadmap-2022
css expressjs fullstack-development html javascript mongodb nodejs reactjs
Last synced: 3 days ago
JSON representation
Full Stack Roadmap for Software Developer from beginner to Expert with React and Node at Scale.
- Host: GitHub
- URL: https://github.com/hemansnation/mern-stack-roadmap-2022
- Owner: hemansnation
- Created: 2022-01-18T08:16:50.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-02T05:08:52.000Z (4 months ago)
- Last Synced: 2024-12-17T20:05:46.522Z (10 days ago)
- Topics: css, expressjs, fullstack-development, html, javascript, mongodb, nodejs, reactjs
- Language: JavaScript
- Homepage:
- Size: 7.72 MB
- Stars: 259
- Watchers: 8
- Forks: 75
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Become MERN Full Stack Developer in 6 Months
## MongoDB | ExpressJS | ReactJS | NodeJS
#### 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,
##### 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.
# 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.
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)
which node, which npm, which npx
``` javascript
// 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.
``` javascript
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:
```javascript
"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 atlas
- 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