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
parent 80ff4a70bf
commit f6882c7025
1 changed files with 206 additions and 86 deletions
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -9,23 +9,102 @@ Lista zadań do realizacji projektu spotlight.cam - aplikacji do matchmaking i w

 ---

+## 🎯 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ć:**
+1. Dodaj kontener `backend` do docker-compose.yml
+2. Zainicjalizuj projekt Node.js + Express
+3. Skonfiguruj strukturę folderów backend
+4. Dodaj podstawowy endpoint healthcheck (`GET /api/health`)
+5. 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ć:**
+1. Dodaj kontener `db` (PostgreSQL 15) do docker-compose.yml
+2. Skonfiguruj volumes dla persystencji danych
+3. Wybierz tool do migracji (Prisma / node-pg-migrate / Knex)
+4. Stwórz schemat bazy (6 tabel: users, events, chat_rooms, messages, matches, ratings)
+5. 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ć:**
+1. Implementacja bcrypt do hashowania haseł
+2. JWT token generation i verification
+3. Endpointy: POST /api/auth/register, POST /api/auth/login
+4. Middleware do weryfikacji tokena
+5. 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ć:**
+1. Setup Socket.IO na backendzie
+2. Implementacja room management (event rooms)
+3. Broadcast messages
+4. Lista aktywnych użytkowników
+5. 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 trzema serwisami (frontend, backend, db)
- [ ] ⏳ Konfiguracja kontenera PostgreSQL 15
+- [x] ✅ Utworzenie `docker-compose.yml` z serwisem nginx
+- [x] ✅ Konfiguracja kontenera frontend (React/Vite)
 - [ ] ⏳ Konfiguracja kontenera backend (Node.js)
- [ ] ⏳ Konfiguracja kontenera frontend (React/Vite)
+- [ ] ⏳ Konfiguracja kontenera PostgreSQL 15
 - [ ] ⏳ Konfiguracja volumes dla persystencji danych
- [ ] ⏳ Konfiguracja sieci między kontenerami
+- [x] ✅ Konfiguracja sieci między kontenerami

 ### Struktura projektu
+- [x] ✅ Inicjalizacja projektu frontend (React + Vite + Tailwind)
+- [x] ✅ Utworzenie `.gitignore`
+- [x] ✅ Konfiguracja ESLint (frontend)
 - [ ] ⏳ Inicjalizacja projektu backend (Node.js + Express)
- [ ] ⏳ Inicjalizacja projektu frontend (React + Vite + Tailwind)
- [ ] ⏳ Konfiguracja ESLint i Prettier
+- [ ] ⏳ Konfiguracja ESLint i Prettier (backend)
 - [ ] ⏳ Konfiguracja TypeScript (opcjonalnie)
 - [ ] ⏳ Utworzenie `.env` i `.env.example`
- [ ] ⏳ Utworzenie `.gitignore`

 ---

@@ -136,9 +215,9 @@ Lista zadań do realizacji projektu spotlight.cam - aplikacji do matchmaking i w
 - [ ] ⏳ 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
+- [x] ✅ UI do wklejenia linku do filmu (Google Drive, Dropbox, itp.)
+- [x] ✅ Walidacja URL
+- [x] ✅ Wysłanie linku przez czat (mockup)

 ### Optymalizacje
 - [ ] ⏳ Dostosowanie rozmiaru chunka do bandwidth
@@ -150,6 +229,8 @@ Lista zadań do realizacji projektu spotlight.cam - aplikacji do matchmaking i w
 ## 🎨 6. Frontend - PWA (React + Vite + Tailwind)

 ### Setup PWA
+- [x] ✅ Konfiguracja Vite
+- [x] ✅ Konfiguracja Tailwind CSS
 - [ ] ⏳ Konfiguracja Vite PWA plugin
 - [ ] ⏳ Utworzenie `manifest.json`
 - [ ] ⏳ Utworzenie service worker
@@ -157,67 +238,39 @@ Lista zadań do realizacji projektu spotlight.cam - aplikacji do matchmaking i w
 - [ ] ⏳ Splash screen

 ### Routing
- [ ] ⏳ Setup React Router
- [ ] ⏳ Ochrona tras (require authentication)
+- [x] ✅ Setup React Router
+- [x] ✅ 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
+- [x] ✅ **Logowanie** (`/login`) - Formularz email + hasło, link do rejestracji
+- [x] ✅ **Rejestracja** (`/register`) - Formularz username, email, hasło, walidacja
+- [x] ✅ **Wybór eventu** (`/events`) - Lista eventów, wyszukiwanie, przycisk "Join chat"
+- [x] ✅ **Czat eventowy** (`/events/:id/chat`) - Lista wiadomości, aktywni użytkownicy, matchmaking
+- [x] ✅ **Czat 1:1** (`/matches/:id/chat`) - Profil partnera, czat, **mockup WebRTC transfer**
+- [x] ✅ **Ocena partnera** (`/matches/:id/rate`) - Gwiazdki 1-5, komentarz, checkbox
+- [x] ✅ **Historia współprac** (`/history`) - Lista matchów, oceny, statystyki

 ### Komponenty reużywalne
- [ ] ⏳ `<Navbar>` - nawigacja
- [ ] ⏳ `<MessageBubble>` - wiadomość w czacie
- [ ] ⏳ `<UserCard>` - karta użytkownika
- [ ] ⏳ `<EventCard>` - karta eventu
- [ ] ⏳ `<RatingStars>` - gwiazdki oceny
+- [x] ✅ `<Navbar>` - nawigacja
+- [x] ✅ `<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
- [ ] ⏳ `<WebRTCStatus>` - status połączenia WebRTC
+- [ ] ⏳ `<ProgressBar>` - pasek postępu transferu (do wydzielenia)
+- [ ] ⏳ `<WebRTCStatus>` - status połączenia WebRTC (do wydzielenia)

 ### Stylowanie (Tailwind)
- [ ] ⏳ Konfiguracja motywu kolorystycznego
- [ ] ⏳ Responsive design (mobile-first)
+- [x] ✅ Konfiguracja motywu kolorystycznego
+- [x] ✅ 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)
+- [x] ✅ 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
@@ -272,7 +325,10 @@ Lista zadań do realizacji projektu spotlight.cam - aplikacji do matchmaking i w

 ## 📚 9. Dokumentacja

- [ ] ⏳ README.md - instrukcja uruchomienia projektu
+- [x] ✅ README.md - instrukcja uruchomienia projektu
+- [x] ✅ QUICKSTART.md - szybki start (2 minuty)
+- [x] ✅ CONTEXT.md - architektura i założenia projektu
+- [x] ✅ TODO.md - roadmap projektu
 - [ ] ⏳ API documentation (Swagger/OpenAPI)
 - [ ] ⏳ Architektura systemu (diagram)
 - [ ] ⏳ WebRTC flow diagram
@@ -309,44 +365,108 @@ Lista zadań do realizacji projektu spotlight.cam - aplikacji do matchmaking i w

 ---

-## 🎯 Priorytet realizacji (sugerowany)
+## 🎯 Priorytet realizacji (zaktualizowany)

-### 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 0: Frontend Mockup (UKOŃCZONA)
+- ✅ Docker Compose (nginx + frontend)
+- ✅ React + Vite + Tailwind setup
+- ✅ Wszystkie widoki z mockupami
+- ✅ Mock data i routing
+- ✅ Dokumentacja

-### Faza 2: Core Features (3-4 tygodnie)
-1. Matching system (połączenie w pary)
-2. Czat 1:1
+**Status:** Gotowe do prezentacji i testowania UX
+
+---
+
+### 🔄 Faza 1: MVP Backend Foundation (1-2 tygodnie) - **AKTUALNY CEL**
+**Priorytet: WYSOKI** - Następna faza do realizacji
+
+1. ✨ **Backend setup** (1-2 godziny)
+   - Kontener backend w docker-compose
+   - Node.js + Express + podstawowa struktura
+   - Healthcheck endpoint
+
+2. 🗄️ **PostgreSQL setup** (2-3 godziny)
+   - Kontener PostgreSQL
+   - Schema bazy (6 tabel)
+   - Narzędzie do migracji (Prisma/Knex)
+   - Seed data
+
+3. 🔐 **Authentication API** (3-4 godziny)
+   - bcrypt + JWT
+   - Register/Login endpoints
+   - Auth middleware
+   - Podłączenie frontendu
+
+4. 💬 **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)
+1. Matches API (tworzenie par)
+2. Private chat 1:1 (Socket.IO rooms)
 3. WebRTC signaling server
-4. WebRTC P2P connection (podstawy)
+4. Ratings API

-### Faza 3: Główna funkcjonalność (4-5 tygodni)
-1. **WebRTC file transfer** (wybór pliku, chunking, transfer)
-2. **Progress monitoring**
+---
+
+### Faza 3: Główna funkcjonalność WebRTC (3-4 tygodnie)
+1. **WebRTC P2P connection**
+2. **File transfer via DataChannel** (chunking, progress)
 3. Error handling i reconnection
-4. Fallback (wymiana linków)
+4. Optymalizacje
+
+---

 ### Faza 4: Finalizacja MVP (2-3 tygodnie)
-1. System ocen
-2. Historia współprac
-3. Bezpieczeństwo (hardening)
-4. Testy
-5. Deployment
+1. Bezpieczeństwo (rate limiting, validation, CORS)
+2. Testy (unit, integration, E2E)
+3. PWA features (manifest, service worker)
+4. Deployment
+
+---

 ### Faza 5: Opcjonalne rozszerzenia (ongoing)
 - Features z sekcji 11

 ---

-**Łączny czas realizacji MVP: ~11-15 tygodni**
+## 📊 Postęp projektu
+
+**Ukończone:** ~25% (frontend mockup + dokumentacja)
+**W trakcie:** 0% (przygotowanie do backend)
+**Do zrobienia:** ~75% (backend, WebRTC, deployment)

 ---

 ## 📝 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
+- ✅ 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
+
+### Backend (Node.js + Express)
+- Express best practices: https://expressjs.com/en/advanced/best-practice-performance.html
+- JWT authentication: https://jwt.io/introduction
+- Socket.IO docs: https://socket.io/docs/v4/
+
+### WebRTC
+- WebRTC for beginners: https://webrtc.org/getting-started/overview
+- RTCDataChannel guide: https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel
+- File transfer via WebRTC: https://webrtc.github.io/samples/src/content/datachannel/filetransfer/
+
+### Database
+- Prisma docs: https://www.prisma.io/docs
+- PostgreSQL best practices: https://wiki.postgresql.org/wiki/Don't_Do_This