Complete Zomato MERN Project | Reels-Style Video Feed Integration

Summary

This video is a tutorial to build a full-stack MERN project inspired by Zomato, integrating a “reels-style” vertical feed for food items.

The project supports two roles:

• Normal users: browse/view food reels/feed and view food partner listings.
• Food partners: register/login, then add food items (including video content) to the platform.

The tutorial follows a production-style approach to backend + frontend setup, emphasizing:

• Authentication (JWT)
• Authorization via middleware
• REST APIs
• Folder structure
• File upload to cloud storage (video stored as a URL)

---

Core Product / Feature Ideas

1) Reels-style feed behavior

• Users scroll through a vertical feed where food suggestions appear like reels.
• Food items are served as a collection via an API (with a planned “user feed” endpoint).

2) Two authentication systems (separate roles)

The backend implements authentication APIs for:

• User Auth
  • register, login, logout
• Food Partner Auth
  • register, login, logout

3) Token-based auth stored in cookies

• After successful register/login, the backend generates a JWT token and saves it in cookies.
• Middleware validates tokens for protected endpoints.

4) Protected food-item creation

• Only food partners can create food items (food upload API is protected).
• Normal users cannot add content.

5) Food item includes video + metadata

A “Food” entry includes:

• name
• description
• video URL (stored as a URL, not raw files in the DB)
• foodPartner reference (the uploader)

---

Backend Tutorial: Key Technical Steps

A) Server + folder structure (production-like)

• Uses Express
• Uses a clear structure:
  • app.js for app setup/export
  • server.js for starting server (app.listen)
  • src/ with subfolders: controllers, routes, models, config/db.js

B) Database connection

• Uses MongoDB with Mongoose
• db.js connects using:
  • mongoose.connect("mongodb://localhost:27017/<dbName>")

C) Dummy API + testing

• Creates a basic route and tests API working via Postman.

D) Auth APIs (register/login/logout)

1) Register flow

• Validate email already exists using findOne
• Hash password using bcryptjs
• Create user in MongoDB
• Create JWT including user ID
• Save JWT to cookie using cookie-parser middleware

2) Login flow

• Check user exists by email
• Compare password using bcrypt compare
• If valid:
  • issue a new JWT
  • store it in cookies
• Returns JSON with a success message + user data (no password)

3) Logout

• Clears the auth cookie (removes token)

E) JWT secret moved to environment variables (.env)

• JWT secret is not hardcoded
• Uses dotenv:
  • require("dotenv").config()
• Adds:
  • .env
  • .env.example
• Mentions ignoring .env from Git to avoid exposing secrets

F) Protected routes with middleware

Middleware performs:

1. Checks token exists in cookies
2. Validates token with jwt.verify(token, secret)
3. Extracts foodPartnerId from decoded token
4. Loads the partner from DB
5. Attaches partner to request: req.foodPartner = ...
6. Calls next() to controller

This middleware is used on:

• Food partner food creation endpoint

---

Food Upload & Video Handling (Major Tutorial Section)

1) Food model

Implements a Food schema with fields like:

• name (string, required; uniqueness rules described)
• description (string)
• video (stores URL, not file)
• foodPartner (ObjectId reference to FoodPartner model)

2) Multer for parsing multipart/form-data

• Without multer, uploading a video often causes req.body to be undefined.
• Uses:
  • multer
  • upload.single("video") (field name must match the frontend key)

3) Cloud storage integration (ImageKit)

• Explains why not storing files directly on server (deployment/storage concerns)
• Uses ImageKit as cloud provider
• Requires:
  • ImageKit public key
  • private key
  • URL endpoint
• Stores sensitive keys in .env

4) Storage service abstraction

Creates a service layer:

• services/storage.service.js

It:

• initializes ImageKit client
• exposes:
  • uploadFile(fileBuffer, fileName)
• returns result.url to be saved as the video URL in the DB

5) Controller: create food item

Controller:

• reads metadata from req.body (name, description)
• reads file buffer from req.file
• uploads video buffer to ImageKit
• stores food record in MongoDB, including:
  • returned URL
  • req.foodPartner

6) Testing uploads

• Postman:
  • send video as form-data
  • include cookies (token) for auth-protected endpoint
• After upload, verify ImageKit URL.

---

Additional “Quality Layers” (Not Fully Implemented)

The speaker notes two production-quality layers missing in the demo:

1. DTO/validation layer
   • mentions express-validator
2. db abstraction/DAO layer
   • references a “db file” concept; not fully separated

These are recommended for scalable “quality applications,” but not deeply coded due to time.

---

Frontend Tutorial: React + Routes + Forms

A) Project setup

• Creates React app with a Vite-like dev server
• Dev server runs on port 5173

B) Routing

• Uses React Router DOM
• Planned routes for 4 authentication screens:
  • /user/register
  • /user/login
  • /food-partner/register
  • /food-partner/login
• Later includes a / home route (dummy first)

C) UI generation using Copilot/GPT

• Speaker uses GPT/Copilot to generate minimal registration/login UI
• Mentions theme (light/dark)
• Fixes UI issues like:
  • overflow/wrapping
  • missing/incorrect input fields (e.g., confirm password removed)
  • navigation links (“register as food partner” vs user)

D) Axios integration + CORS fix

• Uses Axios to call backend auth endpoints
• Encountered browser CORS error
• Fix:
  • install cors
  • enable CORS in backend:
    • app.use(cors({ origin: ..., credentials: true }))
• Ensures cookie flow between:
  • 5173 frontend -> 3000 backend

E) Cookie-based auth continuity + redirect

• After user registration:
  • token is set in cookies
  • app redirects to / home/feed page (feed displayed later)

---

Troubleshooting Points (How-To)

• API not found: ensure routers are mounted in app.js with correct prefix (e.g., app.use('/api/auth', authRoutes)).
• req.body undefined for video upload: use multer with the correct field name.
• JWT secret exposed: move secrets to .env.
• CORS blocked: configure backend CORS for frontend origin and allow credentials.

---

Main Speakers / Sources

Main speakers (as stated)

• Ankur Prajapati
• Primary instructor (the other “I” speaker)

Sources / tools referenced

• Zomato concept
• Postman
• MongoDB / Mongoose
• Express
• JWT
• bcryptjs
• multer
• ImageKit
• React Router DOM
• Axios
• CORS
• Copilot / GPT for UI generation