diff --git a/Projects/Recipe-App.md b/Projects/Recipe-App.md new file mode 100644 index 00000000..4d4df68a --- /dev/null +++ b/Projects/Recipe-App.md @@ -0,0 +1,51 @@ +# 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) diff --git a/README.md b/README.md index ca1b3acf..f96246f9 100644 --- a/README.md +++ b/README.md @@ -48,11 +48,12 @@ required to complete them. | [CSV2JSON App](./Projects/CSV2JSON-App.md) | CSV to JSON converter | 1-Beginner | | [Flip Image](./Projects/Flip-Image-App.md) | Change the orientation of images across two axes | 1-Beginner | | [JSON2CSV App](./Projects/JSON2CSV-App.md) | JSON to CSV converter | 1-Beginner | -| [Lorem Ipsum Generator](./Projects/Lorem-Ipsum-Generator.md) | Generate lorem ipsum placeholder text | 1-Beginner | +| [Lorem Ipsum Generator](./Projects/Lorem-Ipsum-Generator.md) | Generate lorem ipsum placeholder text | 1-Beginner | | [Notes App](./Projects/Notes-App.md) | Create and online note pad | 1-Beginner | -| [Pomodoro Clock](./Projects/Pomodoro-Clock.md) | Task timer to aid personal productivity | 1-Beginner | +| [Pomodoro Clock](./Projects/Pomodoro-Clock.md) | Task timer to aid personal productivity | 1-Beginner | | [Quiz App](./Projects/Quiz-App.md) | Test your knowledge by answering questions | 1-Beginner | -| [Roman to Decimal Converter](./Projects/Roman-to-Decimal-Converter.md) | Convert Roman to Decimal numbers | 1-Beginner | +| [🌟Recipe App](./Projects/Recipe-App.md) | Recipe | 1-Beginner | +| [Roman to Decimal Converter](./Projects/Roman-to-Decimal-Converter.md) | Convert Roman to Decimal numbers | 1-Beginner | | [Slider Design](./Projects/Slider-Design.md) | Display images using a slider control | 1-Beginner | | [TrueOrFalse](./Projects/True-or-False-App.md) | Identify the result of a conditional comparison | 1-Beginner | | [Wind Chill](./Projects/Windchill-App.md) | Calculate the windchill factor from an actual temperature | 1-Beginner |