Files

Radosław Gierwiało f6882c7025 docs: update TODO.md with completed tasks and next steps

- Mark completed tasks from Phase 0 (frontend mockup)
- Add detailed next steps with time estimates
- Update project progress (~25% complete)
- Add suggested roadmap for Phase 1 (backend foundation)
- Include additional learning resources

2025-11-12 17:54:49 +01:00

15 KiB

Raw Blame History

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

🎯 AKTUALNY STATUS PROJEKTU

✅ Ukończone (Faza 0: Frontend Mockup)

Frontend mockup z pełną funkcjonalnością UI
Docker Compose setup (nginx + frontend)
Dokumentacja projektu
Gotowe do prezentacji i testowania UX

🔄 W trakcie

Przygotowanie do backend development

⏳ Następne kroki

Priorytet: Backend setup → Database → API → WebSocket

📌 SUGEROWANE KOLEJNE KROKI

🚀 Krok 1: Backend Foundation (zalecane TERAZ)

Cel: Uruchomić backend Node.js z podstawowym API

Co zrobić:

Dodaj kontener backend do docker-compose.yml
Zainicjalizuj projekt Node.js + Express
Skonfiguruj strukturę folderów backend
Dodaj podstawowy endpoint healthcheck (GET /api/health)
Zaktualizuj nginx config aby proxy'ował /api/* do backendu

Czas realizacji: 1-2 godziny Benefit: Podstawa dla dalszego rozwoju API

🗄️ Krok 2: PostgreSQL Setup (po Kroku 1)

Cel: Uruchomić bazę danych i stworzyć schemat

Co zrobić:

Dodaj kontener db (PostgreSQL 15) do docker-compose.yml
Skonfiguruj volumes dla persystencji danych
Wybierz tool do migracji (Prisma / node-pg-migrate / Knex)
Stwórz schemat bazy (6 tabel: users, events, chat_rooms, messages, matches, ratings)
Dodaj seed data dla eventów testowych

Czas realizacji: 2-3 godziny Benefit: Prawdziwe dane zamiast mocków

🔐 Krok 3: Authentication API (po Kroku 2)

Cel: Prawdziwa autentykacja JWT

Co zrobić:

Implementacja bcrypt do hashowania haseł
JWT token generation i verification
Endpointy: POST /api/auth/register, POST /api/auth/login
Middleware do weryfikacji tokena
Podłączenie frontendu do prawdziwego API

Czas realizacji: 3-4 godziny Benefit: Koniec z mock auth, prawdziwe konta użytkowników

💬 Krok 4: WebSocket Chat (po Kroku 3)

Cel: Real-time czat eventowy

Co zrobić:

Setup Socket.IO na backendzie
Implementacja room management (event rooms)
Broadcast messages
Lista aktywnych użytkowników
Podłączenie frontendu do Socket.IO

Czas realizacji: 4-5 godzin Benefit: Prawdziwy czat zamiast mocka

🐳 1. Setup projektu i infrastruktura

Docker Compose

✅ Utworzenie docker-compose.yml z serwisem nginx
✅ Konfiguracja kontenera frontend (React/Vite)
⏳ Konfiguracja kontenera backend (Node.js)
⏳ Konfiguracja kontenera PostgreSQL 15
⏳ Konfiguracja volumes dla persystencji danych
✅ Konfiguracja sieci między kontenerami

Struktura projektu

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

🗄️ 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 (mockup)

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
✅ Konfiguracja Tailwind CSS
⏳ 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
✅ Wybór eventu (/events) - Lista eventów, wyszukiwanie, przycisk "Join chat"
✅ Czat eventowy (/events/:id/chat) - Lista wiadomości, aktywni użytkownicy, matchmaking
✅ Czat 1:1 (/matches/:id/chat) - Profil partnera, czat, mockup WebRTC transfer
✅ Ocena partnera (/matches/:id/rate) - Gwiazdki 1-5, komentarz, checkbox
✅ Historia współprac (/history) - Lista matchów, oceny, statystyki

Komponenty reużywalne

✅ <Navbar> - nawigacja
✅ <Layout> - wrapper dla stron
⏳ <MessageBubble> - wiadomość w czacie (do wydzielenia z page)
⏳ <UserCard> - karta użytkownika (do wydzielenia)
⏳ <EventCard> - karta eventu (do wydzielenia)
⏳ <RatingStars> - gwiazdki oceny (do wydzielenia)
⏳ <VideoUploader> - komponent do wyboru i wysyłania filmu
⏳ <ProgressBar> - pasek postępu transferu (do wydzielenia)
⏳ <WebRTCStatus> - status połączenia WebRTC (do wydzielenia)

Stylowanie (Tailwind)

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

State Management

✅ Auth state (Context API - current user, mock login/logout)
⏳ Zamiana na prawdziwe API (po backend setup)
⏳ Chat state (messages, active users) - połączenie z Socket.IO
⏳ WebRTC state (connection status, transfer progress) - prawdziwy WebRTC

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
✅ QUICKSTART.md - szybki start (2 minuty)
✅ CONTEXT.md - architektura i założenia projektu
✅ TODO.md - roadmap 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 (zaktualizowany)

✅ Faza 0: Frontend Mockup (UKOŃCZONA)

✅ Docker Compose (nginx + frontend)
✅ React + Vite + Tailwind setup
✅ Wszystkie widoki z mockupami
✅ Mock data i routing
✅ Dokumentacja

Status: Gotowe do prezentacji i testowania UX

🔄 Faza 1: MVP Backend Foundation (1-2 tygodnie) - AKTUALNY CEL

Priorytet: WYSOKI - Następna faza do realizacji

✨ Backend setup (1-2 godziny)
- Kontener backend w docker-compose
- Node.js + Express + podstawowa struktura
- Healthcheck endpoint
🗄️ PostgreSQL setup (2-3 godziny)
- Kontener PostgreSQL
- Schema bazy (6 tabel)
- Narzędzie do migracji (Prisma/Knex)
- Seed data
🔐 Authentication API (3-4 godziny)
- bcrypt + JWT
- Register/Login endpoints
- Auth middleware
- Podłączenie frontendu
💬 WebSocket Chat (4-5 godzin)
- Socket.IO setup
- Event rooms
- Real-time messaging
- Active users list

Łączny czas: ~11-14 godzin (1-2 tygodnie przy spokojnym tempie)

Faza 2: Core Features (2-3 tygodnie)

Matches API (tworzenie par)
Private chat 1:1 (Socket.IO rooms)
WebRTC signaling server
Ratings API

Faza 3: Główna funkcjonalność WebRTC (3-4 tygodnie)

WebRTC P2P connection
File transfer via DataChannel (chunking, progress)
Error handling i reconnection
Optymalizacje

Faza 4: Finalizacja MVP (2-3 tygodnie)

Bezpieczeństwo (rate limiting, validation, CORS)
Testy (unit, integration, E2E)
PWA features (manifest, service worker)
Deployment

Faza 5: Opcjonalne rozszerzenia (ongoing)

Features z sekcji 11

📊 Postęp projektu

Ukończone: ~25% (frontend mockup + dokumentacja) W trakcie: 0% (przygotowanie do backend) Do zrobienia: ~75% (backend, WebRTC, deployment)

📝 Notatki

✅ Frontend mockup gotowy - można prezentować UX
🎯 Następny krok: Backend setup (Node.js + Express + PostgreSQL)
💡 Wszystkie widoki działają z mock data - łatwo podłączyć prawdziwe API
🔥 Główna funkcjonalność (WebRTC P2P) jest mockupem - wymaga implementacji
📌 Regularnie aktualizuj status zadań (⏳ → 🔄 → ✅)
🚀 WebRTC file transfer to najważniejsza i najtrudniejsza część projektu

🎓 Dodatkowe zasoby

15 KiB Raw Blame History Unescape Escape

TODO - spotlight.cam

📋 Status realizacji

🎯 AKTUALNY STATUS PROJEKTU

✅ Ukończone (Faza 0: Frontend Mockup)

🔄 W trakcie

⏳ Następne kroki

📌 SUGEROWANE KOLEJNE KROKI

🚀 Krok 1: Backend Foundation (zalecane TERAZ)

🗄️ Krok 2: PostgreSQL Setup (po Kroku 1)

🔐 Krok 3: Authentication API (po Kroku 2)

💬 Krok 4: WebSocket Chat (po Kroku 3)

🐳 1. Setup projektu i infrastruktura

Docker Compose

Struktura projektu

🗄️ 2. Baza danych PostgreSQL

Schema i migracje

🔧 3. Backend - REST API

Autentykacja i autoryzacja

Users API

Events API

Matches API

Ratings API

Reports API

💬 4. Backend - WebSocket (Socket.IO)

Czat eventowy (publiczny)

Czat 1:1 (prywatny)

WebRTC Signaling

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

Setup WebRTC

Nawiązanie połączenia

Transfer plików

Fallback - wymiana linków

Optymalizacje

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

Setup PWA

Routing

Widoki/Komponenty

Komponenty reużywalne

Stylowanie (Tailwind)

State Management

Integracja Socket.IO (client)

🔐 7. Bezpieczeństwo

Backend

Frontend

WebRTC

🧪 8. Testowanie

Backend

Frontend

WebRTC

📚 9. Dokumentacja

🚀 10. Deployment i DevOps

➕ 11. Opcjonalne rozszerzenia (po MVP)

🎯 Priorytet realizacji (zaktualizowany)

✅ Faza 0: Frontend Mockup (UKOŃCZONA)

🔄 Faza 1: MVP Backend Foundation (1-2 tygodnie) - AKTUALNY CEL

Faza 2: Core Features (2-3 tygodnie)

Faza 3: Główna funkcjonalność WebRTC (3-4 tygodnie)

Faza 4: Finalizacja MVP (2-3 tygodnie)

Faza 5: Opcjonalne rozszerzenia (ongoing)

📊 Postęp projektu

📝 Notatki

🎓 Dodatkowe zasoby

Backend (Node.js + Express)

WebRTC

Database

15 KiB

Raw Blame History