Skip to content

An application using a GraphQl stack , Finding recipes that tells you how many ingredients are used and how many you are missing, Using the Spoonacular API.

License

Notifications You must be signed in to change notification settings

Dameon1/graphQL-recipeFinderClient

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

89 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

what2eat

CircleCI

Application details

  • A Recipe finder that allows you to see recipes based on the ingredients you have and lets you see how many you are missing for the particular recipe.
  • Navigating to the ** (Where to find page) will reveal a layout of a welcome page where you can make an account to get full features or continue on to the recipe finder itself for quick access.
  • On selecting a recipe you will get a soft view of the instructions and how to make the desired recipe with instructional overview.
  • There is a link at the bottom of the page leading to an in-depth overview of the recipe which will lead the user to a new page where a more in-depth view of the recipe is kept.
  • Created account users can keep track of saved recipes for quick access to get back to them , along with removing them if they are no longer wanted.

Where to find

You can visit what2eat here !

Instructions

  • The Sign up button at the top of the home page will lead you to a create an account form to enter your details.
  • After signing up, you can pick from some predetermined ingredients in the check boxes provided, Or you can create your own, making the application more versatile for production.
  • Upon searching, the screen will be populated with recipes that closely match your desired inputs, with recipe overviews that includes images of the desired outcome, also information including how many of your ingredients are used in the recipe and how many ingredients you are missing, with an option to go to the recipe overview.
  • At the recipe overview page , you will be greeted with a larger view of the recipe outcome picture along with a list of instructions and a save button if you want to keep it around for quick access.
  • Once you have saved a few recipes there is a separate page that keeps track of all the recipes you have saved in the MyRecipes link provide at the top of the page.
  • On the MyRecipes page you find a similar display to the search. Displaying all the recipes you have kept.

Coding styles

-React was used for the components to display the various forms of information

-React-Apollo was used for the management of the state

Screenshots

  • Mobile screenshot on the right
  • On the right is the "search for" screen, where you can add and pick from options
  • The middle picture is an overview of what the search result will look like on a full sized screen

Contributions

Contributions to the application are accepted. If you have a design suggestion, feel free to change and make a pull request. I styled this app with the simplest of styles.

Built With

  • React - The web framework used
  • Apollo - State Management

Authors

  • Dameon Mendoza - Initial work - dameon1

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

Spoonacular

About

An application using a GraphQl stack , Finding recipes that tells you how many ingredients are used and how many you are missing, Using the Spoonacular API.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published