diff --git a/docs/TODO.md b/docs/TODO.md index ec53f2c..0f6d313 100644 --- 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 -- [ ] ⏳ `` - nawigacja -- [ ] ⏳ `` - wiadomość w czacie -- [ ] ⏳ `` - karta użytkownika -- [ ] ⏳ `` - karta eventu -- [ ] ⏳ `` - gwiazdki oceny +- [x] ✅ `` - nawigacja +- [x] ✅ `` - wrapper dla stron +- [ ] ⏳ `` - wiadomość w czacie (do wydzielenia z page) +- [ ] ⏳ `` - karta użytkownika (do wydzielenia) +- [ ] ⏳ `` - karta eventu (do wydzielenia) +- [ ] ⏳ `` - gwiazdki oceny (do wydzielenia) - [ ] ⏳ `` - komponent do wyboru i wysyłania filmu -- [ ] ⏳ `` - pasek postępu transferu -- [ ] ⏳ `` - status połączenia WebRTC +- [ ] ⏳ `` - pasek postępu transferu (do wydzielenia) +- [ ] ⏳ `` - 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