Laddade up plan.md

docs/plan.md

@@ -0,0 +1,212 @@
+# 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`
+
+---