Skip to content

OmarGamal10/forkify-app

Repository files navigation

Forkify 🍴

Forkify is a modern web application that allows users to search for recipes, view detailed instructions, and save their favorite recipes for easy access. The app provides a seamless and interactive experience for cooking enthusiasts.

Features

  • Recipe Search: Users can search for a wide range of recipes by entering ingredients or dish names.
  • Detailed Recipe View: Each recipe includes a list of ingredients, cooking instructions, and an image.
  • Bookmarking: Save your favorite recipes for quick access later.
  • Add Your Own Recipe: Users can add their own recipes to the app.
  • Pagination: Navigate through results with ease using pagination.

Technologies Used

  • HTML: Structure of the web pages.
  • CSS: Styling and layout.
  • JavaScript (ES6): Dynamic content and interactivity.
  • Webpack: Module bundler used to compile and optimize assets.
  • API: Uses the Forkify API to fetch recipes.
  • MVC Architecture: The application is built using the Model-View-Controller (MVC) design pattern.

How to Use

  1. Search for a Recipe: Enter an ingredient or dish name in the search bar and press enter.
  2. View a Recipe: Click on a recipe from the search results to view its details, including ingredients and cooking instructions.
  3. Bookmark a Recipe: Click the bookmark icon to save your favorite recipes for easy access.
  4. Adjust Servings: Use the servings adjuster to automatically update ingredient quantities based on the number of servings.
  5. Add Your Own Recipe: Submit your own recipes using the "Add Recipe" feature.

Installation and Setup

If you want to run this project locally:

  1. Clone the repository.
  2. Install the necessary dependencies using npm install.
  3. Run the development server using npm start.
  4. Open http://localhost:8080 in your browser.

Acknowledgements

This project is the final project of the JavaScript course by Jonas Schmedtmann on Udemy. Special thanks to Jonas for his excellent teaching and guidance. The HTML and SASS files were provided as part of the course materials.

Future Improvements

  • User Authentication: Allow users to create accounts and save recipes across devices.
  • Recipe Creation: Enable users to submit and share their own recipes.
  • Enhanced Filtering: Add filters for dietary preferences, cuisine types, and more.

License

This project is open-source and available under the MIT License.

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published