🍔 MealReel

A full-stack MERN food discovery platform inspired by modern short-video reel systems where users can discover food through engaging video content and order directly from food partners.

---

🚀 Overview

MealReel transforms the traditional food ordering experience into an interactive short-video based platform. Instead of browsing static food images, users can explore food through dynamic reels uploaded by food partners and directly place orders from the application.

The platform is built with a scalable MERN stack architecture focusing on:

• Secure authentication
• RESTful backend APIs
• Interactive frontend experience
• Responsive mobile-first UI
• Real-time user interactions
• Scalable backend structure

---

✨ Features

👤 Authentication System

• JWT-based authentication

• Secure login & registration system

• Separate roles for:

  • Users
  • Food Partners

• Protected routes using middleware

• Session management & authorization

---

🎥 Food Reels System

• Upload short food videos
• Browse food reels feed
• Responsive reels-style UI
• Smooth video playback experience
• Interactive food discovery experience

---

❤️ User Interaction Features

• Like food reels
• Save favorite reels
• Explore food content dynamically
• Browse uploaded food items

---

🛒 Ordering System

• Place food orders directly from reels
• Order management workflow
• User order tracking structure
• Food partner order handling

---

📦 Backend Architecture

• RESTful API architecture
• Structured backend routes
• Middleware-based route protection
• Scalable MongoDB schema design
• Secure API handling

---

🛠️ Tech Stack

Frontend

• React.js
• JavaScript
• React Router DOM
• Axios
• Tailwind CSS
• CSS3

---

Backend

• Node.js
• Express.js
• JWT Authentication
• Multer
• REST APIs
• Middleware

---

Database

• MongoDB
• Mongoose ODM
• imagekit

---

Tools & Platforms

• Git
• GitHub
• Postman
• VS Code

---

🧠 Core Learning & Concepts

This project helped in gaining strong understanding of:

• Full-stack MERN architecture
• Backend API development
• JWT authentication workflows
• Protected routes & middleware
• MongoDB schema design
• Frontend-backend communication
• State handling in React
• File uploads using Multer
• Responsive UI development
• Scalable application structure

---

📂 Project Structure

MealReel/
│
├── frontend/
│   ├── components/
│   ├── pages/
│   ├── routes/
│   ├── assets/
│   └── styles/
│
├── backend/
│   ├── controllers/
│   ├── db/
│   ├── routes/
│   ├── middlewares/
│   ├── services/
│   ├── models/
│   └── config/
│
└── README.md

---

⚙️ Installation & Setup

1️⃣ Clone the Repository

git clone <your-github-repo-link>
cd MealReel

---

2️⃣ Install Frontend Dependencies

cd frontend
npm install

---

3️⃣ Install Backend Dependencies

cd backend
npm install

---

4️⃣ Setup Environment Variables

Create a .env file inside the backend folder:

PORT=5000
MONGO_URI=your_mongodb_connection
JWT_SECRET=your_secret_key

---

5️⃣ Start Frontend

npm run dev

---

6️⃣ Start Backend

npm run dev

---

📸 Screenshots

User Register/login page Admin/Foodpartner Register/login page Reel section page Userside Restuarant profile page Creator/FoodPartner Createfood page

🔮 Future Improvements

• Real-time notifications
• Payment gateway integration
• Cloudinary media optimization
• AI-based food recommendations
• Real-time chat system
• Advanced analytics dashboard
• Push notifications

---

🌐 Live Demo

Frontend

will add soon.

Backend

will add soon.

---

👨‍💻 Author

Darsh Desai

MERN Stack Developer passionate about building interactive and scalable full-stack web applications.

• Portfolio: will add soon
• LinkedIn: linkdin
• GitHub: github

---

⭐ Support

If you liked this project, consider giving it a ⭐.

---

🚀 "Building ideas into scalable digital experiences, one project at a time."