🎃 Hacktoberfest 2025

🍽️ Foodie — Responsive Food Delivery Website

🧁 Overview

Foodie is a sleek, responsive food delivery web app built using HTML5, CSS, and JavaScript. Designed for performance, accessibility, and user delight — it offers an effortless browsing and ordering experience across all devices.

⭐ Don’t forget to Star the repo if you like it — it helps others discover this project!

🧰 Tech Stack

Technology	Description
HTML5	Semantic and accessible markup
CSS3	Responsive styling and layout
JavaScript (ES6)	Dynamic UI and client-side interactivity
Deployment	Hosted on GitHub Pages for free, fast delivery

✨ Key Features

✅ Fully Responsive — Works seamlessly on mobile, tablet, and desktop. 💡 Modern UI/UX — Minimalist design with smooth animations and intuitive navigation. 🛒 Smart Cart System — Add, edit, or remove items with instant price updates. ⏱️ Real-Time Tracking — Get live order status and estimated delivery time. 🔒 Secure Checkout — Integrated payment simulation with form validation. 🧩 Reusable Components — Modular, maintainable, and scalable architecture.

🚀 Getting Started

Follow these steps to run Foodie locally on your system 👇

1️⃣ Clone the Repository

git clone https://github.com/janavipandole/Foodie.git

2️⃣ Navigate into the Project Folder

cd Foodie

3️⃣ Open in Your Browser

Simply open the html/index.html file in your browser:

# Windows (PowerShell or CMD)
start "" html\index.html

# macOS
open html/index.html

# Linux
xdg-open html/index.html

Or, use Live Server in VS Code:

In VS Code, right‑click html/index.html → “Open with Live Server”

🧩 Chrome Extension

Load the extension for local testing:

Open chrome://extensions
Toggle “Developer mode”
Click “Load unpacked” and select the chrome extension/ folder

📊 Google Analytics Setup

To enable Google Analytics tracking on your Foodie website, follow these steps 👇

1️⃣ Get Your Measurement ID

Go to Google Analytics → Admin → Data Streams → Web
Copy your Measurement ID (looks like G-XXXXXXXXXX)

2️⃣ Add Tracking Script

Insert the following script inside the section of your main HTML file (e.g., html/index.html):

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

NOTE:- 💡 Replace G-XXXXXXXXXX with your actual Measurement ID.

3️⃣ Verify Tracking

Visit your website and interact with it
Open Google Analytics → Realtime → View Stream ID
You should see your visit appear within seconds 🎯

🚢 Deployment (GitHub Pages)

This site’s entry file is at html/index.html. To use GitHub Pages:

Option A: Move html/index.html (and assets) to the repo root so the root has index.html.
Option B: Create a root index.html that redirects to /html/.
Option C: Use Pages “/docs” and move html → docs.

🧪 Command for Running Tests

This project uses Jest for unit testing JavaScript modules.

To run all tests:

npm test

To see detailed output for each test (test names and results), run:

npm test -- --verbose

This will show the name and result of every test, making it easier to debug and understand the test coverage.

Test files are located in the tests/ directory. You can add more tests for other modules as needed.

🤝 Contributing

We ❤️ open-source contributions! Whether it’s bug fixes, new features, or improving documentation — every contribution counts! 🌍

🪜 Steps to Contribute

Fork this repository Click the Fork button on the top right corner of this page.

Clone your forked repo

git clone https://github.com/<your-username>/Foodie.git

Create a new branch

git checkout -b feature/your-feature-name

Make your changes Add your improvements or fix bugs.

Commit your changes

git add .
git commit -m "Added: new feature or improvement"

Push to your branch

git push origin feature/your-feature-name

Create a Pull Request Go to your fork on GitHub and click “Compare & pull request”. 🎉 That’s it! Wait for review and merge.

📘 For more details, see the CONTRIBUTING.md file.

❄️ Winter Of Code Social 2025

This project is excited to be a part of Winter Of Code Social 2025! Contribute awesome pull requests, learn new technologies, and become a part of the open-source community. Whether you’re a beginner or a pro, this is your chance to grow and collaborate with developers around the world. 👉 Register here: woc.codesocial.tech