https://github.com/sayedshehata1/forkify
Forkify is a recipe web app that allows users to search, view, modify, bookmark and add recipes.
https://github.com/sayedshehata1/forkify
css html netlify npm sass
Last synced: 4 months ago
JSON representation
Forkify is a recipe web app that allows users to search, view, modify, bookmark and add recipes.
- Host: GitHub
- URL: https://github.com/sayedshehata1/forkify
- Owner: SayedShehata1
- Created: 2023-05-13T18:11:47.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-12T14:43:49.000Z (almost 3 years ago)
- Last Synced: 2025-03-27T08:50:36.482Z (over 1 year ago)
- Topics: css, html, netlify, npm, sass
- Language: JavaScript
- Homepage: https://forkify-sayedshehata.netlify.app/
- Size: 2.01 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Forkify
Table of Contents
## About The Project
Forkify is a recipe web app using the [Forkify API](https://forkify-api.herokuapp.com/v2) to allow users to search, view, modify, bookmark and add recipes.
- Available search queries : [Queries](https://forkify-api.herokuapp.com/phrases.html)
### Features
| User Stories | Features |
| -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Search for recipes |
- functionality: input field to send request to API with searched keywords
- Display results with pagination
- Display recipe with cooking time, serving and ingredients
| Update the number of servings |
- Change serving functionality: update all ingredients according ro current number of servings
| Bookmark recipes |
- Bookmarking functionality: display list of all bookmarked recipes
| Create recipes |
- Users can upload their own recipes
- User recipes will automatically be bookmarked
- User can only see their own recipes, not recipes from other users
| Access to bookmarks and recipes when leaving the app and coming back later |
- Store bookmark data in the browser using "local storage"
---
### Built With
- [HTML](https://html.com/)
- [CSS](https://www.w3schools.com/css/)
- [SASS](https://www.npmjs.com/package/sass)
- [JavaScript](https://www.javascript.com/)
- [Parcel](https://www.npmjs.com/package/parcel)
- [Babel](https://babeljs.io/)
- [Forkify API](https://forkify-api.herokuapp.com/v2)
- Libraries
- [fractional](https://www.npmjs.com/package/fractional)
---
### Flowchart
### Architecture
---
## Getting Started
This project require some prequesites and dependenscies to be installed, you can view it online using this [demo](https://forkify-sayedshehata.netlify.app/). or you can find the instructions below
> To get a local copy, follow these simple steps :
### Installation
1. Clone the repo
```sh
git clone https://github.com/SayedShehata1/Forkify.git
```
2. Go to project folder
```bash
cd forkify
```
3. install dependencies
```bash
npm install
```
4. Run start script
```bash
npm start
```
#### Tree structure
```
forkify
│ .gitignore
│ .prettierrc
│ index.html
│ package-lock.json
│ package.json
│ README.md
│
└───src
├───img
│ favicon.png
│ forkify-architecture-recipe-loading.png
│ forkify-flowchart.png
│ icons.svg
│ logo.png
│ preview.png
│
├───js
│ │ config.js
│ │ controller.js
│ │ helpers.js
│ │ model.js
│ │
│ └───views
│ addRecipeView.js
│ bookmarksView.js
│ paginationView.js
│ previewView.js
│ recipeView.js
│ resultsView.js
│ searchView.js
│ View.js
│
└───sass
main.scss
_base.scss
_components.scss
_header.scss
_preview.scss
_recipe.scss
_searchResults.scss
_upload.scss
```
## Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## Acknowledgments
- [Jonas schmedtmann](https://github.com/jonasschmedtmann)