🍽️ Foodie’s Book

Foodie’s Book is a modern, responsive recipe discovery web application that enables users to search for food items and instantly explore curated recipes, ingredient lists, and step-by-step cooking instructions using the Edamam Recipe Search API.

This project is built using HTML, CSS, JavaScript, and Bootstrap, with a strong focus on UI/UX, performance, and clean code structure.

---

📖 Table of Contents

• Overview
• Project Motivation
• Features
• Tech Stack
• Application Architecture
• Project Structure
• Setup & Installation
• API Configuration
• Usage Guide
• UI/UX Highlights
• Keyboard Shortcuts

---

📌 Overview

Foodie’s Book provides a seamless cooking discovery experience by allowing users to:

• Search for recipes based on food preferences
• View calories, cooking time, cuisine type, and dietary labels
• Explore ingredients visually
• Follow cooking instructions step by step

The application runs entirely on the frontend and fetches real-time recipe data from a third-party API.

---

🎯 Project Motivation

Finding the right recipe that matches cravings can be time-consuming. Foodie’s Book solves this problem by:

• Reducing search effort
• Presenting visually rich recipe cards
• Offering quick access to ingredients and cooking steps
• Delivering a smooth, distraction-free UI

This project was built to practice:

• API integration
• DOM manipulation
• Responsive design with Bootstrap
• Clean JavaScript architecture
• Real-world frontend workflows

---

✨ Features

Core Features

• 🔍 Search recipes by food name
• 📦 Fetch real-time data from Edamam API
• 🧾 Dynamic recipe cards
• 📋 Ingredient breakdown
• 🧑‍🍳 Cooking instructions display
• 🔄 Grid and list view toggle

UI & Interaction

• 🎥 Hero section with background video
• ⏳ Animated loading screen
• 🔔 Toast notifications for feedback
• ⬆️ Floating scroll-to-top button
• 🎯 Quick search suggestions
• 📱 Fully responsive design

Utility Features

• 🖨️ Print recipe
• 🔗 Share recipe (Web Share API / Clipboard)
• ❤️ Save recipe (UI-level simulation)
• ⌨️ Keyboard shortcuts

---

🛠️ Tech Stack

Frontend

• HTML5 – Semantic structure
• CSS3 – Custom styling & animations
• JavaScript (ES6+) – Application logic
• Bootstrap 5 – Responsive layout
• Font Awesome – Icons

API

• Edamam Recipe Search API

---

🧠 Application Architecture

User
 ↓
Search Input
 ↓
Form Submission
 ↓
Fetch Request (Edamam API)
 ↓
Recipe Data (JSON)
 ↓
DOM Rendering
 ↓
User Interaction (View Recipe)
 ↓
Ingredients & Instructions Display

---

📂 Project Structure

Foodies-Book/
├── index.html
├── bootstrap/
│   ├── css/
│   │   ├── bootstrap.min.css
│   │   └── style.css
│   └── js/
│       ├── app.js
│       └── bootstrap.bundle.js
├── assets/
│   └── bgvid.webm
└── README.md

---

⚙️ Setup & Installation

Prerequisites

• Modern web browser (Chrome, Edge, Firefox)
• Active internet connection

Installation Steps

git clone https://github.com/your-username/foodies-book.git
cd foodies-book

Open index.html in your browser.

No build tools or backend setup required.

---

🔑 API Configuration

This project uses the Edamam Recipe Search API.

Inside app.js:

const app_id = "YOUR_APP_ID";
const app_key = "YOUR_APP_KEY";

Get API Credentials

1. Visit https://developer.edamam.com
2. Create an application
3. Copy your App ID and App Key
4. Paste them into app.js

⚠️ For production use, avoid exposing API keys in frontend code.

---

🧪 Usage Guide

1. Open the application
2. Enter a food item (e.g., pasta)
3. Click Search Recipe
4. Browse available recipe cards
5. Toggle between Grid and List views
6. Select a recipe
7. View ingredients and cooking instructions
8. Share or print the recipe if needed

---

🎨 UI / UX Highlights

• Smooth transitions and animations
• Lazy-loaded images for better performance
• Clean typography and spacing
• Feedback-driven interactions using toast notifications
• Mobile-first responsive layout using Bootstrap

---

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl + /	Focus search input
Esc	Clear search and scroll to top

---