This is a responsive web application for a restaurant that allows users to explore, search, and discover meals using the free TheMealDB API.
👉 https://meal-app-drab-two.vercel.app/
The Meal Finder is built with React.js, Redux Toolkit (RTK Query), Tailwind CSS, and TypeScript. It allows users to:
- Search meals by name or first letter
- Filter results by category and area
- View random meals
- Bookmark favorite meals (stored in localStorage)
- Browse featured meals through a carousel
- React.js (Vite)
- Redux Toolkit (with RTK Query)
- Tailwind CSS
- TypeScript
- Swiper.js
- React Router
- Axios
- LocalStorage
- 🔍 Search meals by name or first letter
- 🎲 Discover random meals
- 🍱 Meal details with image, category, area, instructions
- 📌 Bookmark favorite meals (saved in localStorage)
- 📂 Filter by category and area
- 🌐 Navigation across pages
- ✅ TypeScript integration
- ✅ RTK Query for API management
- ✅ Bookmark/favorite meals system
- ✅ Carousel for featured meals
- ✅ Client-side filtering with dropdowns
- ✅ Clean and responsive design
- Clone the repository:
git clone https://github.com/mdiibrahim/meal-app.git
cd meal-app- Install dependencies:
npm install- Start development server:
npm run dev- To build for production:
npm run build