This commit is contained in:
+212
@@ -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`
|
||||
|
||||
---
|
||||
Reference in New Issue
Block a user