/Fortknox

SCHOOL: Group assignment - System development framework

Primary LanguageTypeScript

Fortknox

Welcome to Fortknox! This is an assignment for Medieinstitutet made by Angelica Moberg Skoglund, Fredrik Lexö and Hugo Bengtsson. Fortknox is our first big project working in React and TypeScript and there has been a good learning curve during the project. We have found a lot of improvements that could be made but because of the limited time of the school project we have not had the opportunity to develop all of them. You will find some comments in the code that explains some of the improvements that could be made in the future and if we were to start the project over today we would build a lot of the components better and more reusable for multiple pages.

We have also used Material UI as the design system for the project. Same as with React and TypeScript, there has been a learning curve to this but we have enjoyed working with MUI and appreciate using already built components and saving time not needing to develop them ourselves.

How to install repo

  1. To install our repository locally you need to first install the dependencies: npm install
  2. To run the project locally on your computer: npm run dev

Below follows the assignments different requirements in Swedish.

Krav för godkänt:

  1. Git & GitHub har använts ✅
  2. Projektmappen innehåller en README.md fil ✅
  3. Uppgiften lämnas in innan deadline! ✅
  4. 4.Ett designsystem används ✅
  5. 5.React Router skall användas som navigation. Exempelvis så skall produkten som visas på produktsidan ska baseras på en parameter i url’en. ✅
  6. 6.React context skall användas för hantering av kundvagnen. ✅
  7. 7.Samtliga fält ska ha valideringsregler (tips, se Material UI:s dokumentation) ✅
  8. 8.Sidan ska vara fullt responsiv ✅
  9. 9.Mockade produkter ska ligga i en egen fil och vara typade med ett TS interface ✅

Krav för väl godkänt:

  1. Alla punkter för godkänt är uppfyllda ✅
  2. Det finns en admin-sida där man kan ändra, lägga till eller ta bort produkter på sidan ✅
  3. Samtliga produkter skall vara sparade i localstorage (om localstorage är tom då sidan läses in behöver samtliga fördefinierade produkter sparas där) ✅

Github: https://github.com/totaldekadens/Fortknox

Sneak peak

Desktop

Front page

1 Fortknox_frontpage1_desktop

2 Fortknox_frontpage2_desktop

Product page

3 Fortknox_productpage1_desktop

4 Fortknox_productpage2_desktop

Cart / Checkout

5 Fortknox_step1_1_desktop

6 Fortknox_step1_2_desktop

7 Fortknox_step2_desktop

8 Fortknox_step3_desktop

9 Fortknox_step4_1desktop

10 Fortknox_step4_2desktop

11 Fortknox_orderconfirm_1_desktop

12 Fortknox_orderconfirm_2_desktop

Admin

13 Fortknox_admin_create_desktop

14 Fortknox_admin_change_desktop

15 Fortknox_admin_overview_desktop

Mobile

Front page

1 Fortknox_frontpage1_mobile 2 Fortknox_frontpage2_mobile

Product page

3 Fortknox_productpage1_mobile 4 Fortknox_productpage2_mobile

Admin

5 Fortknox_admin_mobile 6 Fortknox_admin_2_mobile

7 Fortknox_admin_delete_mobile 8 Fortknox_admin_validation_dialog_mobile