{"id":18894667,"url":"https://github.com/hemansnation/mern-stack-roadmap-2022","last_synced_at":"2025-04-06T06:11:22.168Z","repository":{"id":43167475,"uuid":"449197663","full_name":"hemansnation/MERN-Stack-Roadmap-2022","owner":"hemansnation","description":"Full Stack Roadmap for Software Developer from beginner to Expert with React and Node at Scale.","archived":false,"fork":false,"pushed_at":"2024-09-02T05:08:52.000Z","size":8094,"stargazers_count":263,"open_issues_count":2,"forks_count":77,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-03-30T05:05:19.018Z","etag":null,"topics":["css","expressjs","fullstack-development","html","javascript","mongodb","nodejs","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hemansnation.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-18T08:16:50.000Z","updated_at":"2025-03-24T01:00:12.000Z","dependencies_parsed_at":"2024-11-22T10:13:03.882Z","dependency_job_id":null,"html_url":"https://github.com/hemansnation/MERN-Stack-Roadmap-2022","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hemansnation%2FMERN-Stack-Roadmap-2022","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hemansnation%2FMERN-Stack-Roadmap-2022/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hemansnation%2FMERN-Stack-Roadmap-2022/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hemansnation%2FMERN-Stack-Roadmap-2022/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hemansnation","download_url":"https://codeload.github.com/hemansnation/MERN-Stack-Roadmap-2022/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441053,"owners_count":20939239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","expressjs","fullstack-development","html","javascript","mongodb","nodejs","reactjs"],"created_at":"2024-11-08T08:23:59.583Z","updated_at":"2025-04-06T06:11:22.144Z","avatar_url":"https://github.com/hemansnation.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Become MERN Full Stack Developer in 6 Months\n\n## MongoDB‌ ‌|‌ ‌ExpressJS‌ ‌|‌ ‌ReactJS‌ ‌|‌ ‌NodeJS‌ ‌\u003cbr\u003e\n\n#### Technology Stack\n\n1. HTML\n2. CSS\n3. Bootstrap\n4. JavaScript\n5. 5‌ ‌Minor‌ ‌Projects\n6. ReactJS\n7. Firebase\n8. MongoDB\n9. Node\n10. Express\n11. GIT‌ ‌-‌ ‌version‌ ‌control\n12. 5‌ ‌Major‌ ‌Projects\n13. Deployment\n\n\n# HTML\n\nHTML 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.\n\n### Day 1\n\nDifferent tags - html, title, body, paragraph, heading 1 to 6, anchor, break row, link, img\n\nDifferent attributes - style, href, rel, src,\n\n\u003ca href=\"https://github.com/hemansnation/MERN-Stack-Roadmap-2022/tree/main/HTML/1_HTML%20basics\"\u003eCode is Here \u003c/a\u003e\n\n##### Interview Questions\n\nWhat is HTML? \n\nHow the HTML code compile? \n\nWhat data structure is used behind the scenes in HTML?\n\nWhat is HTML parser?\n\nHow to add CSS with HTML file?\n\n\n### Day 2\n\nTags - table, th, td, strong, b, em, span, abbr and title attribute, \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\"\u003e target attribute anchor tag \u003c/a\u003e, download attribute in anchor tag with image and text as well, specify name of the download attribute.\u003cbr\u003e\n\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\"\u003e\n  rel attribute in anchor tag\n\u003c/a\u003e\n\nWhat are absolute and relative URLs?\n\nHow to navigate to a specific part of the page? CSS ids\n\nHow to use the loading attribute to lazy load images? loading attribute in image tag. \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading\"\u003eLazy Loading Details\u003c/a\u003e\n\n### Day 3\n\nHow to build a form? tags - submit button, checkbox, radio, date, email, file, number, password, reset, search.\n\nTextarea, select, fieldset, legend.\n\nHow to configure a form to comunicate with\nserver with attributes: action, enctypes, method,\ntarget.\n\nHow to change the design of datetype input field.\n\nHow to preview the image with file input type?\u003ca href=\"https://w3collective.com/preview-selected-img-file-input-js/\"\u003eHere \u003c/a\u003e\n\nenctypes - \n- application/x-www-form-urlencoded (the default)\n- multipart/form-data\n- text/plain\n\nHow Form submission attributes work.\n\nHow to perform client side form validation. \u003ca href=\"https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation\"\u003eusing HTML\u003c/a\u003e\n\nHow to make a button to submit a form.\n\nHow to reset a form.\n\n\u003ca href=\"https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form\"\u003eHow to structure a web form.\u003c/a\u003e\n\n\n# CSS\n\n### Day 4\n\n\n\nSelector, Class and id , Comment, border, color, \nbackground-  color, image, repeat, attachment, \n\nBorder - style , width, color, shorthand, border-radius\n\nMargin - top, right, bottom, left\n\nPadding - \n\nWhat is box model?\n\n\nUniversal selector *\n\nText align - left, center, justify, text-decoration - overline, none, under-line, line-through, text-transform, text-indent\n\n\n### Day 5\n\nCSS link, visited, hover, active\n\nTable - border, width height, text-align, padding, tr:hover, tr:nth-child(even), responsive table\n\nNavigation Bar\n\nWebsite Layout\n\n### Day 6\n\nMini Project\n\ndiv, header, section\n\n\n# JavaScript\n\n### Day 7\n\nJavaScript - How it works?\n\nHow to add it with HTML?\n\nHow console works? \n\nWhat is Document? \n\nhow variables work in JS?\n\nOperators\n\nAlgorithm based questions\n\n - 1, 2 , 3, 5, 8, 13, 21, 34\n  - sum of even - 10\n 4m\n / 2 = sum\n \n \n ### Day 8\n \n While loops, Questions, typeof\n \n \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness\"\u003e Loose equality vs strict equality \u003c/a\u003e\n \n \n ### Day 9\n \n For Loop, do while, arrays\n \n Events\n \n ### Day 10\n\n functions\n\n Project- Captcha Generator\n\n### Day 11\n\nValidations on forms\n\n\n### Day 12\n\nWhat are local and global variables?\n\nHow to create an object in Javascript to hold values?\n\nHow this keyword works?\n\nDifference between var and let?\n\n\n### Day 13\n\nFunction Statements, Function Expressions\n\nArrow functions, single line arrow function without return, without arguments, dynamically creating arrow functions\n\nMulti line arrow function with return statement\n\n\n### Day 14\n\nTemplate Literals\n\nWhat is Module?\n\n\n### Day 15\n\nObject Literals, Object class, Function constructor and new keyword.\n\n\n### Day 16\n\nJavaScript Project - Speech Recognition\n\n\n### Day 17 \n\nCSS transitions,  vendor prefixes for cross browser support wih WebKit.\n\n\u003ca href=\"https://caniuse.com/\"\u003eProperty compatibility \u003c/a\u003e\n\n\u003ca href=\"https://cubic-bezier.com/#.17,.67,.83,.67\"\u003eCreate your own transition timing function\u003c/a\u003e\n\n\n### Day 18\n\nJavaScript Array object, different types of array representations. \n\nMethods for stack and queue operations, push pop shift unshift.\n\nArray with for loop, for in , for of, \n\nMultidimensional array\n\nOther important methods: - splice, slice, concat, foreach, indexOf, lastIndexOf, includes, find, filter, reverse, split, join\n\nArray.isArray\n\n### Day 19\n\nJavaScript String, Single and dobule quotes, backticks.\n\nSpecial characters: new line character, length,\n\nStrings are immutable\n\nString methods: charAt,  toUpperCase, toLowerCase, indexOf, includes, startsWith, endsWidth, slice, substring, substr\n\nBitwise not ~\n\n\n# NodeJS\n\n### Day 20\n\nNode JS - VM (V8 / Chakra)\n\n\u003ca href=\"https://jscomplete.com/learn/why-node-for-react\" \u003eWhy Node? \u003c/a\u003e\n\nwhich node, which npm, which npx\n\n``` javascript\n// Modern JS test\n(async (a = 1, ...b) =\u003e ({ ...b, a, [a]: `${a}` }))()\n\n// New Promise APIs\nutil.promisify\nrequire('fs').promises\n```\n\nWhat is RELP? Node.js Read-Eval-Print-Loop (REPL)\n\nNode Hello World.\n\n``` javascript\nCommon JS (module formatting system)\n- require and module.exports\n\nES6\n- import and export\n```\n\n\n### Day 21\n\nNPM - Node Package Manager\n\n\u003ca href=\"https://semver.npmjs.com/\"\u003eSemantic Versioning Calculator\u003c/a\u003e\n\nWhat is npm install and init?\n\nPackage.json vs package-lock.json\n\nCreating and publishing your own npm package.\n\n\n### Day 22\n\nMERN  authantication project \nNode and express Server setup\n\nProcess object\n\n\nUsed packages: \n\n```javascript\n\n\"dependencies\": {\n    \"bcryptjs\": \"^2.4.3\",\n    \"body-parser\": \"^1.19.2\",\n    \"concurrently\": \"^7.0.0\",\n    \"express\": \"^4.17.3\",\n    \"is-empty\": \"^1.2.0\",\n    \"jsonwebtoken\": \"^8.5.1\",\n    \"mongoose\": \"^6.2.8\",\n    \"passport\": \"^0.5.2\",\n    \"passport-jwt\": \"^4.0.0\",\n    \"validator\": \"^13.7.0\"\n  },\n  \"devDependencies\": {\n    \"nodemon\": \"^2.0.15\"\n  }\n```\n\n\n\n\n### Day 23\n\nMERN authentication Project\nModels and Validation\n\nRegister and Login Validations\n\nUser schema model\n\nroutes for register user\n\n\n### Day 24 \n\nMERN authentication Project\n\nAPI for register\n\n\n### Day 25\n\nMERN Authentication Project\n\nAPI for Login, Passport JWT strategy\n\nPostman api testing\n\n### Day 26 \n\nMERN Authentication Project\n\nReact App\n\n\n### Day 27\n\nMERN Authentication Project\n\nReact App Navbar component\n\n### Day 28 \n\nMERN Authentication Project\n\nReact App Landing page\n\nLogin Page\n\n### Day 29\n\nMERN Authentication Project\n\nReact App Landing page\n\nRegister and Login \n\n# ReactJS\n\n### Day 30\n\nReact Basics\n\nWhy React? \n\nCDN - unpkg - React, ReacrDOM and babel\n\nUnderstanding JSX (JavaScript XML)\n- JSX Elements\n- Comment\n- Rendering JSX\n- Style and className in JSX\n- Injecting data into JSX\n\n#### Interview Questions\n- What is babel?\n- What is transpiler?\n- What is single page application?\n- What is DOM?\n- What is Virtual DOM?\n\n\n### Day 31 \n\nReact and Node Setup, create react app\n\nInstall these extensions from Visual Studio Code\n\n- Prettier\n- ESLint\n- Bracket Pair Colorizer\n- ES7 React/Redux/GraphQL/React-Native snippets\n\ncreate-react-app\n- adding first JSX code with react\n\n\n#### Interview Questions\n- What is module?\n- What is package?\n- What is NPM?\n- What is webpack?\n\n\n### Day 32\n\nReact and JSX with create-react-app\n\n\nCreate React app\n- add jsx and render the content\n- Inject Data into JSX\n- Add image in the page\n\n\n\n### Day 33\n\nReact Components\n\nJavaScript Function and JavaScript Class\n\n- Functional Component / Presentational Component / Stateless Component / Dumb Component\n- Class Component / Container Component/ Statefull Component / Smart Component\n\nRendering React Components\n\n#### Interview Questions\n- What is React Component?\n- Difference between normal function and arrow function.\n- How to make reusable react components?\n- How small is a React component?\n- What is the difference between a pure JavaScript function and a functional component?\n\n\n### Day 34 \n\nReact Components with Variables\n\nCreating Hexadecimal color with react\n\nMap function for generating li tag using JSX\n\n\n### Day 35\n\nReact Props\n\nProps in functional Components\n\nString Props\n\n### Interview Questions\n\n- What is props in a React component ?\n- How do you access props in a React component ?\n- What data types can we pass as props to components ?\n\n### Day 36\n\nReact Props\n\nProps objects\n- Different types of props object\n- String, number, boolean, array, object, function, props\n\n\n### Day 37\n\nReact Map List Keys\n\nWorking of Map function with Numbers, arrays of arrays, arrays of object.\n\nKey mapping, \n\n#### Interview Questions\n\n- Why you need to map an array ?\n- Why we need keys during mapping an array ?\n\n\n### Day 38 \n\nReact Class Components\nStatefull components\n\nClass Components, props in class components, methods in class components.\n\nConvert all the functional components into class components.\n\n#### Interview Questions\n\n- What is inheritance and how do you make a child from a parent class?\n- What is class based React component ?\n- What is the difference between functional React component and class based React component ?\n- When do we need to use class based components instead of functional components\n\n\n### Day 39\n\nReact class componenets\n\nMethods in class components\n\n#### Interview Questions\n\n- What is the use cases of class based component ?\n- Which type of component do use most frequently ? functional or class-based component\n\n### Day 40\n\nReact State\n\n#### Interview Questions\n\n- What is state in React ?\n- What is the difference between props and state in React ?\n- How do you access state in a React component ?\n- How do you set a set in a React component ?\n\n### Day 41\n\nReact Folder Structuring, import and export\n\n#### Interview Questions\n\n- What is the importance of React Folder Structure and File Naming\n- How do you export file\n- How do you import file\n- Make a component of module and export it as named or default export\n- Make a component or module and import it\n\n### Day 42\n\nReact Events\n\n- What is an event?\n- What is the different between an HTML element event and React event?\n- Write at least 4 keyboard events?\n- Write at least 8 mouse events?\n\n\n### Day 43\n\nReact Forms, Input fields, \n\n#### Interview Questions\n\n- What is the importance of htmlFor?\n- Write an input type which is not given in the example if there is?\n- What is a controlled input?\n- What do you need to write a controlled input?\n- What event type do you use to listen changes on an input field?\n- What is the value of a checked checkbox?\n- When do you use onChange, onBlur, onSubmit?\n- What is the purpose of writing e.preventDefault() inside the submit handler method?\n- How do you bind data in React? The first input field example is data binding in React.\n\n### Day 44\n\nReact form validations\n\n- What is validation?\n- What is the event type you use to listen when an input changes?\n- What are event types do you use to validate an input?\n\n### Day 45\n\nReact Project\n\nBuilding a markdown Editor\n\n\n### Day 46\n\nMERN Major project\n\nEcommerce SaaS product\n\nAll the code will be available on other Repo\n\n- intial project setup\n- react-router-som\n- Creating routes using switch route\n- Home, Login, Register\n\n\n### Day 47\n\nMERN Major project\n\nEcommerce SaaS product\n\n- bootstrap material design\n- ant design\n- menu component code\n- ant design css\n\n\n### Day 48\n\nEcommerce SaaS product\n\n- Change icons and align to left and right\n- it should be selected when we click the buttons\n- Add react react router link for corresponding pages\n- Firebase google account\n- Create a project in firebase\n- copy code for javascript and paste it in a new file in src called firebase.js\n\n\n### Day 49 \n\nEcommerce SaaS Product\n\n- Creating a registration form\n- firebase auth signin email\n- react tostify\n- firebase authentication for google and email\n- promises\n- await and async\n\n\n### Day 50\n\nEcommerce SaaS Product\n\n- Complete registration page\n\nSolved the error in firebase configuration\n\n### Day 51\n\nEcommerce SaaS Product\n\n- Registation complete through email verification link\n- Authenticate user with password as well.\n- Store email in local storage and get it for complete registration\n\n### Day 52\n\nEcommerce SaaS Product\n\n- Update password \n- Redux installation for Global State change\n\nredux, react-redux, redux-devtools-extension\n\nredux-devtool extension for chrome\n\n- Creating reducer seperately\n\n### Day 53\n\nEcommerce SaaS Product\n\n- Logout Functionaly\n- State in redux\n\n### Day 54\n\nEcommerce SaaS Product\n\n- Login Page\n\n\n### Day 55\n\nEcommerce SaaS Product\n\n- Login With google\n- Conditional login and logout for dashboard.\n- Forgot password\n- conditional redirect\n\n### Day 56\n\nEcommerce SaaS Product\n\n- setup backend node server\n- install packages \n- express - for backend server\n- body-parser - to parse the JSON data to javascript so that server can communicate with client with JSON data\n- mongoose - its a middleman to connect with mongoDB\n- cors - to avoid the Cross Origin Resourse Sharing, error occurs due to different domain or different origins.\n- morgan - it simply prints the url.\n- express-jwt - it will help us verify the json web token\n- firebase-admin - to send the token to firebase so that we can verify\n- jsonwebtoken - to deal with web tokens\n- nodemon - to continues run the server\n- dotenv - to load variables from the env file\n\n- create server file and first api\n\n\n### Day 57\n\nEcommerce SaaS product\n\n- setup database mongodb atlas\n- create routes\n- using filesystem for every route and apply them as middleware\n\n### Day 58\n\nEcommerce SaaS product\n\n- create controllers for every routes\n- Create a user schema\n- setup firebase-admin\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhemansnation%2Fmern-stack-roadmap-2022","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhemansnation%2Fmern-stack-roadmap-2022","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhemansnation%2Fmern-stack-roadmap-2022/lists"}