Full Stack Web Development

Week 4: React Basics & Core Fundamentals

Introduction to React

• What is React and why use it, Virtual DOM basics
• Single Page Applications (SPAs)
• Project setup with Vite, folder structure & workflow

JSX (JavaScript XML)

• JSX syntax & embedding JS expressions
• Conditional rendering
• Styling: inline CSS, external CSS, CSS Modules (optional)

Week 5: React Basics & Core Fundamentals

Components & Props

• Functional components & composition
• Passing data via props, destructuring & default props

Lists & Keys

• Rendering dynamic data with map()
• React keys & list rendering best practices

Mini Project

• Dynamic Product/Card List

Week 6: State Management & Event Handling

Event Handling

• Click, keyboard & mouse events
• Event objects, passing parameters to handlers

Forms in React

• Controlled components & handling inputs
• Basic form validation & submission

useState Hook

• Component state & updates
• Managing multiple state variables, arrays & objects

Week 7: State Management & Event Handling

useEffect Hook

• Side effects & dependency array
• Mounting/updating and cleanup functions

API Integration

• Fetch API & Axios
• Fetching data from free REST APIs
• Loading indicators, error handling & displaying data

Practical Assignments

• Weather App
• User Directory
• News App (using free APIs)

Week 8: State Management & Event Handling

Practical Assignments

• Weather App
• User Directory
• News App (using free APIs)

Week 9-10: Advanced Hooks & Routing

React Router

• react-router-dom, BrowserRouter, Routes & Route
• Link, NavLink, dynamic routes & URL parameters
• 404 page & nested routing

Advanced React Hooks

• useRef — DOM manipulation & persistent values
• useContext — global state, Provider & Consumer

Custom Hooks

• What custom hooks are & creating reusable logic
• Sharing functionality across components, real-world examples

Week 11-12: Advanced Hooks & Routing

Performance Optimization

• React.memo
• useMemo & useCallback (introduction)
• Avoiding unnecessary re-renders

Practical Assignments

• Dashboard with Routing
• Theme Switcher using Context API
• Stopwatch using useRef

Week 13-16: Project Building

State Management

• Context API
• Redux Toolkit — store, slices, dispatch & selectors

Testing & Debugging

• React Developer Tools
• Debugging, code optimization & bug fixing

Capstone Project

• Build one full app: E-Commerce Store, Movie Search App, Job Portal, Food Ordering App, Student Management System, Expense Tracker, or Notes Application
• Features: auth UI (frontend only), routing, API integration, search & filter, CRUD (local storage or free backend), responsive design, state management, error & loading handling

Week 17-18: Project Deployment

Deployment

• Production build & environment variables
• Deploy to Vercel or Netlify (free)
• Share live project link, GitHub repository submission

Final Deliverables

• Source code (GitHub) & live hosted website
• Project documentation & presentation
• Viva & code review

Week 19 & 20: Introduction to Node.js Backend & MVC Architecture

Introduction to MySQL Database

• What is a Relational Database (RDBMS)?
• Features and Advantages of MySQL
• SQL vs NoSQL Databases
• Database, Tables, Rows, and Columns
• Primary Key, Foreign Key, and Constraints
• MySQL Workbench Overview

Installing and Configuring MySQL

• Installing MySQL Server
• Installing MySQL Workbench
• Creating User Accounts
• Configuring Password Authentication
• Starting and Stopping MySQL Server
• Verifying Installation
• Creating the First Database

Week 21 & 22:

Database Design Fundamentals

• Database Normalization (1NF, 2NF, 3NF)
• Entity Relationship (ER) Diagram
• Table Design Best Practices
• Choosing Appropriate Data Types
• Primary Keys and Auto Increment
• Foreign Keys and Constraints
• Indexing Basics

Connecting Node.js with MySQL

• Installing the mysql2 Package
• Creating a Database Connection
• Connection Configuration
• Environment Variables (.env)
• Testing Database Connectivity
• Handling Connection Errors

Week 23 & 24:

Using the mysql2 Package

• Installing mysql2
• Connection Methods
• Callback API
• Promise-based API
• Executing SQL Queries
• Closing Database Connections

Connection Pooling (mysql.createPool)

• What is a Relational Database (RDBMS)?
• Features and Advantages of MySQL
• SQL vs NoSQL Databases
• Database, Tables, Rows, and Columns
• Primary Key, Foreign Key, and Constraints
• MySQL Workbench Overview

Week 25:

CRUD Operations using Raw SQL Queries

• Create :-INSERT Queries,Bulk Insert
• Read :-SELECT Queries ,WHERE Clause ,ORDER BY ,LIMIT & OFFSET
• Update :- UPDATE Queries ,Updating Multiple Records
• Delete :- DELETE Queries ,Soft Delete vs Hard Delete

Week 26:

Prepared Statements and SQL Injection Prevention

• Understanding SQL Injection
• Using Parameterized Queries
• Prepared Statements with mysql2
• Input Validation
• Escaping Special Characters
• Security Best Practices

Week 27:

Database Models and Query Organization

• Organizing Database Code
• Creating Model Files
• Separating Business Logic
• Reusable Query Functions
• Repository Pattern Basics
• Error Handling in Models

Week 28:

Introduction to ORM (Sequelize / Prisma)

• What is an ORM?
• Benefits of Using ORM
• Installing Sequelize
• Installing Prisma (core)
• ORM Project Structure
• Connecting ORM to MySQL
• Basic CRUD using ORM
• Comparing Raw SQL vs ORM

Week 29:

Database Relationships

• One-to-One Relationship:- Creating One-to-One Associations ,Foreign Key Mapping
• One-to-Many Relationship :- Parent-Child Relationships ,Creating Associations ,Fetching Related Data
• Many-to-Many Relationship :- Junction (Pivot) Tables ,Creating Many-to-Many Associations ,Querying Related Records

Week 30:

Database Migrations (Sequelize CLI / Prisma Migrate)

• Introduction to Database Migrations
• Installing Sequelize CLI
• Installing Prisma CLI
• Creating Migration Files
• Running Migrations
• Rolling Back Migrations
• Creating Seed Data
• Updating Database Schema
• Migration Best Practices

Week 31:

Controllers and Business Logic

• Introduction to Controllers
• MVC Architecture Overview
• Creating Controllers in Express.js
• Separating Business Logic from Routes
• Organizing Controller Files
• Controller Best Practices
• Reusable Controller Methods
• Handling CRUD Operations in Controllers

Week 32:

Request Validation

• Importance of Input Validation
• Client-side vs Server-side Validation
• Using Express Validator
• Validating Request Body
• Validating URL Parameters
• Validating Query Parameters
• Custom Validation Rules
• Returning Validation Error Responses

Week 33:

Custom Middleware Development

• Understanding Middleware
• Types of Middleware
• Creating Custom Middleware
• Application-Level Middleware
• Route-Level Middleware
• Middleware Execution Flow
• Passing Control using next()
• Reusable Middleware Design

Week 34:

Authentication Middleware

• Authentication vs Authorization
• Protecting API Routes
• Creating Authentication Middleware
• Reading Authorization Headers
• Verifying User Identity
• Handling Unauthorized Requests
• Token Verification
• Securing Protected Endpoints

Week 35:

Authorization Concepts

• What is Authorization?
• User Permissions
• Access Levels
• Resource-Based Authorization
• Route Protection
• Ownership-Based Access Control
• Authorization Best Practices

Week 36:

Password Hashing using bcrypt

• Why Password Hashing is Important
• Installing bcrypt
• Hashing Passwords
• Comparing Passwords
• Salt and Salt Rounds
• Secure Password Storage
• Password Security Best Practices

Week 37:

JWT (JSON Web Token) Authentication

• Introduction to JWT
• JWT Structure (Header, Payload, Signature)
• Installing jsonwebtoken
• Generating Access Tokens
• Verifying JWT Tokens
• Token Expiration
• Refresh Tokens
• Protecting Routes with JWT
• Logout Strategy
• JWT Security Best Practices

Week 38:

Role-Based Access Control (RBAC)

• Introduction to RBAC
• Defining User Roles
• Admin, User, and Moderator Roles
• Permission-Based Access
• Creating RBAC Middleware
• Restricting Routes
• Role Hierarchy
• Best Practices for RBAC

Week 39:

Centralized Error Handling

• Understanding Error Handling
• Express Error Middleware
• Handling Synchronous Errors
• Handling Asynchronous Errors
• Creating Custom Error Classes
• Returning Standardized API Responses
• HTTP Status Codes
• Error Handling Best Practices

Week 40:

Logging and Exception Management

• Importance of Logging
• Introduction to Morgan
• Using Winston Logger
• Logging API Requests
• Logging Errors
• Handling Uncaught Exceptions
• Handling Unhandled Promise Rejections
• Log Levels
• Production Logging Best Practices

Week 41:

API Testing using Postman

• Installing Postman
• Creating API Requests
• GET, POST, PUT, DELETE Requests
• Using Headers
• Sending JSON Data
• Environment Variables
• Authentication Testing
• Testing JWT Protected APIs
• API Collections
• Automated API Tests
• Exporting and Sharing Collections

Build, deploy, and showcase real-world full stack projects on free cloud platforms while creating a job-ready developer portfolio.