CookMistry is a modern, responsive web application for discovering and exploring food recipes from around the world. The platform integrates with the Spoonacular API to provide users with a rich collection of recipes, nutrition information, and cooking instructions.
CookMistry homepage with featured recipes
Example of a recipe detail page on CookMistry
- Recipe Search: Find recipes by name, ingredients, or cuisine
- Featured Recipes: Discover curated collections of popular recipes
- Detailed Recipe Information: Get comprehensive cooking instructions, ingredients list, nutrition facts, and difficulty ratings
- Recipe Categories: Browse recipes by meal type (Breakfast, Lunch, Dinner, etc.)
- Responsive Design: Fully functional across desktop, tablet, and mobile devices
- Interactive UI: Engaging animations and modern user interface
- Newsletter Subscription: Stay updated with the latest recipes and cooking tips
- Dark/Light Theme Toggle: Switch between light and dark themes for comfortable viewing
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- API Integration: Spoonacular API for recipe data
- Animations: AOS (Animate on Scroll) library
- Icons: Font Awesome
- Performance Optimizations: Lazy loading, efficient DOM manipulation
CookMistry/
├── index.html # Main entry point of the application
├── style.css # Main stylesheet
├── script.js # Main JavaScript file with application logic
├── config.js # Configuration file for API keys and settings
├── pages/ # Category-specific pages
│ ├── Breakfast/
│ ├── Lunch/
│ ├── Dinner/
│ ├── Desserts/
│ ├── Drinks/
│ └── Quick & Easy/
└── README.md # Project documentation
- Clone the repository
- Open
index.htmlin your browser to view the application - To enable API functionality, replace the API key in
config.jswith your own Spoonacular API key
The application uses a custom RecipeAPI class to handle all API interactions, including:
- Searching for recipes based on user input
- Loading featured recipes
- Fetching detailed recipe information
- Animated recipe cards with difficulty ratings
- Modal-based detailed recipe view
- Responsive navigation with hamburger menu for mobile
- Newsletter subscription with visual feedback
- Animated counters for statistics
- Parallax scrolling effects
- Dark/light theme toggle for improved user experience
The website is designed to provide an optimal viewing experience across a wide range of devices, from mobile phones to desktop computer monitors.
© 2024 CookMistry. All rights reserved.