BiteBetter

BiteBetter is a recipe discovery web application that helps users find meals based on diet preferences and allergies. It uses the Spoonacular API (with a daily limit of 50 API calls) to fetch recipes and provides a multi-page interactive experience with favorites and nutrition insights. This project was developed as a part of "Web Development Engineering Workshop (Design Thinking and Idea Lab)" course in our college curriculum.

---

Team Members

• Member 1:
  Jiya Choksi
  Roll No: 251081017
  JavaScript, API Integration & Hosting

• Member 2:
  Janhavi Atul Mahajan
  Roll No: 251081027
  JavaScript, API Integration & Design

• Member 3:
  Pahel Nisar
  Roll No: 251081074
  Design, Styling & UI

---

Live Demo

https://jiyac-code.github.io/BiteBetter/

---

Features

• Recipe search based on diet types
• Allergy-based filtering system
• Detailed recipe instructions & ingredients
• Nutrition analysis with Chart.js
• Add/remove favorites (localStorage)
• Multi-page navigation system
• Fully responsive UI design

---

Tech Stack

• HTML
• CSS
• JavaScript
• Spoonacular API
• Chart.js
• GitHub Pages (for hosting)

---

Project Structure

bitebetter/
│
├── README.md 
├── index.html
├── js/
├── css/
├── pages/
└── assets/images/

---

How It Works

1. User selects diet & allergies
2. API request is sent to Spoonacular
3. Recipes are displayed dynamically
4. Users can:
   • View recipe details
   • Save favorites
   • View nutrition charts

---

API Setup

This project uses Spoonacular API with a daily limit of 50 API calls.

To run locally:

1. Get API key: https://spoonacular.com/food-api
2. Replace in index.js:
   const apiKEY = "YOUR_API_KEY";