212 lines
4.6 KiB
Markdown
212 lines
4.6 KiB
Markdown
# 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`
|
||
|
||
--- |