🍔 Zomato Clone

🍕 Food Delivery Frontend UI

A frontend Zomato-inspired food delivery website built using HTML5 and CSS3.

The project focuses on recreating the visual structure of a modern food-delivery platform and demonstrates frontend fundamentals including layouts, navigation, restaurant sections, images and responsive styling.

---

🌐 Live Demo

---

🚀 Project Overview

The application provides a static food-delivery style interface inspired by popular food ordering platforms.

                  🍔 FOOD DELIVERY
                         │
          ┌──────────────┼──────────────┐
          │              │              │
          ▼              ▼              ▼
      🍕 Food        🏪 Restaurants   📍 Location
          │              │              │
          └──────────────┼──────────────┘
                         │
                         ▼
                   🛒 Food UI

---

✨ Features

• 🍔 Food delivery interface
• 🏪 Restaurant-style sections
• 🍕 Food categories
• 🖼️ Food and restaurant images
• 📍 Location-oriented UI
• 🔍 Search-style interface
• 🎨 Custom CSS design
• 📱 Responsive layout
• 🔗 Navigation sections

This project is a frontend UI clone and does not implement real food ordering, payments or restaurant APIs.

---

🛠️ Technologies Used

Frontend

• HTML5
• CSS3

UI

• CSS Flexbox
• CSS Grid
• Responsive Design
• Custom Styling

Deployment

• GitHub Pages

---

📁 Project Structure

zomato-clone-app/
│
├── Images/
│   ├── Food Images
│   ├── Restaurant Images
│   └── UI Assets
│
├── index.html
├── style.css
└── README.md

---

🎨 UI Structure

                Header
                  │
                  ▼
             Navigation
                  │
                  ▼
            Search / Hero
                  │
                  ▼
          Food Categories
                  │
                  ▼
        Restaurant Sections
                  │
                  ▼
             Food Cards
                  │
                  ▼
               Footer

---

⚙️ Run Locally

1. Clone Repository

git clone https://github.com/Nandhasv05/zomato-clone-app.git

2. Navigate to Project

cd zomato-clone-app

3. Run

Open:

index.html

directly in your browser.

For development, VS Code Live Server is recommended.

---

📱 Responsive Design

The project focuses on adapting the UI across:

💻 Desktop
   │
   ▼
💻 Laptop
   │
   ▼
📱 Tablet
   │
   ▼
📱 Mobile

---

🎓 What I Learned

This project helped strengthen my understanding of:

• HTML semantic structure
• CSS layouts
• Flexbox
• Grid
• Responsive design
• Image handling
• UI composition
• Navigation
• Git and GitHub
• Static website deployment

---

🚀 Future Improvements

• Rebuild using React
• Add TypeScript
• Add restaurant search
• Add restaurant filters
• Add food categories
• Add cart functionality
• Add user authentication
• Add Node.js backend
• Add MySQL/PostgreSQL
• Add REST API
• Add payment gateway
• Add restaurant dashboard
• Add order tracking
• Add Google Maps integration

---

🔄 Full-Stack Version

The current project is a static frontend. A future version could evolve into:

                 React / Next.js
                       │
                       ▼
                    API Layer
                       │
                       ▼
                Node.js / Express
                       │
            ┌──────────┴──────────┐
            ▼                     ▼
        PostgreSQL              Redis
            │
            ▼
     Restaurant Database
            │
            ▼
       Order Management
            │
            ▼
      Payment Integration

---

👨‍💻 Developer

Nandhakumar S V

Full Stack Developer

Current Stack

Frontend
├── React
├── Next.js
├── React Native
├── TypeScript
└── JavaScript

Backend
├── Node.js
├── Express.js
├── PHP
└── REST APIs

Database
├── MySQL
└── PostgreSQL

Cloud / DevOps
├── AWS
├── Docker
├── Nginx
└── CI/CD

---

🌐 Portfolio

https://nandhakumarsvdev.netlify.app/

---

💼 Freelance Development

BuildNexDev

I build custom digital solutions for businesses through BuildNexDev.

Services include:

🌐 Business Websites
💻 Web Applications
📱 Mobile Applications
🛠️ Admin Dashboards
🔌 REST APIs
💳 Payment Integration
☁️ Cloud Deployment
🔧 Maintenance

🌐 https://buildnexdev.in/

---

🔗 Connect With Me

---

🍔 A frontend food-delivery UI project

Built with HTML + CSS

⭐ If you like this project, consider giving it a star!