✦ React Meal Prep Command Center

A practical React recipe workspace powered by TheMealDB search, filters, recipe lookup, ingredient checklists, and local saved meals.

✨ Idea

React Meal Prep Command Center turns TheMealDB into a usable prep station: search by meal name, browse recipe lanes by category/cuisine/ingredient, open a detailed prep sheet, check off ingredients, watch linked methods, and save favorite recipes in localStorage.

⚙️ Stack

• React 19 + TypeScript 6
• Vite 8
• Tailwind CSS 4 via @tailwindcss/vite
• Lucide React for icons
• TheMealDB API with the public test key path

🔌 API

The app uses public TheMealDB endpoints:

• GET /search.php?s={query}
• GET /filter.php?c={category}
• GET /filter.php?a={area}
• GET /filter.php?i={ingredient}
• GET /lookup.php?i={id}
• GET /random.php
• GET /list.php?c=list, a=list, i=list

The test key 1 is intended for development, demos, and educational projects.

📁 Project Structure

react-meal-prep-command-center/
|-- public/
|   `-- favicon.svg
|-- src/
|   |-- components/
|   |   |-- ApiPanel.tsx
|   |   |-- FilterRail.tsx
|   |   |-- IngredientChecklist.tsx
|   |   |-- MealQueue.tsx
|   |   |-- RecipeBoard.tsx
|   |   |-- SavedMeals.tsx
|   |   `-- SearchStation.tsx
|   |-- lib/
|   |   |-- mealApi.ts
|   |   `-- savedMeals.ts
|   |-- App.tsx
|   |-- index.css
|   `-- main.tsx
|-- LICENSE
|-- package.json
|-- vercel.json
`-- README.md

🚀 Run

npm install
npm run dev

🧪 Checks

npm run lint
npm run build

▲ Deploy

📄 License

MIT License. See LICENSE.