Git Product home page Git Product logo

forkify's Introduction

HTML CSS Sass JS NPM Babel

Table of Contents

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

Application Demo

Forkify preview

Features

User Stories Latest 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
  • CSS
  • SASS
  • JavaScript
  • Parcel
  • Babel
  • Forkify API
  • Libraries
    • fractional

Flowchart

flowchart

Architecture

architecture


How To Use

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

Installation

  1. Get a free API Key at Forkify API_KEY
  2. Clone the repo
    git clone https://github.com/mersad-Bxtrue/forkify.git
  3. Go to project folder
    cd forkify
  4. Install NPM packages
    npm install
  5. Enter your API in config.js
    const KEY = 'ENTER YOUR API';
  6. Run start script
    npm run start

Tree Structure

forkify
│   .gitignore
│   .prettierrc
│   index.html
│   package-lock.json
│   package.json
│   README.md
│
└───src
    ├───img
    │       demo.png
    │       favicon.png
    │       forkify-architecture-recipe-loading.png
    │       forkify-flowchart.png
    │       icons.svg
    │       logo.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

Thanks To

  • I built the app with the help of Jonas Schmedtmann in the JavaScript course: JavaScript course

License

Distributed under the MIT License. See LICENSE for more information.

forkify's People

Contributors

mersad-bxtrue avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.