Skip to content

Forkify is a recipe web app that allows users to search, view, modify, bookmark and add recipes.

Notifications You must be signed in to change notification settings

ahmedalam98/Forkify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HTML CSS Sass JS NPM Babel Vercel


Table of Contents
  1. About The Project
  2. Getting Started
  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

Forkify preview

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

flowchart

Architecture

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
  1. install dependencies
npm install
  1. 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

About

Forkify is a recipe web app that allows users to search, view, modify, bookmark and add recipes.

Topics

Resources

Stars

Watchers

Forks