Slutprojekt-Webbutveckling-1-KITS/docs/plan.md

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

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

---