The purpose of this assignment is to practice TypeScript
- Step 1:
yarn
- Step 2:
yarn start
- Your application should have 4 pages namely:
Home
,RecipePage
,Favorite
andContact
- Create a form where the user can insert the meal name
- Using the user input above to get the recipe using this api :
https://www.themealdb.com/api/json/v1/1/search.php?s=${userInput}
. For example, if the user typepizza
then the url will be:https://www.themealdb.com/api/json/v1/1/search.php?s=pizza
- If the recipe is not found, display this message:
Sorry we have not got this recipe yet !
- The user can add their favorite by clicking the heart icon and the favorite recipes show in
Favorite
page. - Styling had to be similar with the screenshot below
- The API docs:
https://www.themealdb.com/api.php
- The images can be found in
assets
folder - Google font:
https://fonts.google.com/
(Rajdhani ,sans-serif
) - MUI:
https://mui.com/
- Ant design:
https://ant.design/
- Text Field: use in
Search
component (https://mui.com/material-ui/react-text-field/#main-content
) - Card: use to display each recipe (
https://mui.com/material-ui/react-card/#main-content
) - Icons (
https://mui.com/material-ui/material-icons/#main-content
) - Button (
https://mui.com/material-ui/react-button/#main-content
) - Badge: (
https://mui.com/material-ui/react-badge/#main-content
)