Kihívás! Hozd létre az alábbi single page appot!

A szerver programot letöltheted a saját gépedre, így kedvedre kísérletezhetsz.

 

 

Útmutató

 

Szerver elindítása:

1. Töltsd le az alábbi állományt és tömörítsd ki egy mappába
   Recept app Node.js szerver letöltése
2. npm install paranccsal telepítsd a harmadik féltől származó könyvtárakat
3. Ha kész a telepítés, indítsd el a szervert, a node index.js paranccsal
4. A szerver a http://localhost:9090 URL-en fogadja a kéréseket

 

Megszólítható endpointok:

 

Method	Útvonal	Funkcionalitás
GET	"/api/recipes"	Összes recept kilistázása
GET	"/api/recipes/:recipeSlug"	Egyetlen recept lekérése slug alapján
POST	"/api/recipes"	Új recept létrehozása
PUT	"/api/recipes/:id"	Recept felülírása id alapján
DELETE	"/api/recipes/:id"	Recept törlése id alapján

A képek a "/static/images" publikus mappába mentődnek, így a React appodból innen tudod őket megszerezni.

Az egyéb statikus fájlok (pl a logó), a "/static/assets" mappából nyerhetőek ki!

 

Egyetlen recept sémája a következő:

 

  {
    "id": string,
    "name": string,
    "slug": string,
    "ingredients": [
      {
        "name": string,
        "quantity": string,
        "type": string
      },
      ...
    ],
    "steps": [
      {
        "content": string,
        "timer": string
      },
      ...
    ],
    "imageURL": string
  }

Ajánlott komponens felosztás:

•  App
•  Home
•  RecipeList
•  RecipeSingle
•  RecipeCreate
•  RecipeEdit
•  Modal
•  Spinner

 

Ajánlott harmadik féltől származó könyvtárak:

Create React App:

• npx create-react-app‎

 

Ikonok:

• npm i --save @fortawesome/fontawesome-svg-core‏‏‎ ‎
• npm i --save @fortawesome/free-solid-svg-icons
• npm i --save @fortawesome/react-fontawesome

 

Útvonalválasztó:

• npm i --save react-router-dom

 

Megjelenés:

• npm i --save bootstrap

 

Sok sikert!

 

 

Megvalósítás:

Első rész:

(Üdvözlő képernyő, recept lista, törlés modal)

 

Második rész:

(Létrehozó form, szerkesztő form, megtekintő oldal)

 

Nézd meg a slide-okat