Forkify

View Demo · Report Bug

Table of Contents

1. About The Project
   • Features
   • Built With
   • Flowchart
   • Architecture
2. Getting Started
   • Installation
   • Tree Structure
3. Contributing
4. Acknowledgments

About The Project

Forkify is a recipe web app using the Forkify API to allow users to search, view, modify, bookmark and add recipes.

• Available search queries : Queries

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"

(back to top)

---

Built With

• HTML
• CSS
• SASS
• JavaScript
• Parcel
• Babel
• Forkify API
• Libraries
  • fractional

---

Flowchart

Architecture

(back to top)

---

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 :

Installation

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

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

(back to top)

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!

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

(back to top)

Acknowledgments

• Jonas schmedtmann