About Project: A responsive food delivery website featuring menu filtering, promotional sections, customer testimonials, and smooth navigation. Built with modular JavaScript components that load content from JSON files, Tailwind CSS utility classes for modern styling, and interactive category filtering for the food menu all organized with clean component architecture that food delivery businesses can easily customize, and much more.
What I learned: Implemented modular JavaScript component architecture with separate files for each section, used async/await to load JSON data for content management, created category filtering with state management, and built responsive layouts using Tailwind CSS utility classes, and much more.
Personal Note:
I started building HTML, CSS, and JavaScript projects in 2022.
At that time, I focused on learning first and began uploading to GitHub recently.
Now I'm working with React.js and Next.js, and seeking opportunities as a frontend or web developer.
- Header Navigation - Fixed header with mobile menu overlay, smooth transitions, and scroll-triggered background change
- Hero Section - Full-width banner with background image, call-to-action buttons, and responsive text sizing
- Promo Cards - Horizontal scrollable product cards with icons, images, and diagonal orange backgrounds
- About Section - Two-column layout with animated bouncing deal badge, features list with checkmark icons
- Food Menu - Category filtering system with All, Pizza, Burger, and Chicken tabs showing price, discount badges, and hover effects
- Delivery Section - Split layout showcasing fast delivery promise with delivery boy illustration
- Testimonials - Customer review cards with profile images, ratings, and role information
- Banner Grid - Responsive promotional banner grid with different sizes, image overlays, and hover zoom effects
- Blog Section - Article cards with category badges, dates, excerpts, and read more links
- Footer - Multi-column footer with brand info, navigation links, newsletter signup, and social media icons
- Back to Top - Floating button that appears on scroll for quick page navigation
- HTML5 - Semantic structure with section containers for component rendering
- Tailwind CSS (CDN) - Utility-first styling with custom font configuration for responsive design
- JavaScript (ES6 Modules) - Modular component architecture with async/await for JSON loading
- JSON Files - Separate data files for header, hero, promo, about, menu, delivery, testimonials, banner, blog, and footer content
- Google Fonts - Roboto, Rubik, and Shadows Into Light font families for professional typography
- Ionicons - Icon library for checkmarks and social media icons
- CSS Animations - Bounce animation for promotional badges and smooth transitions throughout
- Responsive Design - Mobile-first approach with Tailwind breakpoints (sm, md, lg, xl)
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
│ │ ├── menu.js # Food menu with category filtering
│ │ ├── delivery.js # Delivery section component
│ │ ├── testimonial.js # Customer testimonials
│ │ ├── banner.js # Promotional banner grid
│ │ ├── blog.js # Blog articles section
│ │ ├── footer.js # Footer with newsletter
│ │ └── backTop.js # Back to top button
│ │
│ └── images/ # Hero backgrounds, food images, banners, avatars, icons
│
├── LICENSE # MIT License file
└── README.md # Project documentation
- Fully Responsive Design - Optimized for all screen sizes from mobile to desktop with Tailwind breakpoints
- Modular Component System - Each section built as separate JavaScript module for easy maintenance
- JSON-Based Content - All text, images, and data loaded from JSON files for simple content updates
- Category Filtering - Interactive food menu with All, Pizza, Burger, and Chicken category tabs
- Mobile Navigation - Full-screen overlay menu with smooth slide-up animation and close button
- Sticky Header - Fixed navigation that adds shadow and background on scroll
- Discount Badges - Price tags with old price strikethrough and percentage discount labels
- Hover Effects - Image zoom on banners, button transitions, and card shadow effects
- Star Ratings - Visual rating display using repeated star symbols for testimonials and menu items
- Animated Elements - Bouncing deal badge and smooth transitions throughout the site
- Newsletter Form - Email subscription input in footer with submit button
- Social Media Links - Footer icons for Facebook, Instagram, and Twitter
- Back to Top Button - Appears after scrolling 300px with smooth scroll behavior
- Order Buttons - Call-to-action buttons that appear on menu item hover
- Grid Layouts - Responsive banner grid with different size configurations
- Easy Customization - Update content by editing JSON files without touching code
-
Clone the repository:
git clone https://github.com/nawazdevx/eat-best.git
<li>
<strong>Open the project:</strong>
<ul>
<li>You'll need a local server because the project uses ES6 modules and fetches JSON files</li>
<li>Run a local server using one of these methods:</li>
</ul>
<pre><code># Using Python
python -m http.server 3000
npx http-server -p 3000
php -S localhost:3000
Then visit http://localhost:3000
<li>
<strong>Start Customizing:</strong>
<ul>
<li>Update content in JSON files inside <code>assets/data/</code> folder</li>
<li>Replace images in <code>assets/images/</code> folder</li>
<li>Customize colors by editing Tailwind classes in component files</li>
<li>Add new menu items or categories in <code>menu.json</code></li>
</ul>
</li>
</ol>
- Text Content: Edit JSON files in
assets/data/folder - update restaurant name, descriptions, prices, and all text content without touching JavaScript - Colors: Change Tailwind color classes in component files inside
assets/js/// Example: Change primary color from orange-500 to blue-500 // Find and replace in all JS files: bg-orange-500 → bg-blue-500 text-orange-500 → text-blue-500 hover:bg-orange-600 → hover:bg-blue-600 - Images: Replace files in
assets/images/folder then update image paths in corresponding JSON files (keep same filenames for easier updates) - Fonts: Update Google Fonts link in HTML
<head>and modifytailwind.configtheme.extend.fontFamily section - Menu Items: Add or remove food items in
assets/data/menu.json- include title, category, image, price, oldPrice, discount, and rating - Categories: Update the categories array in
menu.jsonto add new filtering options - Navigation: Edit links in
assets/data/header.jsonandfooter.jsonto match your page structure - Promo Cards: Modify items in
promo.jsonto feature different products or offers - Testimonials: Update customer reviews in
testimonial.jsonwith name, role, review text, image, and rating - Blog Posts: Add articles in
blog.jsonwith image, category, date, author, title, excerpt, and link - Banner Grid: Customize promotional banners in
banner.json- change size (large, medium, small) to adjust grid layout
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.
