Do Siki
b0df8dd182
- Updated README.md with project details, quick start instructions, and tech stack. - Expanded TODO.md to reflect current project status and backlog items, including Linear ticket synchronization. - Added mobile menu toggle functionality in Header component with corresponding tests for user interactions. - Configured Next.js for Docker deployment and optimized build settings.
595 lines
14 KiB
Markdown
595 lines
14 KiB
Markdown
# mozdIT Weboldal - Követelmény Katalógus
|
|
|
|
## 📋 **Követelmény Kategóriák és REQ Prefixek**
|
|
|
|
### **REQ-001-099: Funkcionális Követelmények (Functional Requirements)**
|
|
### **REQ-100-199: Nem-funkcionális Követelmények (Non-Functional Requirements)**
|
|
### **REQ-200-299: Technikai Követelmények (Technical Requirements)**
|
|
### **REQ-300-399: Biztonsági Követelmények (Security Requirements)**
|
|
### **REQ-400-499: Teljesítmény Követelmények (Performance Requirements)**
|
|
### **REQ-500-599: Felhasználói Élmény Követelmények (UX Requirements)**
|
|
### **REQ-600-699: SEO és Marketing Követelmények**
|
|
### **REQ-700-799: Monitoring és Logging Követelmények**
|
|
### **REQ-800-899: Deployment és DevOps Követelmények**
|
|
|
|
---
|
|
|
|
## 🎯 **REQ-001-099: Funkcionális Követelmények**
|
|
|
|
### **REQ-001: Kezdőlap Funkcionalitás**
|
|
**Kategória**: Főoldal tartalom és funkcionalitás
|
|
**Prioritás**: Kritikus
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: A kezdőlap tartalmazza a cég bemutatkozását, fő szolgáltatásokat és a Webmail CTA-t.
|
|
|
|
**Részletek**:
|
|
- Hero szekció egyedi bemutatkozó szöveggel
|
|
- Webmail ugrás gomb (külső URL)
|
|
- Szolgáltatások rövid dobozai (Web Hosting, Email, DNS)
|
|
- Kapcsolatfelvétel CTA
|
|
- Responsive design
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] Hero szekció megjelenik megfelelő szöveggel
|
|
- [x] Webmail gomb működik és külső linkre vezet
|
|
- [x] Szolgáltatás dobozok megjelennek
|
|
- [x] Mobil és desktop nézetben megfelelően működik
|
|
|
|
---
|
|
|
|
### **REQ-002: Rólunk Oldal**
|
|
**Kategória**: Cég bemutatkozás
|
|
**Prioritás**: Magas
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: A Rólunk oldal bemutatja a cég történetét, értékeit és előnyeit.
|
|
|
|
**Részletek**:
|
|
- Cég története (2018 óta működik)
|
|
- Személyes ügyfélkezelés kiemelése
|
|
- Megbízhatóság és folyamatos támogatás
|
|
- USP bullet pontok (személyes, gyors, stabil, rugalmas)
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] Cég történet megjelenik
|
|
- [x] USP pontok listázva
|
|
- [x] Responsive design
|
|
- [x] Navigáció működik
|
|
|
|
---
|
|
|
|
### **REQ-003: Szolgáltatások Oldal**
|
|
**Kategória**: Szolgáltatás bemutatás
|
|
**Prioritás**: Magas
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: Részletes szolgáltatás leírások a három fő területről.
|
|
|
|
**Részletek**:
|
|
- Web Hosting szolgáltatás részletei
|
|
- Email szolgáltatás funkciói
|
|
- DNS Adminisztráció leírása
|
|
- Minden szolgáltatáshoz kapcsolat CTA
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] Három szolgáltatás részletesen leírva
|
|
- [x] Feature listák megjelennek
|
|
- [x] Kapcsolat CTA-k működnek
|
|
- [x] Responsive design
|
|
|
|
---
|
|
|
|
### **REQ-004: Kapcsolat Űrlap**
|
|
**Kategória**: Ügyfél kommunikáció
|
|
**Prioritás**: Kritikus
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: Funkcionális kapcsolat űrlap validációval és spam védelemmel.
|
|
|
|
**Részletek**:
|
|
- Név, email, üzenet mezők
|
|
- GDPR checkbox kötelező
|
|
- Frontend validáció (required, email format)
|
|
- Backend spam védelem
|
|
- Rate limiting (5 kérés/perc)
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] Űrlap mezők validálása
|
|
- [x] Email formátum ellenőrzés
|
|
- [x] GDPR checkbox kötelező
|
|
- [x] Spam védelem működik
|
|
- [x] Rate limiting aktív
|
|
|
|
---
|
|
|
|
### **REQ-005: Navigáció Rendszer**
|
|
**Kategória**: Felhasználói navigáció
|
|
**Prioritás**: Magas
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: Responsive navigáció hamburger menüvel mobilon és sticky header desktopon.
|
|
|
|
**Részletek**:
|
|
- Desktop: sticky header
|
|
- Mobil: hamburger menü
|
|
- Smooth scroll navigáció
|
|
- Aktív oldal kiemelése
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] Hamburger menü működik mobilon
|
|
- [x] Sticky header desktopon
|
|
- [x] Navigációs linkek működnek
|
|
- [x] Aktív oldal kiemelve
|
|
|
|
---
|
|
|
|
### **REQ-006: Webmail Integráció**
|
|
**Kategória**: Külső szolgáltatás integráció
|
|
**Prioritás**: Magas
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: Webmail szolgáltatás integráció külső URL-lel.
|
|
|
|
**Részletek**:
|
|
- Webmail gomb a hero szekcióban
|
|
- Külső URL konfigurálható
|
|
- Új ablakban nyílik meg
|
|
- Environment variable konfiguráció
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] Webmail gomb megjelenik
|
|
- [x] Külső URL-re vezet
|
|
- [x] Új ablakban nyílik
|
|
- [x] Konfigurálható environment változóval
|
|
|
|
---
|
|
|
|
## 🎯 **REQ-100-199: Nem-funkcionális Követelmények**
|
|
|
|
### **REQ-101: Responsive Design**
|
|
**Kategória**: Multi-device támogatás
|
|
**Prioritás**: Kritikus
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: Mobile-first design minden eszközön működik.
|
|
|
|
**Részletek**:
|
|
- Töréspontok: 360px, 640px, 768px, 1024px, 1280px+
|
|
- Mobile-first approach
|
|
- Touch-friendly interface
|
|
- Optimalizált layout minden méretre
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] Mobil nézet (360px+) működik
|
|
- [x] Tablet nézet (768px+) működik
|
|
- [x] Desktop nézet (1024px+) működik
|
|
- [x] Touch elemek megfelelő méretűek
|
|
|
|
---
|
|
|
|
### **REQ-102: Accessibility (A11y)**
|
|
**Kategória**: Akadálymentesség
|
|
**Prioritás**: Magas
|
|
**Státusz**: 🔄 Folyamatban
|
|
|
|
**Leírás**: WCAG 2.1 AA szabvány szerinti akadálymentesség.
|
|
|
|
**Részletek**:
|
|
- Fókusz kezelés
|
|
- ARIA attribútumok
|
|
- Kontraszt arány ≥ 4.5:1
|
|
- Logikus heading struktúra
|
|
- Keyboard navigáció
|
|
|
|
**Acceptance Criteria**:
|
|
- [ ] Fókusz látható minden interaktív elemen
|
|
- [ ] ARIA labels megfelelőek
|
|
- [ ] Kontraszt megfelelő
|
|
- [ ] Heading struktúra logikus
|
|
- [ ] Keyboard navigáció működik
|
|
|
|
---
|
|
|
|
### **REQ-103: SEO Alapok**
|
|
**Kategória**: Keresőoptimalizálás
|
|
**Prioritás**: Magas
|
|
**Státusz**: 🔄 Folyamatban
|
|
|
|
**Leírás**: Alapvető SEO optimalizálás minden oldalra.
|
|
|
|
**Részletek**:
|
|
- Unique title és description per oldal
|
|
- Open Graph meta tagek
|
|
- Sitemap.xml generálás
|
|
- Robots.txt konfiguráció
|
|
- Structured data (JSON-LD)
|
|
|
|
**Acceptance Criteria**:
|
|
- [ ] Minden oldalnak van unique title-je
|
|
- [ ] Meta descriptions megfelelőek
|
|
- [ ] OG tagek beállítva
|
|
- [ ] Sitemap.xml elérhető
|
|
- [ ] Robots.txt konfigurálva
|
|
|
|
---
|
|
|
|
## 🎯 **REQ-200-299: Technikai Követelmények**
|
|
|
|
### **REQ-201: Next.js 14 App Router**
|
|
**Kategória**: Frontend framework
|
|
**Prioritás**: Kritikus
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: Next.js 14 App Router használata TypeScript-tel.
|
|
|
|
**Részletek**:
|
|
- App Router architektúra
|
|
- TypeScript típusok
|
|
- Server és Client komponensek
|
|
- API Routes implementáció
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] App Router működik
|
|
- [x] TypeScript konfigurálva
|
|
- [x] Server/Client komponensek megfelelően használva
|
|
- [x] API Routes működnek
|
|
|
|
---
|
|
|
|
### **REQ-202: Tailwind CSS Styling**
|
|
**Kategória**: UI framework
|
|
**Prioritás**: Magas
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: Tailwind CSS használata responsive design-hoz.
|
|
|
|
**Részletek**:
|
|
- Utility-first CSS
|
|
- Custom design system
|
|
- Responsive utilities
|
|
- Dark mode support (opcionális)
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] Tailwind CSS konfigurálva
|
|
- [x] Responsive design működik
|
|
- [x] Custom komponensek stílusozva
|
|
- [x] Konzisztens design system
|
|
|
|
---
|
|
|
|
### **REQ-203: MongoDB Integráció**
|
|
**Kategória**: Adatbázis
|
|
**Prioritás**: Magas
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: MongoDB adatbázis integráció site config-hoz.
|
|
|
|
**Részletek**:
|
|
- MongoDB connection
|
|
- Site config tárolás
|
|
- Mongoose ODM
|
|
- Connection pooling
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] MongoDB kapcsolat működik
|
|
- [x] Site config betöltés
|
|
- [x] Mongoose modell működik
|
|
- [x] Connection error handling
|
|
|
|
---
|
|
|
|
## 🎯 **REQ-300-399: Biztonsági Követelmények**
|
|
|
|
### **REQ-301: HTTPS Biztonság**
|
|
**Kategória**: Kommunikáció biztonság
|
|
**Prioritás**: Kritikus
|
|
**Státusz**: 🔄 Folyamatban
|
|
|
|
**Leírás**: HTTPS titkosítás minden kommunikációhoz.
|
|
|
|
**Részletek**:
|
|
- SSL/TLS tanúsítvány
|
|
- HTTP → HTTPS redirect
|
|
- HSTS header
|
|
- Secure cookie flags
|
|
|
|
**Acceptance Criteria**:
|
|
- [ ] HTTPS aktív production-ban
|
|
- [ ] HTTP redirect működik
|
|
- [ ] HSTS header beállítva
|
|
- [ ] Secure cookies konfigurálva
|
|
|
|
---
|
|
|
|
### **REQ-302: Input Validáció és Sanitizáció**
|
|
**Kategória**: Adatbiztonság
|
|
**Prioritás**: Magas
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: Minden felhasználói input validálása és tisztítása.
|
|
|
|
**Részletek**:
|
|
- Frontend validáció
|
|
- Backend sanitizáció
|
|
- XSS védelem
|
|
- CSRF token védelem
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] Frontend validáció működik
|
|
- [x] Backend sanitizáció aktív
|
|
- [x] XSS védelem implementálva
|
|
- [x] CSRF védelem működik
|
|
|
|
---
|
|
|
|
### **REQ-303: Rate Limiting**
|
|
**Kategória**: API biztonság
|
|
**Prioritás**: Magas
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: API endpoint-ok védelme túlzott használat ellen.
|
|
|
|
**Részletek**:
|
|
- 5 kérés/perc limit
|
|
- IP alapú tracking
|
|
- Graceful error handling
|
|
- Retry-after header
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] Rate limiting aktív
|
|
- [x] 5 kérés/perc limit működik
|
|
- [x] IP tracking működik
|
|
- [x] Error messages megfelelőek
|
|
|
|
---
|
|
|
|
## 🎯 **REQ-400-499: Teljesítmény Követelmények**
|
|
|
|
### **REQ-401: Lighthouse Score ≥ 90**
|
|
**Kategória**: Web teljesítmény
|
|
**Prioritás**: Magas
|
|
**Státusz**: 🔄 Folyamatban
|
|
|
|
**Leírás**: Lighthouse score legalább 90 minden kategóriában.
|
|
|
|
**Részletek**:
|
|
- Performance ≥ 90
|
|
- Accessibility ≥ 90
|
|
- Best Practices ≥ 90
|
|
- SEO ≥ 90
|
|
|
|
**Acceptance Criteria**:
|
|
- [ ] Performance score ≥ 90
|
|
- [ ] Accessibility score ≥ 90
|
|
- [ ] Best Practices score ≥ 90
|
|
- [ ] SEO score ≥ 90
|
|
|
|
---
|
|
|
|
### **REQ-402: Kép Optimalizálás**
|
|
**Kategória**: Asset optimalizálás
|
|
**Prioritás**: Közepes
|
|
**Státusz**: 📋 Tervezett
|
|
|
|
**Leírás**: Képek optimalizálása WebP/AVIF formátumra.
|
|
|
|
**Részletek**:
|
|
- WebP/AVIF konverzió
|
|
- Lazy loading
|
|
- Responsive images
|
|
- Next.js Image komponens
|
|
|
|
**Acceptance Criteria**:
|
|
- [ ] WebP/AVIF képek
|
|
- [ ] Lazy loading működik
|
|
- [ ] Responsive images
|
|
- [ ] Next.js Image optimalizáció
|
|
|
|
---
|
|
|
|
## 🎯 **REQ-500-599: Felhasználói Élmény Követelmények**
|
|
|
|
### **REQ-501: Intuitív Navigáció**
|
|
**Kategória**: UX design
|
|
**Prioritás**: Magas
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: Könnyen érthető és használható navigáció.
|
|
|
|
**Részletek**:
|
|
- Logikus menü struktúra
|
|
- Egyértelmű CTA gombok
|
|
- Breadcrumb navigáció
|
|
- Search funkció (opcionális)
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] Menü struktúra logikus
|
|
- [x] CTA gombok egyértelműek
|
|
- [x] Navigáció konzisztens
|
|
- [x] Felhasználóbarát interface
|
|
|
|
---
|
|
|
|
### **REQ-502: Gyors Betöltés**
|
|
**Kategória**: Performance UX
|
|
**Prioritás**: Magas
|
|
**Státusz**: 🔄 Folyamatban
|
|
|
|
**Leírás**: Gyors oldal betöltés minden eszközön.
|
|
|
|
**Részletek**:
|
|
- < 3 másodperc betöltési idő
|
|
- Critical CSS inlining
|
|
- JavaScript optimalizáció
|
|
- CDN használat
|
|
|
|
**Acceptance Criteria**:
|
|
- [ ] Betöltési idő < 3s
|
|
- [ ] Critical CSS optimalizálva
|
|
- [ ] JavaScript minified
|
|
- [ ] CDN konfigurálva
|
|
|
|
---
|
|
|
|
## 🎯 **REQ-600-699: SEO és Marketing Követelmények**
|
|
|
|
### **REQ-601: Analytics Integráció**
|
|
**Kategória**: Web analytics
|
|
**Prioritás**: Közepes
|
|
**Státusz**: 📋 Tervezett
|
|
|
|
**Leírás**: Web analytics beállítása (Plausible vagy GA4).
|
|
|
|
**Részletek**:
|
|
- Plausible (cookieless) vagy GA4
|
|
- Cookie consent kezelés
|
|
- Event tracking
|
|
- Conversion tracking
|
|
|
|
**Acceptance Criteria**:
|
|
- [ ] Analytics konfigurálva
|
|
- [ ] Cookie consent működik
|
|
- [ ] Event tracking aktív
|
|
- [ ] Conversion tracking működik
|
|
|
|
---
|
|
|
|
### **REQ-602: Social Media Meta Tagek**
|
|
**Kategória**: Social sharing
|
|
**Prioritás**: Közepes
|
|
**Státusz**: 📋 Tervezett
|
|
|
|
**Leírás**: Open Graph és Twitter Card meta tagek.
|
|
|
|
**Részletek**:
|
|
- Open Graph tagek
|
|
- Twitter Card meta
|
|
- Social sharing képek
|
|
- Dynamic meta generation
|
|
|
|
**Acceptance Criteria**:
|
|
- [ ] OG tagek minden oldalon
|
|
- [ ] Twitter Card meta
|
|
- [ ] Social képek optimalizálva
|
|
- [ ] Dynamic meta működik
|
|
|
|
---
|
|
|
|
## 🎯 **REQ-700-799: Monitoring és Logging Követelmények**
|
|
|
|
### **REQ-701: Health Check Endpoint**
|
|
**Kategória**: System monitoring
|
|
**Prioritás**: Magas
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: `/api/health` endpoint rendszer állapot ellenőrzéshez.
|
|
|
|
**Részletek**:
|
|
- HTTP GET `/api/health`
|
|
- JSON response: `{status: "ok"}`
|
|
- Uptime tracking
|
|
- Database connectivity check
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] Health endpoint működik
|
|
- [x] JSON response megfelelő
|
|
- [x] Uptime tracking aktív
|
|
- [x] Database check működik
|
|
|
|
---
|
|
|
|
### **REQ-702: Logging Rendszer**
|
|
**Kategória**: Application logging
|
|
**Prioritás**: Magas
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: Winston logger Loki integrációval.
|
|
|
|
**Részletek**:
|
|
- Winston logger konfiguráció
|
|
- Loki integráció
|
|
- Log levels (error, warn, info, debug)
|
|
- Structured logging
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] Winston logger működik
|
|
- [x] Loki integráció aktív
|
|
- [x] Log levels konfigurálva
|
|
- [x] Structured logging működik
|
|
|
|
---
|
|
|
|
## 🎯 **REQ-800-899: Deployment és DevOps Követelmények**
|
|
|
|
### **REQ-801: Docker Containerizáció**
|
|
**Kategória**: Containerization
|
|
**Prioritás**: Magas
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: Docker containerizáció fejlesztési és production környezethez.
|
|
|
|
**Részletek**:
|
|
- Multi-stage Dockerfile
|
|
- Docker Compose fejlesztéshez
|
|
- Production optimized image
|
|
- Health check beépítve
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] Dockerfile működik
|
|
- [x] Docker Compose konfigurálva
|
|
- [x] Production image optimalizálva
|
|
- [x] Health check aktív
|
|
|
|
---
|
|
|
|
### **REQ-802: CI/CD Pipeline**
|
|
**Kategória**: Continuous Integration
|
|
**Prioritás**: Magas
|
|
**Státusz**: ✅ Implementálva
|
|
|
|
**Leírás**: GitHub Actions CI/CD pipeline.
|
|
|
|
**Részletek**:
|
|
- Automated testing
|
|
- Docker image build
|
|
- Registry push
|
|
- Dokploy deployment
|
|
|
|
**Acceptance Criteria**:
|
|
- [x] GitHub Actions működik
|
|
- [x] Automated testing aktív
|
|
- [x] Docker build működik
|
|
- [x] Deployment pipeline működik
|
|
|
|
---
|
|
|
|
## 📊 **Követelmény Összefoglaló**
|
|
|
|
### **Státusz Statisztikák:**
|
|
- ✅ **Implementálva**: 15 követelmény
|
|
- 🔄 **Folyamatban**: 4 követelmény
|
|
- 📋 **Tervezett**: 3 követelmény
|
|
- **Összesen**: 22 követelmény
|
|
|
|
### **Prioritás Eloszlás:**
|
|
- 🔴 **Kritikus**: 3 követelmény
|
|
- 🟡 **Magas**: 12 követelmény
|
|
- 🟢 **Közepes**: 7 követelmény
|
|
|
|
### **Kategória Eloszlás:**
|
|
- **Funkcionális**: 6 követelmény
|
|
- **Nem-funkcionális**: 3 követelmény
|
|
- **Technikai**: 3 követelmény
|
|
- **Biztonsági**: 3 követelmény
|
|
- **Teljesítmény**: 2 követelmény
|
|
- **UX**: 2 követelmény
|
|
- **SEO/Marketing**: 2 követelmény
|
|
- **Monitoring**: 2 követelmény
|
|
- **DevOps**: 2 követelmény
|
|
|
|
---
|
|
|
|
**Utolsó frissítés**: 2025-09-05
|
|
**Következő lépés**: Linear issues létrehozása REQ prefixekkel
|