Forkify

A recipe search application made with Vanilla JS.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Features
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Acknowledgements

About The Project

Forkify is a vanilla JavaScript application that interacts with the Forkify API to fetch and display recipe food data. This app uses modern JavaScript tools, such as Parcel to bundle the modules, and Babel to convert ES6+ features back to ES5.

Features

• Search and save recipes
• Adjust serving sizes
• View nutritional info
• Access original recipe website
• Bookmark favorite recipes
• Create shopping list
• Make weekly meal plan

Built With

This app is built with Vanilla JavaScript, HTML and Sass. It's using Parcel as module bundler and NPM as package manager.

• HTML
• SCSS
• JavaScript
• Parcel
• NPM

Getting Started

To get started with project just simply fork this repo or download locally on your System.

To get a local copy up and running follow these simple example steps.

Prerequisites

Start with the latest version of NPM to avoid any errors:

• npm

  npm install npm@latest -g

Installation

1. Get a free API Key at Forkify API_KEY
2. Clone the repo

   git clone https://github.com/stekatag/forkify.git

3. Install NPM packages

   npm install

4. Enter your API in config.js

   const KEY = "ENTER YOUR API";

Usage

1. The Forkify Recipe App allows users to search for recipes.

2. Users can view the recipe along with the cook time and also increase or decrease the amount of servings they need.

3. Bookmarked recipes are stored in local storage so no database was required for this application.

4. Create a shopping list of all the ingredients you need for your recipes to make grocery shopping easier and more efficient.

5. Plan your meals for the week by selecting recipes and adding them to your weekly meal plan, helping you stay organized and save time.

For more examples, please refer to the Documentation

Roadmap

See the open issues for a list of proposed features (and known issues).

Proposed features

1. Number of pages between the pagination buttons. ✅

2. Shopping list feature: button on recipe to add ingredients to a list. ✅

3. Weekly meal planning feature: assign recipes to the next 7 days and show on a weekly calendar. ✅

4. Nutrition data on each ingredient from spoonacular API (https:// spoonacular.com/food-api) and calculate total calories of recipe. ✅

5. Dark mode. ✅

6. Responsive design. ✅

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AwesomeNewFeature)
3. Commit your Changes (git commit -m 'Add some AwesomeNewFeature')
4. Push to the Branch (git push origin feature/AwesomeNewFeature)
5. Open a Pull Request

License

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

Acknowledgements

• The Complete JavaScript Course
• Img Shields
• Netlify
• Google Fonts