MernStack
Week 1-2: Introduction to Web Development and JavaScript Basics
- Overview of Web Development: Front-End, Back-End, and Full-Stack Development
- JavaScript Essentials: ES6+ Features (Arrow Functions, Promises, Template Literals)
- Understanding DOM Manipulation and Event Handling
- Hands-on: Building a Simple Interactive Web Page
- Introduction to Node.js: Runtime Environment and Key Features
- Setting Up Node.js and npm
- Understanding DOM Manipulation and Event Handling
- Hands-on: Building a Simple Interactive Web Page
- Introduction to Node.js: Runtime Environment and Key Features
- Setting Up Node.js and npm
Week 3-4: MongoDB and Express.js Basics
- MongoDB Basics: NoSQL Concepts, Collections, and Documents
- Setting Up a MongoDB Database Locally and on Atlas
- CRUD Operations Using MongoDB Compass and Mongo Shell
- Express.js Basics: Introduction to Back-End Development
- Setting Up a Simple Express Server
- Handling Routes and Middleware
- Hands-on: Building a REST API for a Simple Application
- Setting Up a MongoDB Database Locally and on Atlas
- CRUD Operations Using MongoDB Compass and Mongo Shell
- Express.js Basics: Introduction to Back-End Development
- Setting Up a Simple Express Server
- Handling Routes and Middleware
- Hands-on: Building a REST API for a Simple Application
Week 5-6: React Fundamentals
- React Basics: Setting Up a React App (create-react-app or Vite)
- Understanding Components, Props, and State
- Handling Events and Conditional Rendering
- React Router: Setting Up Routes, Navigation, and Dynamic Parameters
- Hands-on: Building a Front-End Interface for the Express API
- Understanding Components, Props, and State
- Handling Events and Conditional Rendering
- React Router: Setting Up Routes, Navigation, and Dynamic Parameters
- Hands-on: Building a Front-End Interface for the Express API
Week 7-8: Connecting Front-End to Back-End
- Making HTTP Requests with `fetch` and `axios`
- Displaying and Managing API Data in React
- Authentication and Authorization Basics: JWT in MERN Stack
- Implementing Secure Login and Signup Routes
- Storing Tokens in HTTP Headers and Local Storage
- Hands-on: Building a User Authentication System
- Displaying and Managing API Data in React
- Authentication and Authorization Basics: JWT in MERN Stack
- Implementing Secure Login and Signup Routes
- Storing Tokens in HTTP Headers and Local Storage
- Hands-on: Building a User Authentication System
Week 9-10: Advanced MERN Stack Concepts
- Advanced MongoDB: Aggregations and Indexing
- React Hooks: `useEffect`, `useContext`, and Custom Hooks
- Optimizing Applications with Code Splitting and Lazy Loading
- Hands-on: Building a Dashboard with Dynamic Charts and Stats
- React Hooks: `useEffect`, `useContext`, and Custom Hooks
- Optimizing Applications with Code Splitting and Lazy Loading
- Hands-on: Building a Dashboard with Dynamic Charts and Stats
Week 11-12: Deployment and Final Project
- Deploying the MERN Stack:
- Hosting Front-End on Vercel/Netlify
- Hosting Back-End on Heroku/Render
- Connecting the Front-End and Back-End with Environment Variables
- Final Project: A Full-Stack MERN Application (e.g., E-Commerce, Blog Platform)
- Full CRUD Functionality, Authentication, and Deployment
- Project Presentation and Peer Feedback
- Hosting Back-End on Heroku/Render
- Connecting the Front-End and Back-End with Environment Variables
- Final Project: A Full-Stack MERN Application (e.g., E-Commerce, Blog Platform)
- Full CRUD Functionality, Authentication, and Deployment
- Project Presentation and Peer Feedback
