🍕 Zomatoa - Modern Food Delivery Marketplace

A full-stack food delivery marketplace application built with React, Node.js, Express, and MongoDB. Features real-time order tracking, WhatsApp integration, 10-point rating system, and modern responsive design.

✨ Features

🛍️ Core Marketplace Features

• Restaurant Discovery: Browse restaurants by cuisine, rating, and location
• Advanced Search & Filters: Find restaurants and dishes quickly
• Menu Management: Digital menus with images, descriptions, and prices
• Shopping Cart: Add items from restaurants with quantity management
• Order Management: Place orders with delivery address and payment options

📱 Real-time Order Tracking

• Live Status Updates: Real-time order status using Socket.IO
• Delivery Timeline: Visual timeline showing order progress
• Location Tracking: Track delivery partner location (simulated)
• Estimated Delivery Time: Dynamic delivery time calculations

⭐ 10-Point Rating & Review System

• Detailed Reviews: Customers can rate dishes on a 1-10 scale
• Review Categories: Tag reviews by taste, quantity, packaging, delivery, value
• Helpful Reviews: Mark reviews as helpful
• Verified Reviews: Only customers who ordered can review

📞 WhatsApp Integration

• Restaurant Contact: Direct WhatsApp link to restaurant
• Delivery Partner Contact: WhatsApp delivery partner during delivery
• Order Updates: Get order updates via WhatsApp (configurable)

🎨 Modern UI/UX

• Responsive Design: Works perfectly on all devices
• Smooth Animations: Framer Motion animations throughout
• Glass Morphism: Modern glassmorphism design elements
• Gradient Themes: Beautiful gradient color schemes
• Interactive Elements: Hover effects and micro-interactions

🔐 Authentication & Security

• JWT Authentication: Secure user authentication
• Role-based Access: Customer, Restaurant Owner, Delivery Partner roles
• Protected Routes: Secure API endpoints
• Password Encryption: Bcrypt password hashing

🚀 Tech Stack

Frontend

• React 18: Modern React with hooks
• React Router: Client-side routing
• Axios: HTTP client for API calls
• Socket.IO Client: Real-time communication
• Framer Motion: Smooth animations
• React Icons: Beautiful icon library
• React Toastify: Toast notifications

Backend

• Node.js: JavaScript runtime
• Express.js: Web application framework
• MongoDB: NoSQL database
• Mongoose: MongoDB object modeling
• Socket.IO: Real-time bidirectional communication
• JWT: JSON Web Tokens for authentication
• Bcrypt: Password hashing
• Multer: File upload handling

📦 Installation & Setup

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local or cloud)
• npm or yarn

1. Clone the Repository

git clone <repository-url>
cd zomatoa-app

2. Install Dependencies

Backend Dependencies

npm install

Frontend Dependencies

cd client
npm install

3. Environment Configuration

Create a .env file in the root directory:

NODE_ENV=development
PORT=5000
MONGODB_URI=mongodb://localhost:27017/zomatoa
JWT_SECRET=your_jwt_secret_key_here_make_it_long_and_secure
FRONTEND_URL=http://localhost:3000

4. Database Setup

Make sure MongoDB is running on your system:

# For Windows (if MongoDB is installed as a service)
net start MongoDB

# For macOS/Linux
mongod

5. Start the Application

Start Backend Server

npm run dev

Start Frontend (in a new terminal)

cd client
npm start

The application will be available at:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000

📱 Usage Guide

For Customers

1. Register/Login: Create an account or login
2. Browse Restaurants: Explore restaurants by cuisine or search
3. View Menu: Check restaurant details and menu items
4. Add to Cart: Add items to your shopping cart
5. Place Order: Enter delivery address and place order
6. Track Order: Real-time tracking of your order
7. Contact Support: WhatsApp restaurant or delivery partner
8. Rate & Review: Rate dishes after delivery

For Restaurant Owners

1. Register as Restaurant: Sign up with restaurant role
2. Add Restaurant Details: Complete restaurant profile
3. Manage Menu: Add/update menu items with images
4. Receive Orders: Get notified of new orders
5. Update Order Status: Mark orders as confirmed, preparing, ready
6. Customer Communication: Respond to customer queries

For Delivery Partners

1. Register as Delivery Partner: Sign up with delivery role
2. Accept Orders: Accept delivery requests
3. Update Location: Share real-time location with customers
4. Update Status: Mark orders as picked up, on the way, delivered
5. Customer Communication: WhatsApp customers for delivery updates

🎯 Key Features Breakdown

Real-time Order Tracking

• Socket.IO integration for live updates
• Visual timeline with order status
• Estimated delivery time calculations
• Location tracking simulation

WhatsApp Integration

// Example WhatsApp link generation
const openWhatsApp = (phone, message) => {
  const whatsappUrl = `https://wa.me/${phone}?text=${encodeURIComponent(message)}`;
  window.open(whatsappUrl, '_blank');
};

10-Point Rating System

• Detailed rating from 1-10 for each dish
• Category-based reviews (taste, quantity, packaging, etc.)
• Helpful review voting system
• Verified purchase reviews only

Responsive Design

• Mobile-first approach
• Flexible grid layouts
• Touch-friendly interactions
• Optimized for all screen sizes

🔧 API Endpoints

Authentication

• POST /api/auth/register - User registration
• POST /api/auth/login - User login

Restaurants

• GET /api/restaurants - Get all restaurants with filters
• GET /api/restaurants/:id - Get restaurant details
• POST /api/restaurants - Create restaurant (owners only)

Orders

• POST /api/orders - Create new order
• GET /api/orders/my-orders - Get user orders
• GET /api/orders/:id - Get order details
• PATCH /api/orders/:id/status - Update order status

Reviews

• POST /api/reviews - Create review
• GET /api/reviews/restaurant/:id - Get restaurant reviews
• POST /api/reviews/:id/helpful - Mark review as helpful

🎨 Design Features

Color Scheme

• Primary: Linear gradient (#667eea to #764ba2)
• Secondary: #ff6b6b, #4ecdc4
• Success: #2ecc71
• Warning: #ffa500
• Error: #e74c3c

Typography

• Font Family: Inter (Google Fonts)
• Weights: 300, 400, 500, 600, 700, 800

Animations

• Smooth page transitions
• Hover effects on interactive elements
• Loading animations
• Micro-interactions for better UX

🚀 Deployment

Frontend Deployment (Netlify/Vercel)

1. Build the React app:

cd client
npm run build

2. Deploy the build folder to your hosting service

Backend Deployment (Heroku/Railway)

1. Set environment variables on your hosting platform
2. Deploy the root directory (contains server.js)

Database (MongoDB Atlas)

1. Create a MongoDB Atlas cluster
2. Update MONGODB_URI in environment variables

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• React team for the amazing framework
• MongoDB for the flexible database
• Socket.IO for real-time capabilities
• Framer Motion for smooth animations
• All the open-source contributors

📞 Support

For support, email support@zomatoa.com or join our Slack channel.

---

Built with ❤️ by the Zomatoa Team