Forkify App

A JavaScript search recipe application taken from Food2Fork API. All code is built with Vanilla JS ES6 .

       

Table of contents

• Forkify App
  • Table of contents
  • General info
  • Technologies
  • Forkify API Documentation
  • Installation and Usage
    • Dev Mode
    • Prod Mode
    • Live Demo
  • To-do list
  • Status
  • Contact

General info

The Forkify App allows users to search for recipes using the Food2Fork API. Users can view the recipe along with the cook time and also increase or decrease the amount of servings they need. At this point the user can favorite the recipe or even add it to their shopping list if they want to shop for more than one recipe. Favourite meals are stored in local storage so no database was required for this application.

Technologies

• JavaScript
• HTML 5
• SCSS

Forkify API Documentation

This is the test API dedicated to the Forkify app

• http://forkify-api.herokuapp.com/

Installation and Usage

Prerequisites: Node.js (13.14.0). As of latest version 14.3.0 some dependencies break at install.

To run this project:

• Clone this repo to your local machine using

$ git clone https://github.com/francislagares/forkify-app

• Switch into directory

$ cd forkify-app

• Install dependencies

$ yarn install

Dev Mode

• Run server

$ yarn start

• Browser will open automatically at http://localhost:3000

Prod Mode

• Make a build

$ yarn build

• Run Express Server

$ yarn serve

• Open http://localhost:3000 in your browser.

Live Demo

You can see the application running here.

To-do list

Although this project has accomplished its main purpose, still needs a lot of improvements, and if time and work allow for it, I'll keep adding more features.

To-do list:

• Implement button to delete all shopping list items.
• Save shopping list data in localStorage.
• Improve ingredient parsing algorithm.
• Come up with an algorithm to calculate the amount of servings.
• Implement better error handling ( displaying errors in UI ).

Status

Currently: in progress...

Contact

Created by @francislagares - feel free to contact me!