Forkify Recipe Search is a web application that allows users to search for recipes and view their details. Users can also add their own recipes.
NOTE: NOT RESPONSIVE!!!
- Search for recipes using keywords.
- View recipe details, including ingredients and cooking instructions.
- Bookmark favorite recipes.
- Add your own recipes to the database.
- HTML
- CSS/Sass
- JavaScript
- Parcel (for bundling and building)
- Babel (for JavaScript compilation)
- Fraction.js (for handling fractions in ingredient quantities)
- Clone this repository to your local machine:
git clone <repository-url>
- Navigate to the top level of the cloned directory.
- Install dependencies:
npm install
- Start the development server:
npm start
This will start a development server and open the application in your default web browser.
- Enter a search term in the search field and click the search button.
- Click the pagination buttons to view more results.
- Click the recipe you want to view.
- Click the bookmark button to save the recipe to your bookmarks.
- Click the recipe you want to view.
- Click the bookmark button to save the recipe to your bookmarks.
- Click the add recipe button.
- Enter the recipe details.
- Click the upload button to add the recipe to the database.
- Click the bookmark button to save the recipe to your bookmarks.
- Click the close button to close the form.
- Click the close button to close the recipe.
- Click the bookmarks button.
- Click the recipe you want to view.
- Click the close button to close the recipe.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change :).
fell free to copy this project and use it for your own purpose
This project is still under development. The following features will be added in the near future:
- Number of pages between the pagination buttons.
- Ability to sort search results by duration or number of ingredients.
- Perform ingredient validation in view before submitting the form.
- Improve recipe ingredient input: separate in multiple fields and allow more than 6 ingredients.
- Shopping list feature: button on recipe to add ingredients to a list.
- Weekly meal planning feature: assign recipes to the next 7 days and show on a weekly calendar.
- Get nutrition data on each ingredient from spectacular API (https://spoonacular.com/food-api/docs) and calculate total calories of recipe.
- Delete your own recipe.
This project was created as part of a web development course. Special thanks to the course instructors and mentors for their guidance and support.