Glovo Replica - Food Delivery App

A full-stack food delivery application similar to Glovo, built with React, Node.js, and SQLite.

Features

🍕 Core Features

• User Authentication - Register, login, and profile management
• Restaurant Browsing - Browse restaurants with ratings, delivery times, and fees
• Menu Management - View restaurant menus with categories and item details
• Shopping Cart - Add items to cart with quantity management
• Order Placement - Place orders with delivery address and notes
• Order Tracking - View order history and status updates
• Real-time Updates - Live order status updates using Socket.io
• Responsive Design - Mobile-friendly interface

🛠️ Technical Features

• Frontend: React 18 with TypeScript and Tailwind CSS
• Backend: Node.js with Express.js
• Database: SQLite with sample data
• Authentication: JWT-based authentication
• Real-time: Socket.io for live updates
• State Management: React Context API
• UI Components: Custom components with Lucide React icons

Project Structure

glovo-replica/
├── client/                 # React frontend
│   ├── public/
│   ├── src/
│   │   ├── components/     # Reusable components
│   │   ├── contexts/       # React contexts
│   │   ├── pages/          # Page components
│   │   └── App.tsx
│   └── package.json
├── server/                 # Node.js backend
│   ├── database/           # Database initialization
│   ├── middleware/         # Auth middleware
│   ├── routes/             # API routes
│   └── index.js
└── package.json           # Root package.json

Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone and install dependencies:

   git clone <repository-url>
   cd glovo-replica
   npm run install-all

2. Initialize the database:

   cd server
   node init-db.js

3. Start the development servers:

   npm run dev

   This will start:

   • Backend server on http://localhost:5000
   • Frontend development server on http://localhost:3000

Demo Credentials

Use these credentials to test the application:

• Email: user@glovo.com
• Password: password123

API Endpoints

Authentication

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• GET /api/auth/me - Get current user

Restaurants

• GET /api/restaurants - Get all restaurants
• GET /api/restaurants/:id - Get restaurant by ID
• GET /api/restaurants/:id/menu - Get restaurant menu
• GET /api/restaurants/search/:query - Search restaurants

Orders

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

Users

• GET /api/users/profile - Get user profile
• PUT /api/users/profile - Update user profile
• PUT /api/users/password - Change password

Sample Data

The application comes with sample data including:

• 4 sample restaurants (Pizza Palace, Burger King, Sushi Master, Taco Fiesta)
• Menu items with categories
• Sample user accounts

Features in Detail

🏠 Home Page

• Restaurant grid with search functionality
• Restaurant cards showing ratings, delivery time, and fees
• Responsive design for mobile and desktop

🍽️ Restaurant Page

• Detailed restaurant information
• Menu organized by categories
• Add to cart functionality
• Quantity management

🛒 Shopping Cart

• View cart items grouped by restaurant
• Update quantities
• Remove items
• Order summary with delivery fees
• Checkout process

📋 Orders Page

• Order history with status tracking
• Order details with items
• Real-time status updates
• Order tracking timeline

👤 Profile Page

• Update personal information
• Change password
• Manage delivery address

Real-time Features

The app uses Socket.io for real-time updates:

• Order status changes
• Live order tracking
• Real-time notifications

Styling

The application uses Tailwind CSS with a custom color scheme:

• Primary: Blue tones (#0ea5e9)
• Secondary: Yellow tones (#eab308)
• Clean, modern design
• Mobile-first responsive layout

Development

Running in Development Mode

# Install all dependencies
npm run install-all

# Start both frontend and backend
npm run dev

# Or start individually
npm run server  # Backend only
npm run client  # Frontend only

Building for Production

# Build the React app
npm run build

# The built files will be in client/build/

Database Schema

The SQLite database includes these tables:

• users - User accounts
• restaurants - Restaurant information
• categories - Menu categories
• menu_items - Individual menu items
• orders - Order records
• order_items - Order item details

Future Enhancements

• Payment integration (Stripe, PayPal)
• Advanced order tracking with GPS
• Restaurant admin panel
• Delivery driver app
• Push notifications
• Multi-language support
• Advanced search and filters
• User reviews and ratings
• Loyalty program
• Restaurant analytics

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is licensed under the MIT License.

Support

For support or questions, please open an issue in the repository.

---

Note: This is a replica/learning project and is not affiliated with Glovo. It's built for educational purposes to demonstrate full-stack web development skills.