jesnagbg / react-webshop-ts-jenny-ellen-nat

Piece by piece

A webshop for puzzles with a user and admin interface.

About puzzles Webshop

As a group project, we were assigned to build a webshop using React and TypeScript, and to incorporate a design system of our choosing. We opted to use MUI. Our webshop allows users to add products to their cart and input necessary user information to place an order. In addition, we included an admin interface that enables the admin to add, edit, and delete products as needed.

Project setup

• Install dependencies by running npm install
• Start the development server npm run dev

Design System Documentation

This webshop uses the MUI design system. You can find documentation for MUI here.

Made by

Nathanael Blackbourn Jenny Pettersson Ellen Dahlgren

Krav för Godkänt

• Git & GitHub har använts
• Projektmappen innehåller en README.md fil - (läs ovan för mer info)
• Uppgiften lämnas in i tid!

Home

• Ska ha en övergripande layout med header, main & footer.
• Startsidan ska lista samtliga produkter.
• Det ska gå att lägga till produkter i kundvagnen (header + toast + ls).
• Det ska gå att klicka på en produkt och komma till en detaljsida.
• Sidan ska vara responsiv och gå att använda på mobil, tablet & desktop.

Produkt

• Ska ha en övergripande layout med header, main & footer.
• Detaljsidan ska visa all info om en produkt.
• Det ska gå att lägga till produkten i kundvagnen (header + toast + ls).
• Sidan ska vara responsiv och gå att använda på mobil, tablet & desktop.

Kundvagn & Checkout

• Ska ha en övergripande layout med header, main & footer.
• Det ska gå att gå till checkoutsidan och se innehållet i kundvagnen (knapp & url).
• Det ska gå att se det totala priset i kundvagnen.
• Det ska gå att ändra produkterna i kundvagnen (header + vyn + pris + ls).
• Det ska gå att ange leveransuppgifter i ett formulär.
• Samtliga fält för checkoutsidans formulär ska ha valideringsregler.
• Formulären vid utcheckningen ska gå att automatiskt fyllas i. (ej klar)
• Bekräftelsesidan ska visa orderdetaljer och leveransuppgifter. (delvis klar)

Krav för Väl Godkänt

• Ett designsystem/komponentbibliotek används nästintill helt uteslutande för att bygga sidan (ex: MUI, ChakraUI, Mantine, etc).

Admin

• Det finns en admin-sida för produkthantering
• Det ska gå att se alla produkter på admin sidan
• Det går att lägga till produkter via admin sidan + ls
• Det går att ta bort produkter via admin sidan + ls
• Det går att redigera produkter via admin sidan + ls
• Samtliga fält för adminsidans formulär ska ha valideringsregler