feat: initial project setup with frontend mockup
- Docker Compose setup with nginx reverse proxy and frontend service - React + Vite + Tailwind CSS configuration - Complete mockup of all application views: - Authentication (login/register) - Events list and selection - Event chat with matchmaking - 1:1 private chat with WebRTC P2P video transfer mockup - Partner rating system - Collaboration history - Mock data for users, events, messages, matches, and ratings - All UI text and messages in English - Project documentation (CONTEXT.md, TODO.md, README.md, QUICKSTART.md)
This commit is contained in:
Radosław Gierwiało
205
docs/CONTEXT.md
Normal file
205
docs/CONTEXT.md
Normal file
@@ -0,0 +1,205 @@
|
||||
|
||||
# spotlight.cam
|
||||
|
||||
Aplikacja umożliwiająca użytkownikom łączenie się w pary, czatowanie, **przesyłanie filmów bezpośrednio peer-to-peer przez WebRTC** i ocenianie współpracy – bez przechowywania danych na serwerze.
|
||||
|
||||
Stworzyć aplikację umożliwiającą peer-to-peer przesyłanie nagrań wideo między użytkownikami, nawet gdy znajdują się na różnych platformach (Android/iOS), z szyfrowaniem end-to-end, minimalnym udziałem backendu i opcjonalnym czatem tekstowym.
|
||||
|
||||
✅ Projekt zakłada pełne wsparcie dla Android/iOS (przez przeglądarkę), bez hostowania plików, z backendem i frontendem działającym w ramach Docker Compose.
|
||||
|
||||
🧱 ETAPY WDROŻENIA
|
||||
1. 🔍 Analiza technologii i wymagań
|
||||
|
||||
Zidentyfikuj ograniczenia platform: Android, iOS (szczególnie iOS WebView vs Safari).
|
||||
|
||||
Sprawdź kompatybilność WebRTC na poziomie przeglądarki (getUserMedia, RTCPeerConnection, RTCDataChannel).
|
||||
|
||||
Określ typy danych do przesyłania: pliki wideo (MP4), wiadomości tekstowe, metadane.
|
||||
|
||||
Zdecyduj, czy to aplikacja webowa (PWA) czy natywna (Flutter/React Native).
|
||||
|
||||
Oszacuj maksymalny rozmiar plików i czas transferu.
|
||||
|
||||
2. 🧠 Projekt architektury systemu
|
||||
🔗 Połączenie WebRTC
|
||||
|
||||
Użyj RTCPeerConnection + RTCDataChannel do przesyłania wideo.
|
||||
|
||||
Zaimplementuj STUN i opcjonalnie TURN (np. Google STUN, własny TURN przy złych NAT-ach).
|
||||
|
||||
☁️ Serwer sygnalizacyjny (Signaling)
|
||||
|
||||
Stwórz prosty backend (np. Node.js + Express + WebSocket) do wymiany SDP/ICE.
|
||||
|
||||
Alternatywnie: pozwól użytkownikom przekazywać dane ręcznie (przez QR/link/komunikator).
|
||||
|
||||
📤 Przesyłanie danych
|
||||
|
||||
Skorzystaj z RTCDataChannel do przesyłania plików binarnych (Blob/FileReader).
|
||||
|
||||
Podziel pliki na fragmenty (chunking), monitoruj postęp.
|
||||
|
||||
3. 🔐 Bezpieczeństwo i prywatność
|
||||
🔒 Szyfrowanie
|
||||
|
||||
Potwierdź, że WebRTC już szyfruje (DTLS/SRTP).
|
||||
|
||||
Zaszyfruj czat tekstowy: np. z użyciem libsodium, Signal Protocol lub WebCrypto.
|
||||
|
||||
Nie przechowuj żadnych plików na serwerze — tylko wymiana sygnalizacyjna.
|
||||
|
||||
🔄 Wymiana danych sygnalizacyjnych
|
||||
|
||||
Dodaj 2 tryby:
|
||||
|
||||
QR code + ręczne skanowanie
|
||||
|
||||
Link generowany przez jedną stronę i wklejany przez drugą
|
||||
|
||||
Kodowanie
|
||||
|
||||
Zserializuj offer (SDP) do JSON → Base64 → QR/link.
|
||||
|
||||
Po stronie odbiorcy: parsuj i odpowiadaj answer przez podobny kanał.
|
||||
|
||||
6. 🧪 UX i potwierdzenia
|
||||
|
||||
Pokaż komunikaty typu:
|
||||
|
||||
„Czekam na połączenie…”
|
||||
|
||||
„Połączenie nawiązane z użytkownikiem”
|
||||
|
||||
„Trwa przesyłanie: 87%”
|
||||
|
||||
Po zakończeniu przesyłania: „Plik otrzymany”, przycisk „Zapisz”.
|
||||
|
||||
## 🧠 Główne założenia
|
||||
|
||||
- 🔒 Prywatność: **przesyłanie filmów bezpośrednio peer-to-peer przez WebRTC** – żadnych plików wideo na serwerze. Opcjonalnie możliwość wymiany linków (np. Google Drive).
|
||||
- 💬 Czat + matchmaking: użytkownicy rejestrują się, wybierają event, trafiają na czat eventowy, łączą się w pary.
|
||||
- 🤝 1:1: po potwierdzeniu – para znika z czatu publicznego i przechodzi do prywatnego.
|
||||
- 📦 Docker Compose: całość uruchamiana w kontenerach.
|
||||
- 📱 Frontend: PWA – działa mobilnie i na desktopie.
|
||||
|
||||
## 🧱 Architektura systemu
|
||||
|
||||
Web client (PWA) ↔ Backend (Node.js + WebSocket + REST API) ↔ PostgreSQL
|
||||
|
||||
## 🐳 Docker Compose – komponenty
|
||||
|
||||
Zestaw trzech kontenerów:
|
||||
- `frontend`: PWA (React/Vite/Tailwind)
|
||||
- `backend`: Node.js/Express/Socket.IO
|
||||
- `db`: PostgreSQL 15
|
||||
|
||||
## 🗃️ Modele bazy danych
|
||||
|
||||
- `users`: identyfikacja, event, dostępność
|
||||
- `events`: lista eventów z worldsdc.com
|
||||
- `chat_rooms`: publiczne i prywatne pokoje
|
||||
- `messages`: wiadomości tekstowe/linki
|
||||
- `matches`: relacja między dwoma użytkownikami
|
||||
- `ratings`: oceny po wymianie nagraniami
|
||||
|
||||
## 🔁 Flow użytkownika
|
||||
|
||||
1. Rejestracja użytkownika
|
||||
2. Wybór eventu (lista z worldsdc.com) na którym użytkownik jest.
|
||||
3. Czat ogólny dla eventu – matchmaking.
|
||||
4. Potwierdzenie: przejście do prywatnego czatu 1:1.
|
||||
5. **Wybór pliku wideo z galerii urządzenia** (nagranie odbywa się poza aplikacją).
|
||||
6. **Przesłanie filmu bezpośrednio przez WebRTC** (peer-to-peer, bez serwera). Opcjonalnie: wymiana linków (np. Google Drive).
|
||||
7. Po wymianie nagraniami – ocena partnera (1–5, komentarz, chęć ponownej współpracy).
|
||||
|
||||
## 💬 Frontend (PWA)
|
||||
|
||||
Zbudowany np. w:
|
||||
- React + Vite + Tailwind
|
||||
- lub SvelteKit / SolidStart
|
||||
|
||||
Widoki:
|
||||
- Logowanie / Rejestracja
|
||||
- Wybór eventu
|
||||
- Czat eventowy
|
||||
- Profil partnera
|
||||
- Czat 1:1
|
||||
- Ocena partnera
|
||||
- Historia współprac
|
||||
|
||||
## 🔐 Bezpieczeństwo
|
||||
|
||||
- Hasła haszowane (bcrypt).
|
||||
- **WebRTC zapewnia natywne szyfrowanie** (DTLS/SRTP) dla transferu P2P.
|
||||
- **Opcjonalne dodatkowe szyfrowanie czatu** tekstowego (WebCrypto/libsodium).
|
||||
- Brak przechowywania nagrań na serwerze – tylko sygnalizacja WebRTC.
|
||||
- Możliwość zgłaszania użytkownika.
|
||||
|
||||
## 📹 WebRTC P2P Transfer Filmów (główna funkcjonalność)
|
||||
|
||||
### Komponenty:
|
||||
- **RTCPeerConnection**: nawiązanie połączenia P2P między użytkownikami
|
||||
- **RTCDataChannel**: kanał do transferu danych binarnych (pliki wideo)
|
||||
- **Chunking**: podział dużych plików wideo na fragmenty (np. 16KB chunks)
|
||||
- **Progress monitoring**: śledzenie postępu wysyłania/odbierania (pasek postępu)
|
||||
- **STUN/TURN**: serwery do przejścia przez NAT/firewall
|
||||
|
||||
### Flow transferu:
|
||||
1. Użytkownik wybiera plik wideo z galerii urządzenia (`<input type="file">`)
|
||||
2. Nawiązanie połączenia WebRTC między parą użytkowników (przez serwer sygnalizacyjny WebSocket)
|
||||
3. Otwarcie RTCDataChannel
|
||||
4. Wysłanie metadanych: nazwa pliku, rozmiar, typ MIME
|
||||
5. Podział pliku na chunki i przesłanie przez DataChannel
|
||||
6. Odbieranie chunków i składanie w całość (Blob)
|
||||
7. Po zakończeniu: zapis pliku w pamięci urządzenia odbiorcy
|
||||
|
||||
### Fallback:
|
||||
- Jeśli WebRTC nie zadziała (problemy z NAT, firewall), użytkownik może wymienić się linkami do filmów (Google Drive, Dropbox, itp.)
|
||||
|
||||
## ➕ Opcjonalne rozszerzenia
|
||||
|
||||
- System oznaczeń zaufania (badge).
|
||||
- Blokowanie użytkowników.
|
||||
- Publiczne profile z opiniami.
|
||||
- Powiadomienia push.
|
||||
|
||||
---
|
||||
|
||||
## 📝 Zasady rozwoju projektu (Development Guidelines)
|
||||
|
||||
### Język w kodzie
|
||||
- **Wszystkie stringi, komunikaty, UI text, komentarze w kodzie**: **angielski**
|
||||
- **Nazwy zmiennych, funkcji, klas**: **angielski**
|
||||
- **Dokumentacja techniczna w kodzie (JSDoc, docstrings)**: **angielski**
|
||||
|
||||
### Komunikacja
|
||||
- **Komunikacja z zespołem/developerem**: **polski**
|
||||
- **Dokumentacja projektowa (CONTEXT.md, README.md)**: **polski** (może być mieszana z angielskim dla części technicznych)
|
||||
|
||||
### Git commits
|
||||
- **Commit messages**: standardowy format bez wzmianek o AI/automatycznym generowaniu kodu
|
||||
- Przykład dobrego commita: `feat: add WebRTC P2P video transfer mockup`
|
||||
- Przykład złego commita: ~~`feat: add video transfer (generated by AI)`~~
|
||||
- Commituj zmiany logicznie (feature by feature, bugfix by bugfix)
|
||||
|
||||
### Przykład
|
||||
```jsx
|
||||
// ✅ Poprawnie - kod po angielsku
|
||||
const sendMessage = (message) => {
|
||||
if (!message.trim()) {
|
||||
alert('Please enter a message');
|
||||
return;
|
||||
}
|
||||
// Send message via WebSocket
|
||||
socket.emit('message', message);
|
||||
};
|
||||
|
||||
// ❌ Niepoprawnie - kod po polsku
|
||||
const wyslijWiadomosc = (wiadomosc) => {
|
||||
if (!wiadomosc.trim()) {
|
||||
alert('Proszę wpisać wiadomość');
|
||||
return;
|
||||
}
|
||||
socket.emit('wiadomosc', wiadomosc);
|
||||
};
|
||||
```
|
||||
352
docs/TODO.md
Normal file
352
docs/TODO.md
Normal file
@@ -0,0 +1,352 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user