A modern recipe discovery application built with Vue 3 and TheMealDB API
Features • Demo • Installation • Tech Stack • Architecture
- 🔍 Smart Search: Search recipes by name with real-time results
- 📑 Browse by Letter: Explore recipes alphabetically
- 🥗 Ingredient Explorer: Find recipes by ingredients
- 📱 Responsive Design: Perfect experience on all devices
- ⚡ Fast & Optimized: Caching and performance optimizations
- 🎨 Modern UI: Clean and intuitive interface
Experience the live application: Recipe Explorer Live Demo
- Clone the repository
git clone https://github.com/Devmangrani/Recipe-Book.git
cd Recipe-Book- Install dependencies
npm install- Run the development server
npm run devThe application will be available at http://localhost:3000
- Frontend Framework: Vue.js 3
- State Management: Vuex 4
- Routing: Vue Router 4
- HTTP Client: Axios
- Styling: Tailwind CSS
- Build Tool: Vite
- API: TheMealDB
- Implements a smart caching system for API responses
- Caches data for 5 minutes to reduce API calls
- Stores letter-based searches in Vuex store
- Real-time search results with debouncing
- Caches search results for 5 minutes
- Displays loading state during API calls
- Lazy loading of route components
- Request/response interceptors
- Error boundary implementation
- Efficient state management
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions are welcome! Feel free to:
- Fork the repository
- Create a new branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- TheMealDB for providing the API
- Vue.js Team for the amazing framework
- Tailwind CSS for the utility-first CSS framework
Made with ❤️ by Dev Mangrani