Live demo →

⚠️ Work in Progress — This project is actively under development. Features, structure, and design are subject to change.

A recipe discovery web application that lets users browse popular picks, vegetarian options, explore recipes by cuisine, search by keyword, and view full recipe details. Built as a personal project to practice modern frontend development patterns.

Supported languages: English, Spanish, Portuguese, French, German, Italian, Japanese, Chinese, Russian, Dutch, Swedish, Polish, Hungarian, Romanian, Czech

• Top Picks — carousel of popular recipes with diet and cuisine tags
• Veggie Picks — curated vegetarian recipes in a list layout
• Cuisine Categories — 27 cuisines with icons; click any to navigate to a dedicated page with infinite pagination
• Search — keyword search with result count and pagination
• Recipe Detail Page — full recipe view with hero image, ingredients (US/Metric toggle with images), step-by-step instructions, diet/cuisine tags, and source link
• Dark / Light mode — custom animated MUI switch; state persisted in localStorage
• Language switcher — 15 languages (EN, ES, PT, FR, DE, IT, JA, ZH, RU, NL, SV, PL, HU, RO, CS), auto-detected from browser; all UI strings via i18n locale files
• AI Translation — Groq AI translates recipe titles, summaries, ingredients, and instructions when a non-English language is selected; results cached per recipe+language to minimize API usage
• Client-side caching — Spoonacular responses cached per-cuisine, per-query, per-language; session cache preserves accumulated paginated results across navigation
• US / Metric toggle — ingredient amounts switch between unit systems using Spoonacular's built-in measures data (no extra API call)

src/
├── assets/
├── components/
│   ├── AppSwitch/        # Shared styled MUI Switch (reused in Header and RecipePage)
│   ├── Category/         # Cuisine category grid with animated expand/collapse
│   ├── CuisinePills/     # Localized cuisine tags
│   ├── DietPills/        # Localized diet tags
│   ├── Footer/
│   ├── HamburgerMenu/    # Mobile overlay menu with search, theme toggle, language selector
│   ├── Header/           # AppBar with theme toggle and language selector (desktop)
│   ├── SearchBar/        # Search input with navigation
│   ├── TopPicks/         # Splide carousel
│   └── VeggiePicks/      # Card list (layout shared by CuisinePage and SearchPage)
├── context/              # ThemeContext
├── i18n/                 # Locale files (15 languages: en, es, pt, fr, de, it, ja, zh, ru, nl, sv, pl, hu, ro, cs)
├── pages/
│   ├── Home.tsx
│   ├── CuisinePage.tsx   # /:cuisine
│   ├── SearchPage.tsx    # /search/:query
│   └── RecipePage.tsx    # /recipe/:id
├── services/             # API calls + localStorage caching (api, cuisineRecipes, search, topPicks, veggiePicks, recipeDetail, groq)
└── utils/                # constants (icons, colors), types

This project was built with assistance from Claude (Anthropic) — used as an AI pair programmer throughout development. All architectural decisions, feature planning, and code review were driven by the developer; Claude assisted with implementation, refactoring, and debugging.

# Install dependencies
npm install

# Add your API keys to .env
VITE_API_KEY=your_spoonacular_key
VITE_GROQ_KEY=your_groq_key

# Start dev server
npm run dev

• Recipe detail page
• Search by ingredient or name
• AI translation via Groq
• US / Metric ingredient toggle
• Nutritional analysis
• Favorites / saved recipes
• More languages
• Unit and integration tests
• Responsive / mobile layout