- 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 !
- 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.
-React was used for the components to display the various forms of information
-React-Redux was used for the management of the state
- 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 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.
- React - The web framework used
- Redux: Usage with React - State management
- Enzyme - Testing framework
- JWT-decode - Verification
- Mongo - The database used to store information
- Mongoose - Framework used to access DB
- Node.js - Runtime environment for package management
- Express.js - Framework used for the application
- bcrypt.js - For security of user accounts
- Dameon Mendoza - Initial work - dameon1
This project is licensed under the MIT License - see the LICENSE.md file for details