# Slutprojekt – Webbutveckling 1

## Krilles IT Shop (KITS)

Krille driver en liten IT-butik som säljer datorkomponenter och erbjuder reparationer. Nu vill han ha en modern, interaktiv webbplats byggd med **React + Vite + TypeScript + TailwindCSS**.

Webbplatsen ska:

* Visa öppettider
* Presentera produkter och komponenter via **eBay Finding API**
* Beskriva felsökningar och reparationer
* Låta kunder boka hemservice
* Låta kunder lämna in datorer för optimering
* Visa utbud av TV- och ljudsystem
* Ha en **admin-sida** för hantering av bokningar och produktstatus

---

## 📌 Projektets mål

* Skapa en komplett och responsiv webbplats
* Använda **React + TypeScript + TailwindCSS**
* Integrera **eBay Finding API** för produkter
* Implementera **bokningssystem**
* Skapa en **admin-panel med Google OAuth**
* Lagra data i **MongoDB**
* Följa god webbstandard, tillgänglighet och säkerhet
* Redovisning: **27 maj**
* Publicering: **30 maj**

---

## 📋 Projektplan

### 1️⃣ Tidsplan & Milstolpar

| Milstolpe   | Datum    | Beskrivning                                                        |
| ----------- | -------- | ------------------------------------------------------------------ |
| Milestone 1 | 24 mars  | Planering, design, struktur och användarfall                       |
| Milestone 2 | 20 april | Implementera frontend (React + Tailwind) + eBay API + bokningsform |
| Milestone 3 | 10 maj   | Implementera MongoDB, admin-panel, OAuth och testning              |
| Slut        | 30 maj   | Färdigställande, förbättringar, dokumentation                      |

---

### 2️⃣ Användarfall (User Cases)

#### Kund

* Se produkter (hämtade från eBay API)
* Se öppettider
* Läsa om tjänster
* Boka hemservice
* Lämna in dator för optimering

#### Admin

* Logga in via Google OAuth
* Se alla bokningar
* Uppdatera bokningsstatus
* Se och uppdatera produktstatus

---

### 3️⃣ Teknik & Struktur

#### Tekniker

* React + Vite + TypeScript
* TailwindCSS
* MongoDB
* Google OAuth
* eBay Finding API
* React Router

---

#### Filstruktur

```text
src/
├── App.tsx
├── main.tsx
├── index.css
├── components/
│   ├── Navbar.tsx
│   ├── Footer.tsx
│   ├── ProductCard.tsx
│   ├── ServiceCard.tsx
│   └── BookingForm.tsx
├── pages/
│   ├── Home.tsx
│   ├── About.tsx
│   ├── Contact.tsx
│   ├── Admin/
│   │   ├── Dashboard.tsx
│   │   ├── BookingList.tsx
│   │   └── ProductStatus.tsx
│   └── Products/
│       ├── Computers.tsx
│       ├── Components.tsx
│       ├── TVAudio.tsx
│       └── Repair.tsx
└── assets/
```

---

### 4️⃣ Databas & Backend

* **MongoDB** används för:

  * Bokningar
  * Produktstatus

* Backend (Node.js eller serverless):

  * API för CRUD-operationer
  * Hanterar MongoDB

* **.env / GitHub Secrets** används för:

  * MongoDB URI
  * eBay API-nyckel
  * Google OAuth credentials
  * Admin-användare

---

### 5️⃣ Funktionalitet

* Routing med `react-router-dom`
* Dark mode med Tailwind (`dark:`) + localStorage
* Dynamiskt årtal i footer
* Fetch från eBay API
* Bokningsformulär → sparas i MongoDB
* Admin-panel:

  * Visa bokningar
  * Uppdatera status
  * Visa produktstatus

---

### 6️⃣ Design & UX

* Responsiv design (mobil, surfplatta, desktop)
* Tydlig navigation (navbar + footer)
* Återanvändbara komponenter
* Enkel och tydlig bokningsprocess
* Admin-gränssnitt med tabeller och filter

---

### 7️⃣ Testning & Kvalitetssäkring

* Test i flera webbläsare (Chrome, Edge, Firefox)
* Test på mobil och desktop
* Lighthouse (prestanda & tillgänglighet)
* Test av:

  * API-anrop
  * Bokningar
  * Admin-login
  * Responsivitet

---

### 8️⃣ Säkerhet, lagar & etik

* GDPR: hantering av personuppgifter i bokningar
* Säker lagring av API-nycklar (.env)
* Google OAuth för säker inloggning
* Ingen känslig data exponeras i frontend
* Reflektion kring hosting och säkerhet

---

### 9️⃣ 🎨 Färgtema

#### 🔴 Temafärger

* Primary: `#E10600`
* Hover: `#B10500`
* Subtle: `#FCE8E6`

#### 🌕 Ljust läge

* Background: `#F8F9FB`
* Surface / Card: `#FFFFFF`
* Border / Divider: `#E5E7EB`
* Text Primary: `#0F172A`
* Text Secondary: `#475569`
* Text Muted: `#94A3B8`

#### 🌑 Mörkt läge

* Background: `#0B0F14`
* Surface / Card: `#111827`
* Border / Divider: `#1F2933`
* Text Primary: `#E5E7EB`
* Text Secondary: `#9CA3AF`
* Text Muted: `#6B7280`

#### 🟢 Statusfärger

* Success: `#22C55E`
* Warning: `#F59E0B`
* Error: `#EF4444`
* Info: `#38BDF8`

---