🧩 Week 14 – React + Express Integration

🎯 Goal: Connect frontend (React) to backend (Express.js), implement user authentication, and build a complete MERN app.

—

✅ Day 1 – Connecting React to Express API

🧠 Topics:

• What is a full-stack (MERN) app?
• Setup Express API server (CORS, JSON, routes)
• Connect React with backend using Axios
• Proxy setup in React for local API calls

🛠 Activities:

• Create a backend route /api/posts
• Fetch it from React and display post list
• Use environment variables (.env) for URLs

—

✅ Day 2 – JWT Authentication (Register/Login)

🧠 Topics:

• What is JWT (JSON Web Token)?
• Create register and login endpoints (Express)
• Use bcrypt for password hashing
• Sign JWT and send token on login
• Store token in localStorage or cookie

🛠 Activities:

• Build React form for Register/Login
• Axios POST to Express endpoints
• Save token after login
• Show logged-in user info on dashboard

—

✅ Day 3 – Protected Routes & Logout

🧠 Topics:

• Middleware to protect Express routes (JWT verify)
• Create protected endpoint (e.g., /api/profile)
• Add PrivateRoute component in React
• Implement logout (clear token)

🛠 Activities:

• Protect routes like /dashboard or /profile
• Redirect to login if user is not authenticated
• Add logout button that clears token & redirects

—

✅ Day 4 – Project: MERN Blog or Store Setup

🧠 Options:

• Build a MERN Blog (posts, user, auth)
• OR an E-commerce Store (products, cart, auth)

🛠 Activities:

• Setup models (Post/Product, User)
• Build Express routes: GET, POST, DELETE
• Start UI: list posts/products, view details

—

✅ Day 5 – React + Express UI Completion

🧠 Tasks:

• Implement Create New (Post/Product) form
• Connect Create form to POST API route
• Show list + detail view
• Allow delete/update if logged in

💡 Optional:

• Add author/creator name on each post
• Only show delete/edit if user is creator

—

✅ Day 6–7 – Final Project Completion

🧠 Activities:

• Polish UI/UX (loading states, error handling)
• Secure backend routes properly
• Clean up code: separate API/service files
• Prepare for deployment next week

💡 Deliverable:

• Complete full-stack MERN project with working login, protected routes, and connected database.

—