---
# System prepended metadata

title: Projekt sklepu

---

# Projekt sklepu
język ts
## Wymagania funkcyjne
Użytkownik anonimowy (bez logowania)
- przeglądanie zawartości sklepu (towary)
- proste wyszukiwanie po nazwie/opisie towaru

Użytkownik posiadający konto

- utworzenie nowego konta (podanie loginu/hasła)
- możliwość zalogowania się
- w trakcie przeglądania zawartości - możliwość dodania towaru do koszyka
- podsumowanie zamówienia z koszyka

Administrator
- dodawanie/modyfikacja/usuwanie towarów w sklepie
- przeglądanie listy użytkowników
- przeglądanie listy złożonych/otwartych zamówień


## Widoki

### Landing page

- Wyszukiwarka
- Lista produktów (zdjęcie, tytuł, opis, cena)
- Przycisk logowanie/moje konto
- Koszyk

### Logowanie
- Email
- Hasło

### Rejestracja
- Email
- Hasło x2
- Imie Nazwisko
- Adres 

### Koszyk
- Lista produktów (zdjęcie, tytuł, opis, cena)
- Podsumowanie ceny
- Przycisk "Kup" / "Wróć do zakupów"

### Płatności
- Wybór metody platności
- Wybór adresu(zapisany na koncie/inne)

### Ustawienia konta
- Edycja pól z rejestracji
- Historia zamówień

### Widok administratora
- 3 przyciski
#### Lista towarów
- Przycisk dodaj nowy towar
- Lista istniejących produktów, obok każdego przycisk edytuj(po kliknięciu w przyscisk edytuj pokazuje się formularz do edycji) i usuń

##### Formularz edycji produktu
- Formularz z zdjęcie, tytuł, opis, cena
- przycisk zapisz anuluj

#### Lista użytkowników
- Użytkownik: Mail, Imie, Nazwisko, Adres, pokaż liste zamówień
#### Lista zamówień
- Zamówienie: nazwa użytkownika (+ odnośnik do jego danych), lista produktów, data, otwarte/zamknięte




## Feature'y opcjonalne

- Potwierdzenie maila przy rejestracji
- Zmiana liczby produktów w koszyku
- API stripe do płatności
- Sortowanie rekordów po różnych polach w panelu admina

## Projekty intefejsów

### Ekran główny
![](https://i.imgur.com/Qg4GI9q.png)

Po scrollowaniu

![](https://i.imgur.com/ZnkqAoK.png)

### Widok pojedynczego produktu
- Taki sam ekran do edytowania/dodawania produktów przez admina?

![](https://i.imgur.com/XqkHhfR.png)

###  Login
![](https://i.imgur.com/Psnj0wK.png)

###  Rejestracja
![](https://i.imgur.com/4ayEKap.png)

###  Koszyk
- Jeśli w koszyku jest dużo zamówień, to czy kafelek "Do zapłaty" też jest na górze? Wtedy trzeba będzie scrollować sporo do góry, żeby móc przejść do kasy. Może lepiej listować produkty bez zdjęcia (lub z miniaturką zdjęcia), tj. nazwa, ilość, cena, usuń. Wtedy każdy produkt zmieści się w jednej linijce, a "Do zapłaty" może być na samym dole.

![](https://i.imgur.com/1hpCNp9.png)

### Płatności
![](https://i.imgur.com/vKbsVrv.png)

### Ustawienia konta
![](https://i.imgur.com/XHQmbVu.png)
![](https://i.imgur.com/rqnuysx.png)

### Portal admina
- Jak wygląda logowanie do portalu admina? Tak samo jak logowanie użytkownika?

![](https://i.imgur.com/SFWRp59.png)

###  Lista Użytkowników (admin)
![](https://i.imgur.com/pietmDp.png)

### Lista zamówień (admin)
![](https://i.imgur.com/0J8wqE1.png)

### Lista towarów(admin)
![](https://i.imgur.com/graQbxv.png)

## Tabele w SQL

### Users
```
ID - Number
Email - String
Password_Hash - String
Name - String
Surname - String
Phone_Number - String
Country - String
City - String
Street - String
Postal Code - String
OrderIDs - List of Numbers
IsAdmin - Boolean
```

### Products
```
ID - Number
Name - String
Price - Number
Photo_Path - String
Details - String
```

### Baskets
```
UserID - Number
ProductIDs - List of Numbers
```

### Orders
```
ID - Number
UserID - Number
ProductIDs - List of Numbers
OrderPlacementDate - Date
OrderFullfilmentDate - Date
```


## Endpointy

### `/`

##### GET
- Sprawdź czy użytkownik jest zalogowany (middleware?)
- Pobierz pierwsze n produktów z DB (posortowanych np. po cenie) // Chcemy dodać sortowanie do widoku użytkownika?
- Wyświetl Landing page


### `/product/id=?`

##### GET
- Pobierz info z DB i wyświetl


### `/login`

##### GET
- Jeśli użytkownik zalogowany przekieruj do `/`
- W p.p. wyświetl formularz logowania

##### POST
- Porównaj hash hasła z zapisanym w DB.
- Jeśli pasują - wydaj ciastko i przekieruj do `/`
- W p.p. wyświetl wiadomość z błędem

### `/register`

##### GET
- Jeśli użytkownik zalogowany przekieruj do `/`
- W p.p. Wyświetl stronę

##### POST
- Zweryfikuj dane
- Jeśli poprawne, wyślij do DB i przkieruj do `/login`
- Jeśli niepoprawne - wyświetl błąd

### `/logout`

##### GET
- Wydaj nowe ciastko 
- Przekieruj do `/`


### `/basket`

##### GET
- Jeśli użytkownik niezalogowany przekieruj do `/login`
- Przeczytaj userId z ciastka i pobierz informacje o jego koszyku z DB
- Wyświetl stronę

##### POST 
- Jeśli użytkownik niezalogowany przekieruj do `/login`
- Zależnie od wybranej akcji:
    - Usuń produkt z koszyka - zaktualizuj DB i przekieruj do `/basket`
    - Kup - przekieruj do `/checkout`

### `/checkout`

##### GET
- Jeśli użytkownik niezalogowany przekieruj do `/login`
- Wyświetl formularz z płatnościami

##### POST
- Jeśli użytkownik niezalogowany przekieruj do `/login`
- Zweryfikuj dane płatności
- Dodaj zamówienie do DB
- Przekieruj do `/account/history`


### `/account` i `/account/info`

##### GET
- Jeśli użytkownik niezalogowany przekieruj do `/login`
- Zapytaj DB o dane użytkownika i wyświetl

##### POST
- Jeśli użytkownik niezalogowany przekieruj do `/login`
- Zaktualizuj DB o przekazane dane użytkownika i przekieruj do `/account/info`


### `/account/history`

##### GET
- Jeśli użytkownik niezalogowany przekieruj do `/login`
- Zapytaj DB o zamówienia użytkownika i wyświetl



### `/admin`

##### GET
- Sprawdź czy użytkownik jest zalogowany i zapytaj DB czy jest adminem
- Jeśli nie - przekieruj do `/login` lub `/`
- Jeśli tak - wyświetl stronę z trzema przyciskami


### `/admin/users`
##### GET
- Zweryfikuj uprawnienia admina i zapytaj DB o użytkowników


### `/admin/orders`
##### GET
- Zweryfikuj uprawnienia admina i zapytaj DB o zamówienia

### `/admin/products`
##### GET
- Zweryfikuj uprawnienia admina i zapytaj DB o produkty 

### `/admin/products/new`
##### GET
- Wyświetl formularz nowego produktu

##### POST
- Dodaj produkt do DB i przekieruj do `/admin/products`


## Metoda Przechowywania Haseł
Zgodnie z zaleceniami OWASP użyjemy algorytmu argon2 soli i piprzu.
