> For the complete documentation index, see [llms.txt](https://kunskapsbasen.chas.school/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kunskapsbasen.chas.school/material/uppgifter/kompletteringsuppgifter/k03-restful-api-react/teknisk-kravspecifikation-foer-k03.md).

# Teknisk kravspecifikation för k03

Detta dokument listar den tekniska kravspecifikation som behövs för k03

### **User Personas**

*Notis: Nedan ser hittar ni tre exempel på användarprofiler som kan tänkas nyttja webbplatsen. Det behövs endast tre för denna sektion men om ni lägger till funktionalitet eller ökar scope (och komplexitet) i er inlämning kan ni behöva fler personas.*

Nedan följer en mall för era personas

| Användartyp  | Namn        | Kön | Ålder | Mål                                                                                                          |
| ------------ | ----------- | --- | ----- | ------------------------------------------------------------------------------------------------------------ |
| Regular user | Bert Olsson | Man | 56    | Beskriv vad personan vill försöka uppnå genom att använda sig av webbplatsen. Beskriv ett kort scenario här. |

### **User Stories**

*Notis: Denna sektion är den översta nivån av user stories och de som listas här är väldigt övergripande (kallas ofta för Epics), Poängen med dessa är att webbplatsen måste kunna stödja dessa user stories när den första releasen anses färdig. Kom ihåg, ett vanligt format att skriva dessa stories är: As a , I want  so that .*

**Exempel på user stories**

### **Website Users**

> **As a** Website User, I am busy and have little time to find information about movies. **I want** to be able to find information about movies quickly and painlessly. Ideally with as few clicks as possible. **So that** I can spend get the information easily.
>
> **As a** Website User, finding the correct movie is vital. **I want** to see different results of movies in a clear and concise manner **so that** I can easily know which movies I should watch, or learn more about.

### **Website Registered Users**

> **As a** Registered Website User, I am concerned with keeping track of what movies **I want** to watch, what movies I’m reviewing, have reviewed or am planning to review. **So that I** can have the possibility to manage several lists of movies I want to watch, as well as movies I am currently reviewing or have planned to review.

**Skapa egna user stories för olika typer av användare för att täcka upp funktionalitet**

### **Icke-funktionella krav**

1. The application backend must provide a RESTful API (i.e. should be able to be used with any other frontend)
2. The application must work in all modern browsers
3. The application must be responsive (work well and be functional good on all screen sizes)

### Funktionella krav

Dessa krav **måste** uppfyllas

1. A user **must** be able to register an account
2. A user **must** be able to login to their account
3. A user **must** be able to search for products
4. A user **must** be able to browse products by category
5. A user **must** be able to browse products by category and/or subcategory
6. A user **must** be able to view their own profile and update their information
7. A user and/or visitor **must** be able to add/remove/update (amount) of products in a shopping cart
8. A user and/or must be able to show a summary of items to be added an order, with price for each item and the total
9. A user **must** be able to view their own profile and view their current ongoing orders and order history
10. An administrative user **must** be able to log in to a basic dashboard an create/update/delete products
11. An administrative user **must** be able to log in to a basic dashboard an create/update/delete users

Dessa krav är **frivilliga** men meriterar högre betyg

1. An administrative user **should** be able to change status of orders
2. An administrative user **should** be able to add discounts to orders
3. A user **should** be able to place an order
4. A user should be able to receive confirmation via email about their order

### **Sitemap**

När era user stories är definierade borde det finnas en grundidé för vilka vyer er applikation kommer behöva innehålla. Ett bra sätt att dokumentera detta är via en så kallad **sitemap**

En bra sitemap innehåller följande:

* **En omfattande lista av alla sidor eller vyer.** Detta inkluderar allt från vyer som innehåller detaljinformation till enklare “om oss” sidor. Spendera lite tid på att få fram samtliga vyer och att dessa finns med i er applikation.
* **Hierarkin mellan dessa sidor är illustrerad .** Om ni har en uppfattning om sidorna relaterar sig till varandra kan det vara bra att illustrera hur de förhåller sig hierarkiskt till varandra, i sitemapen. Detta kan underlätta när ni ska skapa/designa er navigation

*Exempel på verktyg:* <https://www.writemaps.com/>

### **Routes**

[De routes som behöver finnas i applikationen](https://app.gitbook.com/s/-LuHie4SfjwWMBGmlWdI/material/uppgifter/kompletteringsuppgifter/k03-restful-api-react/Teknisk%20kravspecifikation%20f%20r%20k03/De%20routes%20som%20beh%20ver%20finnas%20i%20applikationen.csv)

### **Wireframes**

*Notis: Nedan ska två det listas wireframes av webbplatsen. En är era första utkast på hur sidan är tänkt att se ut och fungera, med detta i åtanke kan utvecklingen börja så smått. För mer detalj gör man sedan vyer i valfritt verktyg (Balsamiq) är ett vanligt alternativ. Det viktiga här är att man täcker upp den grundläggande funktionaliteten som ska finnas i varje vy.*

**Wireframes**: Valfritt Prototypverktyg

*Era wireframes från prototypverktyg här*