GENFOTECH INNOVATIONS

MERN STACK DEVELOPMENT

Course Title: Full Stack Web Development with MERN
Course Duration: (e.g., 16-20 weeks, 4-6 hours per week practicals + lectures)
Prerequisites:
 Basic understanding of HTML, CSS, and JavaScript.
 Familiarity with command-line interface (CLI).
 Basic understanding of data structures (optional but helpful for backend logic).
Course Objective: This course aims to provide students with a strong foundation in building
modern, scalable, and responsive web applications using the MERN stack (MongoDB,
Express.js, React.js, Node.js). Students will learn to design, develop, and deploy full-stack
applications, understanding how the front-end and back-end interact.
Module 1: Web Development Fundamentals & Node.js Basics (Weeks 1-3)
 1.1 Refresher: HTML5, CSS3, JavaScript (ES6+ Features)
o Semantic HTML, Responsive Design (Flexbox, Grid basics)
o Modern CSS (Variables, Pseudo-classes, Transitions)
o ES6+: let/const, Arrow Functions, Template Literals, Destructuring, Spread/Rest
Operators, Classes.
o Asynchronous JavaScript: Callbacks, Promises (.then(), .catch(), Promise.all()),
async/await.
o Browser DOM Manipulation.
 1.2 Introduction to Node.js
o What is Node.js? Why JavaScript on the server?
o Node.js Architecture: Event Loop, Non-blocking I/O.
o Setting up Node.js environment (NVM, official installer).
o NPM (Node Package Manager): npm init, npm install, npm start, package.json,
node_modules.
o Core Node.js Modules: fs (File System), path, os, http.
o REPL (Read-Eval-Print Loop).
  1.3 Node.js Asynchronous Programming
o Callbacks in Node.js (Callback Hell).
o Introduction to Promises (review and deeper dive with Node).
o async/await in Node.js: Simplifies asynchronous code.
 1.4 Event Emitters
o Understanding the EventEmitter class.
o on(), emit(), once(), removeListener().
Module 2: Building APIs with Express.js (Weeks 4-7)
 2.1 Introduction to Express.js
o What is Express.js? Why use a web framework?
o Setting up an Express project.
o Basic Express server: app.listen().
o Middleware: Concept and usage (app.use(), body-parser, morgan).
 2.2 Routing in Express.js
o Defining routes: app.get(), app.post(), app.put(), app.delete().
o Route parameters (/users/:id).
o Query parameters (/search?q=nodejs).
o Handling HTTP Methods.
o Router objects (express.Router()).
 2.3 Request and Response Objects
o req object: req.body, req.params, req.query, req.headers.
o res object: res.send(), res.json(), res.status(), res.sendFile(), res.redirect().
 2.4 Error Handling in Express
o Middleware for error handling.
o Centralized error handling.
 2.5 RESTful API Principles
o Understanding REST concepts: Resources, URIs, HTTP methods, Statelessness.
o Designing RESTful API endpoints.
 2.6 Protecting APIs (Authentication & Authorization - Basics)
 o Introduction to JWT (JSON Web Tokens) - conceptual.
o Basic API Key authentication (for initial understanding).
o (Deeper dive in later modules)
Module 3: Database Integration with MongoDB & Mongoose (Weeks 8-11)
 3.1 Introduction to NoSQL Databases
o What are NoSQL databases? Document-oriented databases.
o Comparison with SQL databases (advantages/disadvantages for different use
cases).
o Introduction to MongoDB: Core features, JSON-like documents.
 3.2 Setting up MongoDB
o Local installation (MongoDB Community Server).
o MongoDB Atlas (Cloud-based service) for deployment.
o MongoDB Compass (GUI tool).
o Basic MongoDB shell commands (CRUD operations).
 3.3 Integrating MongoDB with Node.js (Native Driver)
o Connecting to MongoDB.
o Basic CRUD operations using the native MongoDB driver.
 3.4 Mongoose ODM (Object Data Modeling)
o What is Mongoose? Why use an ODM?
o Defining Schemas: Data types, validation, default values.
o Creating Models from Schemas.
o Mongoose CRUD Operations:
 find(), findOne(), findById().
 save(), create().
 updateOne(), updateMany(), findByIdAndUpdate().
 deleteOne(), deleteMany(), findByIdAndDelete().
o Querying techniques: Filtering, sorting, projecting.
o Population (joining documents).
 3.5 Building RESTful APIs with Express and Mongoose
o Connecting Express to MongoDB via Mongoose.
 o Implementing CRUD operations for a specific resource (e.g., users, products,
tasks) using Express routes and Mongoose models.
o Error handling for database operations.

Module 4: Front-end Development with React.js (Weeks 12-16)

 4.1 Introduction to React.js
o What is React? Declarative UI, Component-Based Architecture.
o Virtual DOM vs. Real DOM.
o Setting up a React project (create-react-app, Vite).
o JSX (JavaScript XML).
 4.2 React Components
o Functional Components vs. Class Components (focus on Functional).
o Props: Passing data from parent to child components.
o State: Managing component-specific data using useState Hook.
o Lifecycle of Functional Components: useEffect Hook (mounting, updating,
unmounting).
 4.3 React Hooks
o useState (for state management).
o useEffect (for side effects: data fetching, DOM manipulation, subscriptions).
o useContext (for global state management).
o useReducer (for complex state logic).
o useRef (for direct DOM access or mutable values).
o Custom Hooks.
 4.4 Event Handling in React
o Synthetic Events.
o Handling various DOM events (clicks, form submissions, input changes).
 4.5 Conditional Rendering & List Rendering
o Conditional display of components.
o Rendering lists of data using map() and key prop.
 4.6 Forms in React
 o Controlled vs. Uncontrolled Components.
o Handling form input, submission, and validation.
 4.7 React Router (for Single Page Applications - SPAs)
o Setting up client-side routing (BrowserRouter, Routes, Route, Link, useNavigate,
useParams).
o Nested routes.
 4.8 State Management (Advanced - Context API / Redux basics)
o Context API: For sharing state across the component tree without prop drilling.
o Redux (Optional/Brief Introduction): State management library (Store,
Reducers, Actions, Dispatch). Mention Redux Toolkit.
 4.9 Interacting with APIs (Frontend - Fetch API / Axios)
o Making HTTP requests from React components to the Express backend.
o Handling asynchronous data fetching using useEffect and useState.
o Error handling for API calls.
Module 5: Full-Stack Integration & Deployment (Weeks 17-20)
 5.1 Connecting Frontend (React) to Backend (Express API)
o Proxy setup for development.
o CORS (Cross-Origin Resource Sharing): Understanding and configuring cors
middleware.
 5.2 Authentication & Authorization (Full Stack)
o Implementing User Registration (hashing passwords with bcrypt.js).
o User Login (JWT creation on backend, sending to frontend).
o Protecting API routes with JWT middleware.
o Client-side handling of JWT (storing in localStorage/sessionStorage).
o Conditional rendering based on user authentication status.
 5.3 Project Development: Building a MERN Stack Application
o Planning: Requirements gathering, database design, API design.
o Development: Iterative development, integrating all MERN components.
o Features: User management, CRUD for a core resource, search/filter, etc.
 5.4 Deployment
 o Backend Deployment:
 Heroku, Render, Vercel (for serverless functions), DigitalOcean (VPS).
 Environment variables.

o Frontend Deployment:
 Netlify, Vercel, GitHub Pages.
 Building the React app (npm run build).
o Connecting deployed frontend to deployed backend.
 5.5 Best Practices & Advanced Topics (Brief Mention)
o Error logging (e.g., Winston).
o Testing (Jest for React, Supertest for Express - conceptual).
o Docker for containerization (conceptual).
o WebSockets (Socket.IO) for real-time applications.
o GraphQL (alternative to REST).
o Performance optimization.
o Security considerations (XSS, CSRF, SQL Injection - though less relevant for
NoSQL directly).