EatBest – Food Website

About the Project: EatBest is a responsive food website built with vanilla JavaScript and Tailwind CSS. It features a modular component-based architecture where each section is a separate JS module powered by JSON data files — clean, organized, and easy to maintain.

Key Highlights: Component-based structure with JSON-driven content, interactive food menu with category filtering, and a fully responsive layout across all screen sizes.

Project Details

What's Inside

• Header — Fixed navigation with sticky scroll effect and mobile menu.
• Hero — Full-screen banner with headline, description, and call-to-action buttons.
• Promo — Horizontally scrollable cards highlighting featured food categories.
• About — Two-column section with brand story, features list, and animated deal badge.
• Food Menu — Filterable grid of food items with pricing, ratings, and discount badges.
• Delivery — Promotional section highlighting fast and reliable food delivery.
• Testimonials — Customer review cards with name, role, rating, and feedback.
• Banners — Responsive image grid with overlay text and order buttons.
• Blog — Article cards with category tags, dates, author info, and excerpts.
• Footer — Multi-column footer with navigation, social links, and newsletter form.
• Back to Top — Smooth scroll button that appears after scrolling down the page.

Key Features

• Component-Based Architecture — Each section is a separate JavaScript module for clean, maintainable code.
• JSON-Driven Content — All section content is stored in JSON files, making updates simple and fast.
• Category Filtering — Food menu filters items by category without any page reload.
• Mobile Navigation — Animated mobile menu overlay with smooth open and close transitions.
• Sticky Header — Header switches to solid white background with shadow on scroll.
• Responsive Design — Fully responsive layout built with Tailwind CSS utility classes.
• Hover Interactions — Image zoom, button reveal, and shadow effects on interactive elements.
• Back to Top Button — Fixed button that fades in after scrolling and scrolls smoothly to the top.

Technologies Used

• HTML5 — Semantic markup structure with component root elements for each section.
• Tailwind CSS (CDN) — Utility-first CSS framework for responsive layout and styling.
• Vanilla JavaScript (ES Modules) — Component rendering and interactivity using native JS modules.
• JSON — Structured data files used to populate all website sections dynamically.
• Google Fonts — Rubik, Roboto, and Shadows Into Light for consistent typography.
• Ionicons — Icon library used for social media and UI icons throughout the site.

Project Structure

eat-best/
│
├── index.html                    # Main HTML with component root elements
│
├── assets/
│   ├── data/                     # JSON content files
│   │   ├── header.json          # Navigation and logo data
│   │   ├── hero.json            # Hero section content
│   │   ├── promo.json           # Promotional cards data
│   │   ├── about.json           # About section content
│   │   ├── menu.json            # Food menu items and categories
│   │   ├── delivery.json        # Delivery section content
│   │   ├── testimonial.json     # Customer reviews data
│   │   ├── banner.json          # Banner grid content
│   │   ├── blog.json            # Blog posts data
│   │   └── footer.json          # Footer links and info
│   │
│   ├── js/                       # JavaScript component modules
│   │   ├── app.js               # Main entry point — imports all components
│   │   ├── header.js            # Header navigation with mobile menu
│   │   ├── hero.js              # Hero banner component
│   │   ├── promo.js             # Promotional cards section
│   │   ├── about.js             # About section with features list
│   │   ├── menu.js              # Food menu with category filtering
│   │   ├── delivery.js          # Delivery section component
│   │   ├── testimonial.js       # Customer testimonials section
│   │   ├── banner.js            # Promotional banner grid
│   │   ├── blog.js              # Blog articles section
│   │   ├── footer.js            # Footer with newsletter form
│   │   └── backTop.js           # Back to top button
│   │
│   └── images/                   # Hero backgrounds, food images, banners, avatars, icons
│
├── LICENSE                       # MIT License file
└── README.md                     # Project documentation
    

Quick Start

1. Clone the repository:

   git clone https://github.com/nawazdevx/eat-best.git

  <li>
    <strong>Open the project:</strong>
    <ul>
      <li>Open <code>index.html</code> directly in your browser</li>
      <li>Or run a local server:</li>
    </ul>
    <pre><code>python -m http.server 3000</code></pre>
    Then visit <code>http://localhost:3000</code>
  </li>

  <li>
    <strong>Start Customizing:</strong>
    <ul>
      <li>Update navigation links and logo in <code>assets/data/header.json</code></li>
      <li>Change hero text, buttons, and background image in <code>assets/data/hero.json</code></li>
      <li>Add or edit food items, prices, and categories in <code>assets/data/menu.json</code></li>
      <li>Update blog posts and article content in <code>assets/data/blog.json</code></li>
      <li>Edit footer links, social URLs, and brand info in <code>assets/data/footer.json</code></li>
    </ul>
  </li>
</ol>

License: This project is licensed under the MIT License.

Contact: Connect with me on LinkedIn or visit my Portfolio.

Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.

Project Preview

Live project ➜ Live Demo