Why do you want to pursue MERN stack Developer as a career?
Quick coding Time
It is just a better paying job in the near terms.
This tech stack’s front-end & back-end is completely based on Single JavaScript Language.
Mern stack the fastest growing tech stack in the world. It has one of the quickest
coding time for most of the real-time enterprise applications.
Mern stack is a JavaScript Stack that is used for easier and faster deployment of fullstack web applications. Mern stack comprises of 4-technologies namely: MongoDB,Express, React and NodeJs. This stack is designed to make the development process smoother and easier.
INSTRUCTOR
HAMZA QURESHI.Overview
Mern Stack
What you’ll learn
✓ Build a full stack social network app with React, Redux, Node, Express & MongoDB
✓ Create an extensive backend API with Express
✓ Use Stateless JWT authentication practices & Stateful authentication using some strategies
✓ Integrate React with an Express backend in an elegant way
✓ React Hooks, Async/Await & modern practices
✓ Use Redux for state management
✓ Deploy to Heroku with a post-build script and secure SSH.
BASICS HTML, CSS3, JAVASCRIPT
MERN STACK OUTLINE | Hamza Qureshi
SUBJECT TEACHER GRADE DATE
Web Designing Hamza Qureshi 100 Will be informed
OVERVIEW
Before starting the advance concepts of MERN Stack Development. Let’s just first understand the basics of web
designing and development. Learn the ways to create a professional web structure so you can easily apply the
designing and functionality. The concepts we will learn are listed here.
DESCRIPTION /TOPICS/ TIME DURATION /INTRODUCTION
Explaining Web technologies,
Installing & setting Dev tools,
Exploring IDE & writing first code
1:00 Hr.
Basic tags,Learn Order / Unordered lists Images, links ,Exploring new web designs.
1:00 Hr.
Audio / Video tags Sections/Div, Html Forms, Tables,
Activity
Your First Assignment
One Hour fifteen minutes
Checking Assignments
Exploring web Recourses
Explaining Css & Css3
Quiz
Grading.
1:00 Hr.
Explaining Css variations of Css,Learn 3 ways to setup css,Basic Css properties about Fonts & text styling, margin, paddings, universal selector
1:00 Hr.
CSS Learn & Practice Flexbox, Basic Cards Designing, Navbar Designing
1:00 Hr.
CSS3 Animations, Transitions, Shapes (Clip-paths), Pseudo Elements
Assignments no#02
One Hour fifteen minutes
Checking Assignments
Working on Media queries
Creating Responsive Layout
Quiz
Grading.
1:00 Hr.
DESCRIPTION TOPICS TIME DURATION INTRODUCTION TO Tailwind CSS
What is Tailwind & Post CSS?
Key features of Tailwind CSS
Setting up Tailwind CSS in your
MERN project
Integrating Tailwind CSS with your
MERN project
1:00 Hr.
Tailwind CSS
Understanding utility-first CSS
Using utility classes for styling
Customizing and extending utility classes
1:00 Hr.
Theming and Customization
Customizing the default theme adding dark Theme.
Creating and using custom themes
Extending Tailwind CSS with plugins
One Hour fifteen minutes
ACTIVITY
Create a Website design using tailwind CSS.
Applying Gradients and best practices.
1:00 Hr.
DESCRIPTION TOPICS TIME DURATION INTRODUCTION TO JAVASCRIPT
Explaining JS and DOM and BOM Concepts
Learn Variables, if else, switch, Loops, Strings, Type Conversion,String Methods,
Assignment no#03
1:00 Hr.
JAVASCRIPT Checking Assignments
Learn Arrays / Array Methods
Objects
Assignment no#04
1:00 Hr.
JAVASCRIPT Checking Assignments
Functions/ Scope/ Closures
OOP in Js,
Assignment no#05
One Hour fifteen minutes
ACTIVITY Checking Assignments
Js versions / ES5, ES6
Assignment no#06
Quiz
Grading
1:00 Hr.
INTRODUCTION TO JAVASCRIPT
Explaining Sync / Async Programming
Learn DOM Manipulation
Integration with Html5
Assignment no#07
1:00 Hr.
JAVASCRIPT Checking Assignments
Events,
BOM Explain
EXPLAINING COOKIES /SESSION STORAGE / LOCAL STORAGE
Assignment no#08
1:00 Hr.
JAVASCRIPT Checking Assignments
Creating 2 Projects
One and half hour
ACTIVITY Work with API’s
Creating 1 Project using API’s
Quiz
Grading
1:00 Hr.
INTRODUCTION TO REACT
Introduction to react v8
React Installation, Folder Structure, Understanding of React package.json file
1:00 Hr.
REACT Rendering, Components, Props,
Projects: – joke Generator, Color
picker
Assignment no#09
1:00 Hr.
REACT Checking Assignments
Conditional Operators
States in react, State Management
Assignment no#10
One and half hour
ACTIVITY Checking Assignments
Forms, Form Handling Using
React states.
Quiz
Assignment no#11
Grading
1:00 Hr.
INTRODUCTION TO REACT
Learn about Hooks in react,(use Effect, use State)
Assignment no#11
1:00 Hr.
REACT Checking Assignment
Learn more about Hooks in react,(use Memo, use Ref)
Learn about axios / Fetch
Projects:- Weather app
1:00 Hr.
REACT Learn about Redux Toolkit
Assignment no#12
Creating a Project Portfolio
Website
One and half hour
ACTIVITY Completing Portfolio website
Quiz
Grading
1:00 Hr.
INTRODUCTION TO NODE JS
Introduction to node js, Setting Environment variables
Learn about modules (Fs, OS,URL, Path, Crypto)
Assignment no#13
1:00 Hr.
NODE JS Checking Assignment
Integrating with Frontend Understanding Browser Routing
1:00 Hr.
NODE JS Learn about status codes Learn about Handlebars Serving static files, Changing default engine
Assignment no#14
One and half hour
ACTIVITY Checking Assignment
More work with Handlebars
Quiz
Grading
1:00 Hr.
INTRODUCTION TO EXPRESS JS
Introduction to Express js,
Learn about Middleware’s
Work with File system and path module
Learn more about Routing and Redirecting Controllers
Assignment no#15
1:00 Hr.
EXPRESS JS Checking Assignment
Learn about serving & saving
Pictures and files to server
Creating REST API’s
Assignment no#16
1:00 Hr.
EXPRESS JS Learn about JSON WEB TOKENS
Depth working on Routers
Assignment no#17
One and half hour
ACTIVITY Checking Assignment
Learn about Cookies,
Serving Tokens in Cookies
Quiz
Grading
1:00 Hr
INTRODUCTION TO MONGO DB
Introduction to Non-Relational Database,
Installing Compass and setting up Local Database in your System
Learn about Collections & Documents
Start working on CRUD Application
1:00 Hr.
MONGO DB Work on Database Queries
Creating Schemas
Performing Joining
Assignment no#18
1:00 Hr.
MONGO DB Checking Assignment
Aggregation
More Depth understanding on
Database Queries
Assignment no#19
One and half hour
ACTIVITY Checking Assignment
Learn about Query and PARAM’s
More Depth understanding on
Database Queries
Quiz
Grading
1:00 Hr.
NEXT JS (SSR, CSR)
INTRODUCTION TO NEXTJS
What is Next.js?
Benefits of using Next.js. Understanding server-side rendering (SSR) and clientside Rendering (CCR)
1:00 Hr.
Setting up Next.js & Pages and Routing
New Next.js Project.
Organizing pages. Dynamic routing.
Navigating between pages and link
components. Data Fetching using (SSG),
(SSR)
1:00 Hr.
Layouts &Components
Reusable layout components, Composition and props, Integrating with CSS frameworks (e.g., Tailwind CSS),
Handling server-side rendering and
client-side hydration, Integrating Next.js
with MongoDB and Express.js
One and half hour
Deployment
Deploying a Next.js application
Optimizing performance with code
splitting and lazy loading.
SEO considerations and best practices
1:00 Hr.
PROJECTS REFINING
More work with Database Queries Nested Array Queries Talk about Projects
1:00 Hr.
MONGO DB
Inventory System
Authentication
1:00 Hr.
MONGO DB
Authentication
Blog App
One and half hour
ACTIVITY
Blog App
Dashboard
3:00 Hr.
