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`
|
|||
|
|
|
|||
|
|
---
|