🧩 Week 15 – Final Capstone Project + Deployment

🎯 Goal: Finalize your MERN full-stack application and deploy it to production using popular hosting services like Vercel, Render, and MongoDB Atlas.

—

✅ Day 1 – Merge Frontend + Backend (Local Integration)

🧠 Topics:

• Directory structure for MERN project

• Option 1: Separate frontend/ and backend/
• Option 2: Backend inside root, React in /client
• Use concurrently for running both servers
• Configure React to access Express API using proxy or env variables

🛠 Activities:

• Ensure both backend and frontend work in one local project
• Test all APIs from frontend
• Fix any CORS or path issues

—

✅ Day 2 – Finalize APIs & Auth Flow

🧠 Tasks:

• Double-check all routes: register, login, create/read/update/delete post or product
• Add try/catch blocks, send proper HTTP status codes
• Validate all input on backend
• Handle invalid token/unauthorized errors properly

🛠 Activities:

• Final test of:

• Login → access protected route
• Create → update → delete flow
• Logout + relogin

—

✅ Day 3 – Deploy React Frontend to Vercel

🧠 Topics:

• Setup Vercel account & GitHub integration
• Deploy React frontend using Vercel
• Configure environment variables on Vercel (REACT\APP\API\_URL)

🛠 Activities:

• Push frontend to GitHub
• Deploy it on Vercel with production settings
• Set routing, custom domain (optional)

—

✅ Day 4 – Deploy Express Backend to Render

🧠 Topics:

• Setup Render account & GitHub integration
• Create new Web Service on Render
• Setup MongoDB Atlas URI in Render env
• Use nodemon or set start script for deployment

🛠 Activities:

• Push backend to GitHub
• Deploy backend to Render (or alternatives like Railway, Cyclic)
• Set environment variables (JWT\SECRET, DB\URI, etc.)

💡 Test your hosted API using Postman or frontend

—

✅ Day 5 – MongoDB Atlas + phpMyAdmin Setup (if PHP used)

🧠 MongoDB Atlas:

• Create cluster
• Add user & whitelist IP
• Copy connection string (DB\_URI)

🛠 Activities:

• Replace local Mongo URI with MongoDB Atlas
• Test data insertion remotely

💡 Optional (if project has PHP+MySQL component):

• Use free hosting (like InfinityFree) + phpMyAdmin panel
• Connect PHP backend to remote MySQL database

—

✅ Day 6 – Testing & Debugging

🧠 Tasks:

• Test your app on multiple devices and browsers
• Test edge cases: logout + refresh, broken inputs, invalid token, empty form
• Debug: Check console logs, API error logs on Render/Vercel

🛠 Activities:

• Fix UI layout issues
• Remove dev-only code/logs
• Add 404 or fallback page in frontend

—

✅ Day 7 – Final Project Presentation

🧠 Tasks:

• Create a presentation (PDF or Google Slides)

• App Overview
• Tech Stack Used
• Key Features
• Demo Screenshots / Live Demo
• GitHub Links + Live URLs
• Optional: Record short 2–3 min demo video

🛠 Activities:

• Submit final project
• Prepare to present or share online (Fiverr, Upwork, Portfolio)

—

✅ Deliverables for Week 15:

• Live deployed MERN application (React + Express + MongoDB Atlas)
• Project on GitHub with README
• Presentation or demo link