You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
2.1 KiB
52 lines
2.1 KiB
6 years ago
|
# Recipe
|
||
|
|
|
||
|
|
**Tier:** 1-Beginner
|
||
|
|
|
||
|
|
You might not have realized this, but recipe's are nothing more than culinary
|
||
|
|
algorithms. Like programs, recipe's are a series of imperative steps which,
|
||
|
|
if followed correctly, result in a tasty dish.
|
||
|
|
|
||
|
|
The objective of the Recipe app is to help the user manage recipes in a way
|
||
|
|
that will make them easy to follow.
|
||
|
|
|
||
|
|
### Constraints
|
||
|
|
|
||
|
|
- For the inital version of this app the recipe data may be encoded as a
|
||
|
|
JSON file. After implementing the initial version of this app you may
|
||
|
|
expand on this to maintain recipes in a file or database.
|
||
|
|
|
||
|
|
## User Stories
|
||
|
|
|
||
|
|
- [ ] User can see a list of recipe titles
|
||
|
|
- [ ] User can click a recipe title to display a recipe card containing the
|
||
|
|
recipe title, meal type (breakfast, lunch, supper, or snack), number of people
|
||
|
|
it serves, its difficulty level (beginner, intermediate, advanced), the list
|
||
|
|
of ingredients (including their amounts), and the preparation steps.
|
||
|
|
- [ ] User click a new recipe title to replace the current card with a new
|
||
|
|
recipe.
|
||
|
|
|
||
|
|
## Bonus features
|
||
|
|
|
||
|
|
- [ ] User can see a photo showing what the item looks like after it has
|
||
|
|
been prepared.
|
||
|
|
- [ ] User can search for a recipe not in the list of recipe titles by
|
||
|
|
entering the meal name into a search box and clicking a 'Search' button. Any
|
||
|
|
open source recipe API may be used as the source for recipes (see The MealDB
|
||
|
|
below).
|
||
|
|
- [ ] User can see a list of recipes matching the search terms
|
||
|
|
- [ ] User can click the name of the recipe to display its recipe card.
|
||
|
|
- [ ] User can see a warning message if no matching recipe was found.
|
||
|
|
- [ ] User can click a 'Save' button on the cards for recipes located through
|
||
|
|
the API to save a copy to this apps recipe file or database.
|
||
|
|
|
||
|
|
## Useful links and resources
|
||
|
|
|
||
|
|
- [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
|
||
|
|
- [Axios](https://www.npmjs.com/package/axios)
|
||
|
|
- [The MealDB API](https://www.themealdb.com/api.php)
|
||
|
|
|
||
|
|
## Example projects
|
||
|
|
|
||
|
|
- [Recipe Box - a Free Code Camp Project (FCC)](https://codepen.io/eddyerburgh/pen/xVeJvB)
|
||
|
|
- [React Recipe Box](https://codepen.io/inkblotty/pen/oxWRme)
|