markusdreyer / react-workshop Goto Github PK

Vi ønsker en fin fremstilling av svaret vi får fra backend. Selv om vi implementerer det på en måte, kan det fint se anderledes ut for studentene. Det hadde derfor vært en fordel om implementasjonen la til rette for at studentene enkelt kan justere på farger, marginer og andre ting for å sette sitt preg på løsningen.

Forslag til design:

Eksempel respons fra backend:

{
    "title": "Apple and Strawberry Chocolate Cake",
    "description": "A delicious and easy-to-make cake that combines the sweetness of apples and strawberries with the richness of chocolate sauce.",
    "ingredients": [
        "2 apples (peeled and diced)",
        "1 banana (mashed)",
        "100g flour",
        "100g chocolate sauce",
        "200g strawberries (sliced)"
    ],
    "steps": [
        "Preheat oven to 180°C.",
        "In a bowl, mix together the diced apples, mashed banana, and flour until a thick batter forms.",
        "Spread the batter into a greased baking dish.",
        "Top the batter with the sliced strawberries.",
        "Pour the chocolate sauce over the top of the cake.",
        "Bake in the preheated oven for 25-30 minutes, or until the cake is golden brown and a toothpick inserted into the center comes out clean.",
        "Allow to cool before serving."
    ]
}

Vi trenger å sende inn listen over ingredienser til backend for å kunne hente ut en oppskrift. Tenker det er naturlig at denne oppgaven kombineres med en knapp i GUIet, som trigger kallet til backend.

F.eks:

Starter med å teste ut denne komponenten fra material UI: https://spoonacular.com/food-api/console#Dashboard

Liste over hva som bør implementeres

• Populere søket med en statisk liste av ingredienser.
• Muliggjøre valg av ingredienser, og putte valgene i en egen liste over valgte ingredienser.
• Bonus: Tilgjengeliggjøre styling av komponenten, slik at studentene kan sette sitt eget preg på løsningen.

Boilerplate for Frontend og Backend med typescript og hot reloading satt opp.

Når både #2 og #6 er ferdig bør komponentene settes sammen. Her tenker jeg det er en fordel om det gjøres enkelt med grid eller flex-box. Bonus om det blir tilrettelagt slik at studentene enkelt kan velge hvordan komponentene er satt sammen.

Her er et forslag:

Sette opp en api mappe, og sette opp en Node applikasjon med typescript.