Code Monkey home page Code Monkey logo

graphql-recipefinderclient's Introduction

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

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.