Dynamisk Webbutveckling Slutprojekt

School: Medieinsitutet Gothenburg

Class: FED21G

Grupp: 3

Date: 2022-06-03

Developers:

• Tomas Fridekrans (https://github.com/spaceflake)

• Hazem Kawas (https://github.com/hazem-89)

• Philip Risberg (https://github.com/Prisberg)

• Emil Hagelin (https://github.com/empafrontend)

Projektledare

• Tomas Fridekrans

Teacher: David Jensen

Intro

I denna uppgift skall vi bygga en webbshops-applikation inkluderande en klient och en server. Servern ska vara kopplad till en mongodb databas och vara strukturerad baserad på ett REST-API med resurser.

Krav

GODKÄNT

• Alla sidor skall vara responsiva. (G) (Genom att använda CSS)

• Arbetet ska implementeras med en React frontend och en Express backend. (G) (Vi använde oss av React för Client och Express för Server)

• Skapa ett ER diagram och koddiagram, detta ska lämnas in vid idégodkännandet G) (Vi använde oss Figma och sedan presenterade det för våran handledare)

• Beskriv er företagsidé i en kort textuell presentation, detta ska lämnas in vid idégodkännandet (G) (Presenterat för handledaren)

• All data som programmet utnyttjar ska vara sparat i en Mongo-databas (produkter, beställningar, konton mm) (G) (Skapat resurser i databasen där respektiva data hanteras till kollektioner)

• Man ska kunna logga in som administratör i systemet (G) (Har använt Passport samt middleware för att styra tillgång till resurser)

• Inga Lösenord får sparas i klartext i databasen (G) (Genom att använda bcrypt)

• En besökare ska kunna beställa produkter från sidan, detta ska uppdatera lagersaldot i databasen (G) (Detta gör vi med endpoints. Besökaren skickar samlingen av kompletta produkter, sin adress till servern som sedan slår ihop dem till en order som skickas tillbaks till client)

• Administratörer ska kunna uppdatera antalet produkter i lager från admin delen av sidan (G) (Genom ett edit-forumlär)

• Administratörer ska kunna se en lista på alla gjorda beställningar (G) (Genom ett fetch-anrop till klientsidan från databasen. Presenteras en tabell med orderstatus, produkter, leveransadress)

• Sidans produkter ska delas upp i kategorier, en produkt ska tillhöra minst en kategori, men kan tillhöra flera (G) (När man skapar en produkt krävs att man sätter en string[]och den string[]används för att dela upp katergorierna)

• Från hemsidan ska man kunna se en lista över alla produkter, och man ska kunna lista bara dom produkter som tillhör en kategori (G) (Produkterna skickas från server till client och mappas ut, på produkt datan finns en string array som innehåller kategorierna. String arrayen extraheras från produkterna och mappas ut som knappar. Trycker man på en knapp används dess string som search param och utifrån den parametern filtreras produkterna. )

• Besökare ska kunna lägga produkterna i en kundkorg, som är sparad i local-storage på klienten (G) (Med hjälp av localstorage)

• En besökare som gör en beställning ska få möjligheten att registrera sig samt logga in och måste vara inloggad som kund innan beställningen skapas (G) (Med hjälp av en currentUser som kollar om någon användare är inloggad )

• Besökare ska kunna välja ett av flera fraktalternativ (G) (Med hjälp av ett formik-formulär)

• Tillgängliga fraktalternativ ska vara hämtade från databasen (G) (Genom våra endpoints för den resursen)

• Checkoutflödet i frontendapplikationen ska ha validering på samtliga fält (G) (Genom formik och yup)

VÄL GODKÄNT

• Man ska kunna registrera sig som administratör på sidan, nya användare ska sparas i databasen (VG) (Endpoints finns för att registrera en önskan om att bli admin, existerande admins måste sen godkänna.)

• En administratör behöver godkännas av en tidigare administratör innan man kan logga in första gången (VG) (-||-)

• Administratörer ska kunna markera beställningar som skickade (VG) (Endpoint för att uppdatera order status, genom knapp på öppnad accordion på ordertabellen. Visas om inte ordern är skickad.)

• När man är inloggad som kund ska man kunna se sina gjorda beställning och om det är skickade eller inte (VG) (Användare har en egen sida. Orders med status hämtas från endpoint)

• Administratörer ska kunna redigera vilka kategorier en produkt tillhör(VG) (Avgränsing, behöver välja flera kategorier, då sista inte läggs till.)

• Administratörer ska kunna lägga till och ta bort produkter(VG) (Går att lägga till nya produkter)

• Backendapplikationen måste ha en fungerande global felhantering (VG) (Genom att skapa en felhanterare)

Hur man kör projektet.

Öppna terminalen i din code-editor, skriv sedan cd server och npm i.

Efter alla moduler laddats ner skriv npm start för att köra servern på port 4000.

När npm för server är klart skriv cd client och npm i.

När modulerna är nedladdade skriv npm start för att köra projektet i browsern.

Inloggningsuppgifter för Admin

Username:fille.risberg@live.se Password:password

Links

REPO