Git Product home page Git Product logo

pantryapp's Introduction

The Pantry

More Than Just A Meal Planner

Pantry stores a list of ingredients that you currently have in your pantry at home along with new items added by you, in you shopping list. The idea is that will keeping up with everything, so you will be more effective when shopping for the week. No more over/under buying. The App will alsp help you plan you meals for the week in addition to suggesting a verity of creative recipies. It also displays the weather for each day of the week so you may plan accordingly. No more planing on grilling when it's raining! It also intergrates a shopping list based on the recipies you have saved. The main idea is to help you be more organized in this fast paced world. It will help you save time and money while doing so.
  • Seach the current weather, so you can plan you weekly meals accordingly
  • Add the food you already have at home to your pantry so you will know exactly what you need to purchase
  • Find new and exciting new recipies
  • Drag and drop the meal to whichever day of the week you wish
  • Your shopping list will populate with the ingredients needed for each of the recipies
  • Add other individual items to your shopping list
  • Add items from your shopping list to your pantry
  • Save the recipies, shopping list and pantry to local storage for easy recall, or clear and start new
  • Party On Wanye

Screenshot of Application

Screenshot of app

Project Repo

github repo

Live Site Link

Live Site Link

APIs Used in the App

Spoonacular Accuweather

pantryapp's People

Contributors

andykb9b13 avatar jmckelvey786 avatar mmeggett avatar kristinahaley avatar bucknorris336 avatar

Stargazers

designer_Geek avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

pantryapp's Issues

1. Build HTML Shell

To start with, we need 4 main divs.

The first will be the weekly meal-plan div (possible ID = "mealPlan")
The second will be the the pantry div (possible ID = "pantry")
The third will be the shopping list div (possible ID = "shoppingList")
The fourth will be the recipe box div (possible ID = "recipeBox")

Styling is not super important to start with but we just need id names for those divs.

Develop the Backend

At the moment this app only functions as a client-side application using local-storage to persist user input. In order to save recipes, make personalized recipes, and perform other tasks requiring data persistence, a sever and database need to be set up.

Create Categories for Pantry Items

When items are added to the pantry, they are all added without being sorted into categories (i.e. dairy, canned-goods, vegetables, etc.) There are categories listed in the data object returned by calls to the Spoonacular API using the getRecipeIngredients() function. The ingredient is listed as being on a particular aisle of a grocery store.

Tasks:
Compile either a complete list of aisle names from Spoonacular or find most common ones.
Create permanent HTML areas in the pantry to store those aisle names.
Create drop-down lists that display those items.
Be able to push items to the pantry from the shopping list into their correct aisle categories.

It may be necessary to maintain a complete pantryArr to be able to check items from the shopping list against it.

Create Saved Recipe Area

There needs to be a place to be able to view the recipes that you would like to save so that you can cook them again.

Tasks:
Store the id numbers of your favorite recipes into a new array called favoriteRecipes.
Be able to call them from the Spoonacular API.
Be able to display the results in a new HTML div on the page.
Be able to move those recipes from the favorite recipe div to the weekly plan.

2. Access the data from APIs

We need to confirm the access to the API data in Spoonacular to make sure we can get information like:
-ingredients
-recipes

Creating some test Fetch requests to access those data points.

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.