Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pranav-jadhav09/forkify-app
Forkify is a recipe web app that allows users to search, view, bookmark and add recipes.
https://github.com/pranav-jadhav09/forkify-app
babel css3 es6-javascript es6-modules html javascript jsmodules mvc-architecture noframework parcel sass single-page-app
Last synced: 4 days ago
JSON representation
Forkify is a recipe web app that allows users to search, view, bookmark and add recipes.
- Host: GitHub
- URL: https://github.com/pranav-jadhav09/forkify-app
- Owner: Pranav-Jadhav09
- License: gpl-3.0
- Created: 2024-01-02T04:21:45.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-02T15:07:59.000Z (12 months ago)
- Last Synced: 2024-11-21T07:28:58.799Z (2 months ago)
- Topics: babel, css3, es6-javascript, es6-modules, html, javascript, jsmodules, mvc-architecture, noframework, parcel, sass, single-page-app
- Language: JavaScript
- Homepage: https://forkify-app-modern.vercel.app/
- Size: 2.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Awesome](https://awesome.re/badge.svg)](https://awesome.re)
![GitHub repo size](https://img.shields.io/github/repo-size/Pranav-Jadhav09/forkify-app)
[![Twitter Follow](https://img.shields.io/twitter/follow/Pranav_Jadhav09?style=social)](https://twitter.com/Pranav_Jadhav09)## Forkify App
Forkify is a recipe web app that allows users to search, view, modify, bookmark and add recipes.
### Tech Stack
![HTML5](https://img.shields.io/badge/HTML_5-%23E34F26.svg?style=flat&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS_3-%231572B6.svg?style=flat&logo=css3&logoColor=white)
![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=flat&logo=SASS&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-%23323330.svg?style=flat&logo=javascript&logoColor=%23F7DF1E)
![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=flat&logo=npm&logoColor=white)
![Babel](https://img.shields.io/badge/Babel-F9DC3e?style=flat&logo=babel&logoColor=black)
![ChatGPT](https://img.shields.io/badge/ChatGPT-74aa9c?style=flat&logo=openai&logoColor=white)
### 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 to the current number of servings |
| Bookmark recipes | 📌 Bookmarking functionality: Display a 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" |
## More Features to be added...
- Display `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 calender
- `Get nutrition data` on each ingredient form spoonacular API (`https://spoonacular.com/food-api`) and calculate total calories of recipe
## Getting Started
This project require some prequesites and dependenscies to be installed, you can view it online using this [demo](https://forkify-app-jrpranav.onrender.com). 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/Pranav-Jadhav09/forkify-app
```2. Install Dependencies
```bash
npm install
```3. Run start script
```bash
npm run start
```
## Contributing
Contributions to this project are welcome! Feel free to submit pull requests or open issues for any improvements or features you'd like to add.
## License
This project is licensed under [GNU GENERAL PUBLIC LICENSE](./LICENSE).