heath-lester/cookit

Deployed with Heroku. Front-End Capstone for Nashville Software School. A React application with recipe databases, grocery-lists, and cook helper. Back-End: https://github.com/Heath-Lester/cookit_server

Cookit!

Cookit! is a single page application that allows user to save and reference recipes from a database and 3rd party websites. This application allows users to cut out the fluff by extracting only the information you need.

The following instructions will get you a copy of the project up and running on your local machine for demonstration and testing purposes.

1. Download and install Node.js

2. Install React with the following terminal command:

npm install --save react

3. Install ReactDOM with the following terminal command:

npm install --save react-dom

4. Install json-server with the following terminal command:

npm install -g json-server

5. Get an API key for Spoonacular: Recipe-Food-Nutrition. Do NOT share this API key with anyone else.

6. Clone my repository to your local machine.

7. Navigate to the project folder. In the src directory. Within that directory, create a file .api_key.js

8. In said file, copy/paste export const apiKey = `paste_your_api_key_here` . This will prevent you from accidentally sharing your API key with other people and allow you to access the API database.

Usage

A step by step series of examples that tell you how to get a development env running

1. In your terminal, navigate to the project directory.

cd /Users/username/workspace/cookit

2. From the root of this directory, run the following terminal command in order to start up the React application.

npm start

3. Open a new terminal tab and navigate to the api directory.

cd /Users/username/workspace/cookit/api

4. Run the following terminal command in order to start up your json-server.

json-server -p 8088 -w database.json

5. Open your web browser of choice and navigate to http://localhost:3000/

6. You will be presented with a login/registration page if this is your first time using the application. Register an account or use my email [email protected] and password 12345.

7. From here you can use the search bar with keywords like "chicken" or "strawberries" and you will be presented with multiple recipes from the Spoonacular API. You can select any of these recipes and be presented with a detailed recipe including ingredients and cooking instructions. If you are looking to parse specific recipe you can click the "Search Bar" drop-down button and select the "Extract Bar". Here, you can paste in recipe URL's from other websites and the essential information will be provided to you. You can save these recipes for later or add them to the meal section. Once the meals are added you can selecte the "Build Grocery List" button and you will be presented with a grocery list of all the recipes selected.

8. Thank you for your time!

Login to Your Account

Search and Save Recipes

Favorite and Remove Saved Recipes

Extract Recipes from other Websites

Build a Grocery List

Entity Relationship Diagram

Built With

• React - A JavaScript library for building user interfaces
• Spoonacular API - A recipe, nutrition, and ingredient API with over 5,000 recipes

Authors

• Heath Lester - Original Creator - Heath-Lester

This project has been planned, developed, and tested exclusively by myself over the course of a two-week sprint.

Acknowledgments

• Thank you to the creator of Spoonacular API, which provided all the recipes for this application as well as additional functionality.

cookit's Issues

Remove a Recipe

GIVEN the user wants to remove a saved recipe
WHEN the user selects the recipe route and selects the delete button
THEN the saved recipe will be removed from the local database

Favorite Recipes

GIVEN the user wants to favorite a recipe
WHEN they select the favorite button on the detail window
THEN they’re favorite recipes will appear the favorites window

Bug Fixes

Bugs

• Interactive search suggestions autocomplete in SearchBar.js #5

Save Recipes

GIVEN the user wants to save a recipe
WHEN the user selects the save button on any recipe’s details
THEN the recipe will be saved to the local database

Grocery List

GIVEN the user wants to create a grocery list
WHEN the user selects grocery list in the meals window
THEN the user will be routed to a window with an ingredients list from all recipes in the meals window

Meal Builder

GIVEN the user wants to select a meal to prepare
WHEN the user selects add to meal
THEN the recipe appears in the meals list

Register a User

GIVEN a user wants to log in
WHEN the user does not have an account
THEN a register form will be made available via link

Displaying a single recipe

GIVEN the user wants to see a detailed view of a single Recipe
WHEN the user clicks a recipe result
OR the user clicks a saved recipe
OR the user pastes a url
THEN the recipe will be replace the results window with a single detailed recipe

Extract Recipes from 3rd Party Websites

GIVEN the user wants to add a recipe from another website
WHEN the recipe does not exist in the database
THEN the user can paste a url from and existing website

User can Log in

GIVEN a user wants to log in
WHEN the user has an account
THEN the user can log in from a log-in form
AND all the information from the previous sessions will be retained

All Saved Recipes w/ Details

GIVEN the user wants to see all saved recipes in detail
WHEN they select the saved recipes route
THEN they will be routed to a new window with all save recipes

Search Recipes and Display Results

GIVEN the user wants to search a recipe
WHEN the user does not know exactly what they want
THEN the user can search a keyword in the search bar
AND the results will appear in the space below