📖 Groq Recipe Book

Your personal recipe collection. Store, organize, and discover delicious recipes by Chef Groq.

A modern, responsive recipe management application built with React. Browse recipes by category, search by name, adjust serving sizes dynamically, and keep track of your favorites!

✨ Features

🍳 15+ Curated Recipes - Diverse collection from Greek Salad to Sushi Rolls
🔍 Smart Search - Find recipes by name instantly with real-time filtering
🏷️ Category Filters - Browse by Pasta, Seafood, Salads, Meat, Desserts, Mexican, Korean, Japanese
⚖️ Dynamic Serving Adjustment - Scale ingredient amounts automatically based on servings
⭐ Favorites System - Mark and filter your favorite recipes
📱 Fully Responsive - Seamless experience on desktop, tablet, and mobile
💾 Persistent Storage - LocalStorage integration keeps your data between sessions
🎨 Beautiful UI - Clean, modern design with smooth animations
♿ Accessible - Built with WCAG accessibility guidelines
📋 Interactive Ingredients - Check off ingredients as you cook
📊 Nutrition Information - View nutritional data for each recipe
💡 Cooking Tips - Expert tips included with every recipe
🌐 SEO Optimized - Meta tags and structured data for better discoverability

🚀 Live Demo

View Live Demo

📸 Screenshots

Home Page

Browse recipes by category with beautiful card layouts

Recipe Detail View

Detailed instructions, ingredients with serving adjustments, and nutrition info

Mobile Responsive

Full functionality on any device

🛠️ Tech Stack

Core

React 18.3 - Modern UI library with hooks
Vite 5.0 - Lightning-fast build tool and dev server
JavaScript ES6+ - Modern JavaScript features

Styling

Tailwind CSS 3.4 - Utility-first CSS framework
Custom CSS - Additional styling and animations

State Management

React Context API - Global state management
useImmerReducer - Immutable state updates with Immer
LocalStorage API - Client-side data persistence

UI/UX

Tippy.js - Elegant tooltips and popovers
Custom Hooks - Reusable React logic

📋 Prerequisites

Before you begin, ensure you have:

Node.js (v18.0.0 or higher)
npm (v9.0.0 or higher) or yarn

🔧 Installation & Setup

1. Clone the repository

git clone https://github.com/aymansoliman-dev/GroqRecipeBook.git
aymansoliman-dev GroqRecipeBook

2. Install dependencies

npm install

3. Start development server

npm run dev

4. Open in browser

Navigate to http://localhost:5173

📦 Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Lint code
npm run lint

🎯 Usage Guide

Browsing Recipes

Browse all recipes on the home page
Click category filters (Pasta, Seafood, Salads, etc.) to filter by cuisine
Use the search bar to find specific recipes by name, cuisine, category, or even ingredient
Click on "Cook Now" button in any recipe card to view full details

Viewing Recipe Details

Click "Cook Now" on any recipe card
See complete ingredient list with amounts
Read step-by-step instructions
View nutrition information and cooking tips
Click the ✕ button or press Escape to close

Adjusting Servings

Open any recipe detail page
Find the "Adjust Servings" section
Use - and + buttons to decrease or increase servings
Watch ingredient amounts scale automatically
Original serving count is shown for reference

Managing Favorites

Click the ❤️ (heart) icon on any recipe card
Toggle on/off to add/remove from favorites
Click the "Favorites" filter to view only favorited recipes

Checking Off Ingredients

While viewing a recipe, check ingredient checkboxes as you gather them
Track your progress while cooking
Checkboxes reset when you reopen the recipe

🗂️ Project Structure

aymansoliman-dev
GroqRecipeBook/
│
├── public/
│   ├── robots.txt              # SEO crawler instructions
│   └── favicon files           # App icons
│  
├── src/
│   ├── assets/
│   │   └── asset.svg           # Every svg icon used in the App
│   │
│   ├── components/
│   │   ├── Advertisement.jsx   # Recommending Chef Groq App
│   │   ├── AIChefAssistant.jsx # Link to Chef Groq App
│   │   ├── CategoryBrowser.jsx # Category filter buttons
│   │   ├── Footer.jsx          # App footer
│   │   ├── Header.jsx          # App header with branding
│   │   ├── Logo.jsx            # Reusable logo component
│   │   ├── MainContent.jsx     # Main content wrapper
│   │   ├── NavigationBar.jsx   # App navbar
│   │   ├── RecipeCard.jsx      # Individual recipe card
│   │   ├── RecipePage.jsx      # Full recipe detail modal
│   │   ├── RecipesGrid.jsx     # Recipe cards grid layout
│   │   ├── SearchBar.jsx       # Recipe search input
│   │   ├── Stat.jsx            # Reusable individual stat component
│   │   └── Stats.jsx           # Stas of your recipes
│   │
│   ├── context/
│   │   └── RecipesProvider.jsx # Global state with Context + Reducer
│   │
│   ├── data/
│   │   └── state.js            # Recipe database (15 recipes)
│   │
│   ├── App.css                 # App styles
│   ├── App.jsx                 # Root component
│   └── main.jsx                # App entry point 
│
├── .gitignore                   # Git ignore rules
├── index.html                   # HTML entry point with meta tags
├── vite.config.js               # Vite configuration
├── package.json                 # Dependencies and scripts
├── LICENSE                      # MIT License
└── README.md                    # This file

🎨 Key Features Explained

State Management Architecture

The app uses React Context API with useImmerReducer for predictable, immutable state updates:

// Reducer actions
- viewed_recipe_page // Open recipe detail
- hid_recipe_page    // Close recipe detail
- toggled_favorite   // Toggle favorite status
- selected_category  // Update category filter
- searched           // Update search query

Dynamic Ingredient Scaling

Ingredients are structured as objects with precise measurements:

{
  name: "all-purpose flour",
  amount: 2,
  unit: "cups"
}

When servings are adjusted, amounts scale proportionally:

Base: 2 servings, 2 cups flour
Scaled to 4: 4 cups flour
Scaled to 1: 1 cup flour

LocalStorage Persistence

All state is automatically saved to browser localStorage:

Recipes and their favorite status
User preferences
Filter and search state (optional)

Data persists across browser sessions and page refreshes.

Accessibility Features

Semantic HTML elements (<article>, <section>, <nav>)
ARIA labels for icon buttons
Keyboard navigation support (Escape to close modals)
Focus management
Screen reader friendly

🧪 Recipe Data Structure

Each recipe contains:

{
  id: 0,
  name: "greek salad",
  image: "https://...",
  category: "salads",
  cuisine: "greek",
  difficultyLevel: "easy",
  servings: 2,
  ingredients: [
    { name: "cucumber", amount: 2, unit: "large" },
    { name: "salt", amount: null, unit: "to taste" }
  ],
  description: "Fresh Mediterranean salad...",
  prepTime: 8,
  rating: 4,
  instructions: ["Step 1...", "Step 2..."],
  nutritionInfo: {
    calories: 180,
    protein: "6g",
    carbs: "12g",
    fat: "12g",
    fiber: "3g"
  },
  tips: ["Tip 1...", "Tip 2..."],
  isFavorite: false,
  isSaved: false
}

🤝 Contributing

Contributions are welcome! Here's how you can help:

Reporting Bugs

Check if the bug is already reported in Issues
Open a new issue with:
- Clear title and description
- Steps to reproduce
- Expected vs actual behavior
- Screenshots if applicable

Suggesting Features

Open an issue with the enhancement label
Describe the feature and its benefits
Discuss implementation approach

Pull Requests

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Make your changes
Commit with clear messages (git commit -m 'Add some AmazingFeature')
Push to your branch (git push origin feature/AmazingFeature)
Open a Pull Request

Code Style

Follow existing code formatting
Use meaningful variable and function names
Add comments for complex logic
Ensure no console errors or warnings

🐛 Known Issues

Currently, there are no known issues! 🎉

If you find a bug, please report it.

🔮 Roadmap & Future Enhancements

Short Term

Medium Term

Export recipes as PDF
Print-friendly recipe view
Share recipes via link/QR code
Recipe import from URL
Shopping list generator from selected recipes
Meal planning calendar
Recipe notes and personal modifications

Long Term

🌐 Deployment

Deploy to Vercel

Push your code to GitHub
Visit vercel.com
Import your repository
Vercel auto-detects Vite configuration
Click "Deploy"

Manual Deployment

# Build production files
npm run build

# The dist/ folder contains your production files
# Upload to any static hosting service

📄 License

This project is licensed under the MIT License.

See the LICENSE file for details.

TL;DR: You can use, modify, and distribute this project freely. Just include the original license.

Author

Ayman Soliman

🙏 Acknowledgments

Recipe data curated and structured for demonstration purposes
Food images from Pixels and Cloudinary
Icons and UI inspiration from modern recipe applications
Built as a learning project to master React state management patterns
Special thanks to the React and Tailwind CSS communities

📚 Learning Resources

This project demonstrates:

✅ React Hooks (useState, useEffect, useContext, useReducer)
✅ Context API for global state
✅ Immutable state updates with Immer
✅ Component composition patterns
✅ Conditional rendering
✅ List rendering and keys
✅ Form handling
✅ Event handling
✅ LocalStorage API
✅ Responsive design with Tailwind
✅ Accessibility best practices

Perfect for learning modern React development! 🚀

💬 Support

Need help? Have questions?

📖 Documentation
🐛 Issue Tracker

⭐ Show Your Support

If you found this project helpful or interesting:

⭐ Star this repository
🔀 Fork it and build your own version
📣 Share it with others learning React
🐛 Report bugs to help improve it
💡 Suggest features you'd like to see

🎯 Don't forget to:

Replace placeholder URLs:
- https://github.com/aymansoliman-dev/GroqRecipeBook → Your actual repo URL
- https://aymansoliman-dev/GroqRecipeBook.vercel.app → Your deployed app URL
- your.email@example.com → Your actual email
- @yourusername → Your GitHub username
Add screenshots:
- Create a screenshots/ folder
- Add: home.png, recipe-detail.png, mobile.png
Create LICENSE file:

   MIT License
   
   Copyright (c) 2025 Ayman Soliman
   
   [Full MIT license text]

Name		Name	Last commit message	Last commit date
Latest commit History 25 Commits
.vite/deps		.vite/deps
public		public
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation