k03-restful-api-react

Uppgiftsbeskrivning

I denna uppgift ska du skapa någon form av webbshop. Vad denna shop ska sälja är öppet för tolkning, men några förslag är böcker, kläder, konstverk etc.

Uppgiften går ut på att du ska visa på föreståelse för, tillämpning, samt användning av ett REST API med JWT-baserad authentication. Det finnas en teknisk kravspecifikation som detaljerar vilka features som måste finnas såväl som önskvärda sådana.

Utöver att implementera denna lösning ska du också skapa grundläggande underlag för UX och design. Detta innefattar en grundläggande digitala design samt en användningsanalys. Se guide på webbriktlinjer.se för detta. Tanken är att du med användningsanalysen låta styra hur din slutgiltiga lösning blir - bonus är om man dessutom testar detta kontinuerligt under utvecklingsprocessen.

Missa inte de funktionella och icke-funktionella kraven i dokumentet nedan

Teknisk kravspecifikation för k03

Övergripande mål

Uppgiften *skall uppfylla följande övergripande mål:*

• Webbplatsen ska fungera i följande enheter och kommer testas i dem:

  • PC desktop (upplösning 1920x1080p och uppåt)

  • Laptop (upplösning 1280 x 900 och uppåt)

  • Mobil (upplösning 414×746)

• Webbplatsen ska fungera i de senaste versionerna av följande webbläsare och kommer testas i dem:

  • Chrome

  • Firefox

  • Safari

  • Edge

• Webbplatsen ska följa teknisk Teknisk kravspecifikation för k03

• Webbplatsen ska ha en design kopplad till Personas och Scenarios

• Webbplatsen ska ha en användarstudie/användningsanalys med minst 10 svar från olika personer (det är okej att fråga i klassen)

  • Se guide på https://webbriktlinjer.se/anvandarcentrering-tjanstedesign/utfor-anvandningsanalys/

• Webbplatsen ska deployas på webbleverantör som stödjer Node.JS. Det är rekommenderat att man använder Heroku som är gratis, eller liknande tjänster. Tänk på begränsningar såsom CORS (Cross-Origin Resource Sharing) och HTTPS.

• Webbplatsen ska använda React för att implementera frontend, det är inte ett krav att använda Flux, Redux eller liknande - det är fullt tillåtet att bara nyttja React

• Webbplatsen kan använda Node.JS med Express för att implementera backend eller PHP med Laravel som grund. Typ av databas kan vara relationsdatabas (MySQL) eller dokumentdatabas (MongoDB)

Generella krav på arbetsprocess

• Uppgiften måste versionshanteras i Git, inlämningar med en commit i vid inlämning kommer inte godkännas.

  • För denna uppgift ska du följa GitHub Flow som arbetsmetodik när du arbetar med Git. Uppgiften kommer inte godkännas om denna metodik inte följs.

• Inlämning ska följa kodstandarder:

  • För JavaScript:

    • http://airbnb.io/projects/javascript/

  • För CSS:

    • http://airbnb.io/projects/css/

  Följ denna guide för konfiguration: https://travishorn.com/setting-up-eslint-on-vs-code-with-airbnb-javascript-style-guide-6eb78a535ba6

Inlämning

Uppgiften ska lämnas in via classroom.github.com i rätt projekt, länk till detta projekt kommer annonseras av läraren i samband med projektets början.

• https://classroom.github.com/a/QRs3XPE8

Förslag på planering

Vecka 1: Ta fram och skapa UX och design, användaranalys. Bygg samtliga vyer i applikationer och komponenter i React.

Vecka 2: Påbörja implementation av backend i Node. Utgå från vad som kommer behöver lagras i databasen och hur den datan ska behandlas, det är rekommenderat att använda sig av ett ER diagram. Börja sedan implementera authentication i backend, testa kontinuerligt med Postman för varje route och motsvarade metod som läggs till i API:et.

Vecka 3: **Påbörja koppling med frontend och backend, saker som varit statiska i React i frontend kan nu börja kopplas mot API:et. Om tiden tillåter - testa deploya (många gånger).

Vecka 4: Testa, testa, testa igen och testa lite till. Se till att alla de tekniska kraven är uppnådda - deploya till produktion och testa allt igen (i olika webbläsare, be gärna om hjälp för att testa av)

Vecka 5: Försök lösa så många av de kritiska buggarna som möjligt innan inlämning eller bygg på med extra funktionalitet för att få försöka nå högre betyg

Betygsättning

Den här inlämningen ger underlag för följande kursmål. Där inlämningen helt motsvarar och går att bedöma för de mål som står med svart text och bara delvis de som står med brun text.

• HC 2.1 Webbutveckla responsivt och browseranpassat med HTML och CSS enligt aktuella webbstandarder

• HC 2.2 Utveckla browseranpassad CSS

• HC 2.3 Optimera och validera HTML & CSS

• HC 2.4 Webbutveckla med anpassning för tillgänglighet

• —

• JS 1.1 JavaScript / ECMAScript

• JS 1.4 DOM-manipulation

• JS 1.7 Lexical scope

• JS 1.8 Event handling

• JS 2.1 Utveckla webblösningar med JavaScript

• JS 2.3 Använda befintliga API:er som en komponent i den egna appen

• —

• PG 2.2 Identifiera, formulera, analysera och lösa problem inom programmering

• PG 2.9 Arbeta med versionshantering både enskild och inom ett team

• PG 3.1 Identifiera, formulera, analysera och använda sig av informationssökning för att lösa problem inom programmering

• —

• UD 1.1 Grafik och design för webbsidor

• UD 1.2 UX och användbarhet

• UD 1.5 Personas och målgruppsanalys

• UD 2.1 Ta fram grundläggande grafik och design för webb

• UD 3.1 Arbeta som Fullstack-webbutvecklare med UX och grundläggande design

Godkänd

För att nå Godkänd som betyg på denna inlämning ska du:

• utför alla färdigheter (2.x) som uppgiften har som mål med gott handlag

• Med gott handlag syftas det till att inlämnad kod ska enhetligt följa standarder för frontend som är angivna i uppgiftsbeskrivningen

Väl godkänd

För att nå Väl godkänd som betyg på denna inlämning ska du:

• utför alla färdigheter (2.x) som uppgiften har som mål med mycket gott handlag

• Mycket gott handlag omfattar godkänd nivå men inlämning innehåller även utförlig och enhetlig dokumentation för hela kodbasen (i både kod och separat dokumentation)