A modern React + Vite recipe discovery web app that lets users search meals, explore recipe details, and save favourites locally.
The project focuses on API integration, component-based architecture, and responsive UI design.
-> 🔍 Search recipes dynamically from API
-> 🍲 Detailed recipe view (ingredients + measurements)
-> ❤️ Add recipes to favourites (stored using LocalStorage)
-> ⚡ Fast UI using React + Vite
-> 🎨 Styled with Tailwind CSS
-> 📱 Fully responsive layout
-> 🍴 Random dish of the day section
-> React Hooks (useState, useEffect)
-> Component Architecture
-> Props & State Management
-> API Fetching
-> Conditional Rendering
-> Local Storage
-> Dynamic Rendering from API data
-> React
-> Vite
-> Tailwind CSS
-> JavaScript (ES6+)
Recipe_Master
│
├── src
│ ├── components
│ │ ├── Banner.jsx
│ │ ├── Discover.jsx
│ │ ├── Favourites.jsx
│ │ ├── Footer.jsx
│ │ ├── FunFact.jsx
│ │ ├── Navbar.jsx
│ │ ├── QuickMeals.jsx
│ │ ├── RecipeCard.jsx
│ │ └── Search.jsx
│ │
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
│
├── package.json
└── vite.config.js
Recipes added to favourites are stored using LocalStorage, meaning:
-> Each user gets their own saved list
-> Data persists after refresh
-> No backend required
Built with curiosity, creativity, and React.