spotlightcam/docs/TODO.md

TODO - spotlight.cam

Lista zadań do realizacji projektu spotlight.cam - aplikacji do matchmaking i wymiany nagrań wideo na eventach tanecznych.

📋 Status realizacji

• ⏳ Do zrobienia
• 🔄 W trakcie
• ✅ Zrobione

---

🐳 1. Setup projektu i infrastruktura

Docker Compose

• ⏳ Utworzenie docker-compose.yml z trzema serwisami (frontend, backend, db)
• ⏳ Konfiguracja kontenera PostgreSQL 15
• ⏳ Konfiguracja kontenera backend (Node.js)
• ⏳ Konfiguracja kontenera frontend (React/Vite)
• ⏳ Konfiguracja volumes dla persystencji danych
• ⏳ Konfiguracja sieci między kontenerami

Struktura projektu

• ⏳ Inicjalizacja projektu backend (Node.js + Express)
• ⏳ Inicjalizacja projektu frontend (React + Vite + Tailwind)
• ⏳ Konfiguracja ESLint i Prettier
• ⏳ Konfiguracja TypeScript (opcjonalnie)
• ⏳ Utworzenie .env i .env.example
• ⏳ Utworzenie .gitignore

---

🗄️ 2. Baza danych PostgreSQL

Schema i migracje

• ⏳ Setup narzędzia do migracji (np. node-pg-migrate, Knex, Prisma)
• ⏳ Utworzenie tabeli users
  • id, username, email, password_hash, created_at, updated_at
• ⏳ Utworzenie tabeli events
  • id, name, location, start_date, end_date, worldsdc_id
• ⏳ Utworzenie tabeli chat_rooms
  • id, event_id, type (event/private), created_at
• ⏳ Utworzenie tabeli messages
  • id, room_id, user_id, content, type (text/link), created_at
• ⏳ Utworzenie tabeli matches
  • id, user1_id, user2_id, event_id, status, room_id, created_at
• ⏳ Utworzenie tabeli ratings
  • id, match_id, rater_id, rated_id, score (1-5), comment, would_collaborate_again
• ⏳ Utworzenie indeksów dla optymalizacji zapytań
• ⏳ Seed danych testowych (events z worldsdc.com)

---

🔧 3. Backend - REST API

Autentykacja i autoryzacja

• ⏳ Endpoint: POST /api/auth/register - rejestracja użytkownika
• ⏳ Endpoint: POST /api/auth/login - logowanie użytkownika
• ⏳ Endpoint: POST /api/auth/logout - wylogowanie
• ⏳ Implementacja bcrypt do hashowania haseł
• ⏳ Implementacja JWT/session dla autoryzacji
• ⏳ Middleware do weryfikacji tokena

Users API

• ⏳ Endpoint: GET /api/users/me - pobranie profilu użytkownika
• ⏳ Endpoint: PATCH /api/users/me - aktualizacja profilu
• ⏳ Endpoint: GET /api/users/:id - pobranie profilu innego użytkownika

Events API

• ⏳ Endpoint: GET /api/events - lista wszystkich eventów
• ⏳ Endpoint: GET /api/events/:id - szczegóły eventu
• ⏳ Endpoint: POST /api/events/:id/join - dołączenie do eventu
• ⏳ Integracja z worldsdc.com API (jeśli dostępne)

Matches API

• ⏳ Endpoint: GET /api/matches - historia matchów użytkownika
• ⏳ Endpoint: POST /api/matches - utworzenie matcha
• ⏳ Endpoint: PATCH /api/matches/:id - aktualizacja statusu matcha

Ratings API

• ⏳ Endpoint: POST /api/ratings - dodanie oceny partnera
• ⏳ Endpoint: GET /api/ratings/user/:id - oceny danego użytkownika
• ⏳ Endpoint: GET /api/ratings/stats/:id - statystyki użytkownika

Reports API

• ⏳ Endpoint: POST /api/reports - zgłoszenie użytkownika

---

💬 4. Backend - WebSocket (Socket.IO)

Czat eventowy (publiczny)

• ⏳ Setup Socket.IO na backendzie
• ⏳ Obsługa połączenia/rozłączenia użytkownika
• ⏳ Dołączenie użytkownika do pokoju eventowego
• ⏳ Wysyłanie wiadomości tekstowych do pokoju
• ⏳ Broadcast wiadomości do wszystkich w pokoju
• ⏳ Lista aktywnych użytkowników w pokoju

Czat 1:1 (prywatny)

• ⏳ Utworzenie prywatnego pokoju dla pary
• ⏳ Wysyłanie wiadomości prywatnych
• ⏳ Powiadomienia o nowych wiadomościach

WebRTC Signaling

• ⏳ Obsługa wymiany SDP offer/answer
• ⏳ Obsługa wymiany ICE candidates
• ⏳ Sygnalizacja statusu połączenia WebRTC
• ⏳ Error handling dla failed connections

---

🎥 5. WebRTC - Peer-to-Peer Transfer Filmów (GŁÓWNA FUNKCJONALNOŚĆ)

Setup WebRTC

• ⏳ Konfiguracja STUN servers (Google STUN)
• ⏳ Konfiguracja TURN server (opcjonalnie, dla trudnych NAT)
• ⏳ Utworzenie RTCPeerConnection
• ⏳ Utworzenie RTCDataChannel dla transferu plików

Nawiązanie połączenia

• ⏳ Inicjacja połączenia przez wysyłającego (createOffer)
• ⏳ Odpowiedź odbierającego (createAnswer)
• ⏳ Wymiana ICE candidates
• ⏳ Monitoring statusu połączenia (connecting, connected, failed)

Transfer plików

• ⏳ Wybór pliku z galerii (<input type="file" accept="video/*">)
• ⏳ Walidacja pliku (typ, rozmiar max)
• ⏳ Wysłanie metadanych (nazwa, rozmiar, MIME type)
• ⏳ Implementacja chunkingu (podział na fragmenty 16KB)
• ⏳ Wysyłanie chunków przez DataChannel
• ⏳ Odbieranie chunków i składanie w Blob
• ⏳ Progress monitoring (pasek postępu % dla wysyłającego i odbierającego)
• ⏳ Obsługa błędów transferu
• ⏳ Możliwość anulowania transferu
• ⏳ Zapis pliku do pamięci urządzenia (download)

Fallback - wymiana linków

• ⏳ UI do wklejenia linku do filmu (Google Drive, Dropbox, itp.)
• ⏳ Walidacja URL
• ⏳ Wysłanie linku przez czat

Optymalizacje

• ⏳ Dostosowanie rozmiaru chunka do bandwidth
• ⏳ Buffer management (kontrola przepełnienia bufora)
• ⏳ Reconnection logic przy utracie połączenia

---

🎨 6. Frontend - PWA (React + Vite + Tailwind)

Setup PWA

• ⏳ Konfiguracja Vite PWA plugin
• ⏳ Utworzenie manifest.json
• ⏳ Utworzenie service worker
• ⏳ Ikony aplikacji (różne rozmiary)
• ⏳ Splash screen

Routing

• ⏳ Setup React Router
• ⏳ Ochrona tras (require authentication)

Widoki/Komponenty

• ⏳ Logowanie (/login)
  • Formularz email + hasło
  • Link do rejestracji
• ⏳ Rejestracja (/register)
  • Formularz username, email, hasło
  • Walidacja formularza
• ⏳ Wybór eventu (/events)
  • Lista eventów z worldsdc.com
  • Wyszukiwanie/filtrowanie
  • Przycisk "Dołącz do eventu"
• ⏳ Czat eventowy (/events/:id/chat)
  • Lista wiadomości (scroll do najnowszej)
  • Pole wysyłania wiadomości
  • Lista aktywnych użytkowników
  • Przycisk "Połącz z użytkownikiem X"
• ⏳ Czat 1:1 (/matches/:id/chat)
  • Profil partnera (zdjęcie, nick, statystyki)
  • Historia czatu
  • Pole wysyłania wiadomości
  • Przycisk "Wyślij film" (główna funkcja)
  • Wyświetlanie statusu połączenia WebRTC
  • Progress bar transferu pliku
  • Podgląd przesłanego filmu
  • Opcja wysłania linku (fallback)
• ⏳ Ocena partnera (/matches/:id/rate)
  • Formularz oceny (1-5 gwiazdek)
  • Pole komentarza
  • Checkbox "Chcę współpracować ponownie"
• ⏳ Historia współprac (/history)
  • Lista poprzednich matchów
  • Filtrowanie po evencie
  • Oceny otrzymane/wystawione
• ⏳ Profil użytkownika (/profile)
  • Edycja danych
  • Statystyki (liczba matchów, średnia ocena)
  • Historia eventów

Komponenty reużywalne

• ⏳ <Navbar> - nawigacja
• ⏳ <MessageBubble> - wiadomość w czacie
• ⏳ <UserCard> - karta użytkownika
• ⏳ <EventCard> - karta eventu
• ⏳ <RatingStars> - gwiazdki oceny
• ⏳ <VideoUploader> - komponent do wyboru i wysyłania filmu
• ⏳ <ProgressBar> - pasek postępu transferu
• ⏳ <WebRTCStatus> - status połączenia WebRTC

Stylowanie (Tailwind)

• ⏳ Konfiguracja motywu kolorystycznego
• ⏳ Responsive design (mobile-first)
• ⏳ Dark mode (opcjonalnie)

State Management

• ⏳ Setup state management (Context API / Zustand / Redux)
• ⏳ Auth state (current user, token)
• ⏳ Chat state (messages, active users)
• ⏳ WebRTC state (connection status, transfer progress)

Integracja Socket.IO (client)

• ⏳ Setup socket.io-client
• ⏳ Połączenie z backendem
• ⏳ Obsługa eventów czatu
• ⏳ Obsługa eventów WebRTC signaling
• ⏳ Reconnection logic

---

🔐 7. Bezpieczeństwo

Backend

• ⏳ Rate limiting (np. express-rate-limit)
• ⏳ Helmet.js dla security headers
• ⏳ CORS configuration
• ⏳ Input sanitization (XSS prevention)
• ⏳ SQL injection prevention (prepared statements)
• ⏳ Walidacja wszystkich inputów (express-validator)

Frontend

• ⏳ XSS prevention (sanitize user input)
• ⏳ CSRF protection
• ⏳ Secure token storage (httpOnly cookies lub secure localStorage)

WebRTC

• ⏳ Potwierdzenie, że WebRTC używa DTLS/SRTP (natywne szyfrowanie)
• ⏳ Opcjonalne: dodatkowe szyfrowanie czatu (WebCrypto API)

---

🧪 8. Testowanie

Backend

• ⏳ Setup Jest + Supertest
• ⏳ Testy jednostkowe endpoints API
• ⏳ Testy integracyjne z bazą danych
• ⏳ Testy WebSocket (Socket.IO)

Frontend

• ⏳ Setup Vitest + React Testing Library
• ⏳ Testy jednostkowe komponentów
• ⏳ Testy integracyjne widoków
• ⏳ E2E testy (Playwright / Cypress)

WebRTC

• ⏳ Testy manualne transferu plików (różne rozmiary)
• ⏳ Testy na różnych urządzeniach (Android/iOS)
• ⏳ Testy w różnych warunkach sieciowych

---

📚 9. Dokumentacja

• ⏳ README.md - instrukcja uruchomienia projektu
• ⏳ API documentation (Swagger/OpenAPI)
• ⏳ Architektura systemu (diagram)
• ⏳ WebRTC flow diagram
• ⏳ User flow diagrams

---

🚀 10. Deployment i DevOps

• ⏳ Konfiguracja CI/CD (GitHub Actions)
• ⏳ Automated tests w CI
• ⏳ Docker image optimization (multi-stage builds)
• ⏳ Konfiguracja production environment variables
• ⏳ Setup HTTPS (Let's Encrypt)
• ⏳ Deployment backendu (VPS / Cloud)
• ⏳ Deployment frontendu (Vercel / Netlify / własny serwer)
• ⏳ Setup PostgreSQL backup strategy
• ⏳ Monitoring (logs, errors, performance)

---

➕ 11. Opcjonalne rozszerzenia (po MVP)

• ⏳ System oznaczeń zaufania (badges dla zweryfikowanych użytkowników)
• ⏳ Blokowanie użytkowników
• ⏳ Publiczne profile z opiniami
• ⏳ Powiadomienia push (Web Push API)
• ⏳ Kompresja wideo przed wysłaniem (opcjonalnie)
• ⏳ Podgląd thumbnail filmu przed wysłaniem
• ⏳ Multi-file transfer (wysyłanie wielu filmów naraz)
• ⏳ Integracja z worldsdc.com API (automatyczne pobieranie eventów)
• ⏳ Statystyki użycia aplikacji (analytics)
• ⏳ Admin panel

---

🎯 Priorytet realizacji (sugerowany)

Faza 1: MVP Foundation (2-3 tygodnie)

1. Setup projektu (Docker, struktura, baza danych)
2. Backend: podstawowe API (auth, users, events)
3. Frontend: podstawowe widoki (login, register, events list)
4. WebSocket: czat eventowy

Faza 2: Core Features (3-4 tygodnie)

1. Matching system (połączenie w pary)
2. Czat 1:1
3. WebRTC signaling server
4. WebRTC P2P connection (podstawy)

Faza 3: Główna funkcjonalność (4-5 tygodni)

1. WebRTC file transfer (wybór pliku, chunking, transfer)
2. Progress monitoring
3. Error handling i reconnection
4. Fallback (wymiana linków)

Faza 4: Finalizacja MVP (2-3 tygodnie)

1. System ocen
2. Historia współprac
3. Bezpieczeństwo (hardening)
4. Testy
5. Deployment

Faza 5: Opcjonalne rozszerzenia (ongoing)

• Features z sekcji 11

---

Łączny czas realizacji MVP: ~11-15 tygodni

---

📝 Notatki

• Regularnie aktualizuj status zadań (⏳ → 🔄 → ✅)
• Dodawaj nowe zadania w miarę postępu prac
• Priorytetuj zadania krytyczne dla MVP
• WebRTC file transfer to najważniejsza i najtrudniejsza część projektu