Forkify Recipe Application is a modern web application that allows users to search for recipes, view detailed recipe information, adjust servings, bookmark their favorite recipes, and even upload their own recipes. This application provides a seamless user experience with dynamic content rendering and responsive design.
- Search for Recipes:
- Enter an ingredient or recipe name in the search bar at the top of the page.
- Click the search icon or press Enter to retrieve a list of matching recipes.
- The results will be displayed with images and brief descriptions.
- Pagination:
- Use the pagination controls at the bottom of the results to navigate through multiple pages of recipes.
- View Recipe Details:
- Click on any recipe from the search results to view detailed information.
- Adjust Servings:
- Use the "+" and "-" buttons to adjust the number of servings for the selected recipe.
- The ingredient quantities will automatically adjust according to the selected serving size.
- Bookmark Recipes:
- Click the bookmark icon on a recipe to save it to your favorites.
- Access your bookmarked recipes anytime from the bookmarks menu.
- Upload Your Own Recipe:
- Click the "Add Recipe" button to open the upload form.
- Fill in the required fields, including title, ingredients, and cooking instructions.
- Click the "Upload" button to add your recipe to the application.
- Recipe Search: Search for recipes using keywords or ingredients.
- Recipe Details: View detailed information including ingredients, cooking time, and steps.
- Serving Adjustment: Dynamically adjust ingredient quantities based on the number of servings.
- Bookmarking: Save and manage your favorite recipes.
- Recipe Upload: Upload your own recipes with custom details.
- Responsive Design: The application is optimized for various screen sizes.
- HTML5
- CSS3 (SASS)
- JavaScript (ES6+)
- Parcel
- Babel
- Core-JS
- API Integration
- MVC Architecture
To run the application locally, follow these steps:
- Clone this repository to your local machine.
- Install dependencies using
npm install
. - Start the development server using
npm start
. - Open the application in your browser at
http://localhost:1234
.
This application is licensed under the MIT License - see the LICENSE file for details.
This application is for educational purposes and personal use. The code provided is open-source, and you are free to use, modify, and distribute it as per the license agreement.
Enjoy your cooking journey with Forkify Recipe Application! 🍽️👨🍳