https://github.com/yogihafidh/forkify-apps
Forkify apps is a recipe search app where you can search for recipes and write your own. This application is built using MVC Architecture.
https://github.com/yogihafidh/forkify-apps
babel css3 hmtl5 javascript npm parcel recipe-website sass single-page-applications
Last synced: 2 months ago
JSON representation
Forkify apps is a recipe search app where you can search for recipes and write your own. This application is built using MVC Architecture.
- Host: GitHub
- URL: https://github.com/yogihafidh/forkify-apps
- Owner: Yogihafidh
- Created: 2024-02-02T06:10:47.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-04-08T06:23:46.000Z (about 1 year ago)
- Last Synced: 2025-05-18T03:38:08.480Z (about 1 year ago)
- Topics: babel, css3, hmtl5, javascript, npm, parcel, recipe-website, sass, single-page-applications
- Language: JavaScript
- Homepage: https://forkifyapps-v2.netlify.app/
- Size: 2.08 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# About Apps
Forkify is a recipe web application that allows users to search, view, modify, tag, and add recipes as needed. The application is built using MVC architecture and uses data from the Forkify API. In addition to accessing recipes online, this application also provides information about the number of ingredients needed to make a particular dish according to the number of servings to be made. The application provides the user with:
- Search for any recipe found in the API, where it will throw out all possible recipes for that dish
- If there are more than ten recipes, the recipes will be dynamically transferred to each subsequent page, until there are less than ten on that page
- Click on the desired recipe to view its ingredients
- Calculates the desired number of portions that the user chooses
- If the user likes the recipe, he will be able to save it, where the recipe will be saved in the storage, he will be able to see it every time he visits the application
- There is a possibility to upload a recipe, where the user will have to enter all the necessary ingredients
# Built With
- HTML
- CSS
- SASS
- JavaScript
- Parcel
- Babel
- Forkify API
- Libraries fractional
# Flowchart
# Architecture
# Documentation
Search Feature
Add custom recipe
Recipe Detail View, Pagination System, Servings Adjustment, and Bookmark Recipe
# References
You can see the documentation for the api here, where you can find all the recipes you can search: Forkify API v2 Documentation.
API References:
- This function calls the recipes entered by the user
`export const loadSearchResults = async function (query) {...};`
- This function calls a recipe by its ID
`export const loadRecipe = async function (id) {...};`
- Through this function, we transfer the new recipe entered by the user to the server. It checks whether the data entered by the user is correct, if so, it uploads the data to the server
`export const uploadRecipe = async function (newRecipe){...};`
- Every contact with the server takes place through this function, whether you submitted the recipe on the server or requested its access from the server
`export const AJAX = async function (url, uploadData = undefined){...};`
# Getting Started
This project require some prequesites and dependenscies to be installed, you can view it online using this demo. or you can find the instructions below. To get a local copy, follow these simple steps :
1. Clone the repo `git clone https://github.com/ahmedalam98/Forkify.git`
2. Go to project folder `cd forkify`
3. install dependencies `npm install`
4. Run start script `npm start`