vitorzerbeto/reimagined-journey

Recipe App

Recipe

Tier: 1-Beginner

You might not have realized this, but recipe's are nothing more than culinary algorithms. Like programs, recipes 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 initial 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
• Axios
• The MealDB API

Example projects

• Recipe Box - a Free Code Camp Project (FCC)
• React Recipe Box

This App Was Created Using CRA

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.