Welcome to Forkify App – a feature-packed restaurant application designed to transform your cooking experience. Whether you're a professional chef or a home cook, Forkify offers a seamless way to discover, bookmark, and personalize recipes. Built with robust Object-Oriented Programming (OOP) principles, this project is a testament to modern web development practices.
- 🔍 Search Recipes: Quickly find recipes using the Forkify API, which provides an extensive database of delicious dishes.
- 📋 Recipe Details: Click on any recipe to view comprehensive details, including ingredients, preparation steps, and nutritional information. Adjust the serving size to suit your needs, with a minimum of 1 serving.
- 📌 Bookmark Favorites: Save your favorite recipes for easy access later. Your bookmarks are stored even if you close the app.
- ➕ Add Your Recipes: Contribute your own culinary creations to the app. Simply fill in the details, and your recipe will be available to others.
- 📄 Pagination: Effortlessly browse through recipes with a clean pagination system, showing 10 items per page for optimal navigation.
- JavaScript (ES6+): The foundation of the app, ensuring dynamic functionality and responsive interactions.
- Node.js & npm: For managing project dependencies and running the development environment.
- OOP Principles: Structured with classes and modules for maintainable and scalable code.
- Data Structures: Utilized arrays, objects, and custom data structures to manage and manipulate recipe data efficiently.
- DOM Algorithms: Implemented efficient DOM manipulation algorithms to dynamically update the UI, ensuring a smooth and responsive user experience.
- Forkify API: The rich source of all the recipes featured in the app.
- Netlify: The app is deployed and hosted on Netlify, ensuring fast and reliable access.
Explore the Forkify App live at the following link:
https://forkifyapp-mohamed-v1.netlify.app/
Developing the Forkify App was an in-depth learning experience as part of the comprehensive JavaScript course by Jonas Schmedtmann. This project was a culmination of several weeks of hard work, during which I delved deep into advanced JavaScript concepts, mastered OOP design, and honed my skills in modern web development.
- OOP in Practice: Applied OOP principles extensively, creating classes and methods that enhanced code reusability and readability.
- API Integration: Learned how to fetch and manipulate data from a third-party API (Forkify API), and handle asynchronous operations effectively.
- Data Structures & Algorithms: Employed various data structures and DOM manipulation algorithms to manage the app's dynamic content and improve performance.
- Responsive UI Design: Built a user-friendly interface that works smoothly across devices, ensuring a great user experience.
- 🔍 Search for Recipes: Use the search bar to find recipes by entering keywords like "pasta," "chicken," or "dessert."
- 👀 View Recipe Details: Click on any recipe from the search results to open a detailed view. You'll see the list of ingredients, preparation instructions, and nutritional info.
- 🔄 Adjust Servings: Modify the number of servings by using the plus/minus buttons, and watch as the ingredient quantities automatically update.
- 💾 Bookmark Recipes: Save recipes by clicking the bookmark icon. Access your bookmarked recipes anytime from the bookmark section.
- 📝 Add Your Recipe: Submit your own recipes by filling out the form in the 'Add Recipe' section. Share your culinary creations with the world!
If you’d like to run the Forkify App locally and explore the code:
- Clone the repository:
git clone https://github.com/your-username/forkify-app.git
2.Install dependencies
npm install3.Start the development server:
npm start4.Don't forget to install nodejs
The project is organized into several modules, each responsible for different aspects of the app's functionality:
/src/js/model: Contains the model classes for managing data./src/js/views/: Contains view classes responsible for the UI./src/js/controller: The central controller that connects models and views./src/css/: Custom styles to enhance the visual appeal.
This project is licensed under the MIT License. For more details, see the LICENSE file.
- Jonas Schmedtmann: For his outstanding JavaScript course and the Forkify API that powers this app.
- Forkify API: The source of all recipes in the app, providing a rich and diverse culinary database.
- Netlify: For providing a reliable and fast hosting platform.
Remove the commented part to access it in your local host as netifly doesn't accept it