spotlightcam/README.md

# spotlight.cam 🎥

Aplikacja webowa (PWA) dla społeczności tanecznej umożliwiająca matchmaking, czatowanie i wymianę nagrań wideo bezpośrednio przez WebRTC (peer-to-peer).

## 🚀 Funkcjonalności (Mockup)

### ✅ Zaimplementowane (Frontend Mockup)
- **Autoryzacja** - logowanie i rejestracja (mock)
- **Wybór eventu** - przeglądanie i dołączanie do eventów tanecznych
- **Czat eventowy** - publiczny czat dla uczestników eventu z listą aktywnych użytkowników
- **Matchmaking** - łączenie się w pary bezpośrednio z czatu
- **Czat 1:1** - prywatny czat dla sparowanych użytkowników
- **📹 Transfer wideo (mockup WebRTC)** - symulacja przesyłania filmów P2P
  - Wybór pliku z galerii urządzenia
  - Symulacja połączenia WebRTC (connecting → connected)
  - Progress bar transferu pliku
  - Status połączenia (disconnected/connecting/connected/failed)
  - Fallback: wysyłanie linków do filmów (Google Drive, Dropbox)
- **System ocen** - ocenianie partnera po współpracy (1-5 gwiazdek, komentarz)
- **Historia współprac** - lista poprzednich matchów i otrzymanych ocen

### 🔜 Do implementacji w kolejnych etapach
- **Backend API** (Node.js + Express + PostgreSQL)
- **WebSocket** (Socket.IO) - real-time chat i signaling
- **WebRTC P2P** - prawdziwy transfer plików przez RTCDataChannel
- **Autentykacja JWT** - prawdziwa autoryzacja
- **Baza danych** - PostgreSQL z pełnym schematem

## 🛠️ Stack Technologiczny

### Frontend (Current)
- **React 18** - framework UI
- **Vite** - build tool i dev server
- **Tailwind CSS** - stylowanie
- **React Router** - routing
- **Lucide React** - ikony
- **Context API** - zarządzanie stanem (auth)

### Infrastructure
- **Docker Compose** - orkiestracja kontenerów
- **Nginx** - reverse proxy i serving statycznych plików
- **Node.js 20 Alpine** - kontener dla frontendu

## 📁 Struktura projektu

```
spotlightcam/
├── docker-compose.yml          # Konfiguracja Docker Compose
├── nginx/                      # Konfiguracja Nginx
│   ├── nginx.conf             # Główna konfiguracja
│   └── conf.d/
│       └── default.conf       # Proxy do frontendu (i backendu w przyszłości)
├── frontend/                   # React PWA
│   ├── src/
│   │   ├── components/        # Komponenty React
│   │   │   ├── common/
│   │   │   ├── chat/
│   │   │   ├── video/
│   │   │   └── layout/        # Navbar, Layout
│   │   ├── pages/             # Strony aplikacji
│   │   │   ├── LoginPage.jsx
│   │   │   ├── RegisterPage.jsx
│   │   │   ├── EventsPage.jsx
│   │   │   ├── EventChatPage.jsx
│   │   │   ├── MatchChatPage.jsx  # 🔥 Główna funkcjonalność - mockup WebRTC
│   │   │   ├── RatePartnerPage.jsx
│   │   │   └── HistoryPage.jsx
│   │   ├── contexts/          # Context API (AuthContext)
│   │   ├── hooks/             # Custom hooks
│   │   ├── utils/             # Utility functions
│   │   ├── services/          # API services (przyszłość)
│   │   └── mocks/             # Mock data
│   │       ├── events.js
│   │       ├── users.js
│   │       ├── messages.js
│   │       └── matches.js
│   ├── Dockerfile
│   └── package.json
└── docs/                       # Dokumentacja
    ├── CONTEXT.md             # Opis projektu
    └── TODO.md                # Lista zadań
```

## 🚀 Uruchomienie projektu

### Wymagania
- Docker i Docker Compose
- (Opcjonalnie) Node.js 20+ dla developmentu bez Dockera

### Uruchomienie z Docker Compose

1. Sklonuj repozytorium:
```bash
git clone <repo-url>
cd spotlightcam
```

2. Uruchom Docker Compose:
```bash
docker-compose up --build
```

3. Otwórz przeglądarkę:
```
http://localhost:8080
```

Frontend Vite dev server działa na porcie 5173 (wewnątrz kontenera), ale jest dostępny przez Nginx na porcie 8080.

### Zatrzymanie
```bash
docker-compose down
```

### Rebuild po zmianach
```bash
docker-compose up --build
```

## 🧪 Testowanie aplikacji

### Flow testowy:

1. **Logowanie** (http://localhost:8080/login)
   - Wpisz dowolny email i hasło (mock auth)
   - Zostaniesz zalogowany jako użytkownik "john_dancer"

2. **Wybór eventu** (http://localhost:8080/events)
   - Wybierz jeden z eventów (np. "Warsaw Dance Festival 2025")
   - Kliknij "Dołącz do czatu"

3. **Czat eventowy**
   - Zobacz mockowane wiadomości w czacie publicznym
   - Po prawej stronie lista aktywnych użytkowników
   - Kliknij ikonę "+" przy użytkowniku aby się z nim połączyć
   - Po 1 sekundzie zostaniesz przekierowany do prywatnego czatu 1:1

4. **Czat 1:1 - Główna funkcjonalność!** 🔥
   - Zobacz profil partnera na górze
   - Status WebRTC połączenia (disconnected/connecting/connected)
   - **Wysyłanie filmu przez WebRTC (mockup):**
     - Kliknij "Wyślij film (WebRTC)"
     - Wybierz plik wideo z dysku
     - Kliknij "Wyślij film (P2P)"
     - Zobacz symulację:
       - Status WebRTC: connecting → connected
       - Progress bar transferu (0% → 100%)
       - Informacja o przesłanym pliku w czacie
   - **Fallback - wysyłanie linku:**
     - Kliknij "Link"
     - Wklej URL do filmu (np. Google Drive)
     - Link pojawi się w czacie

5. **Ocena partnera**
   - Kliknij "Zakończ i oceń"
   - Wybierz ocenę (1-5 gwiazdek)
   - Dodaj komentarz (opcjonalnie)
   - Zaznacz czy chcesz współpracować ponownie
   - Kliknij "Zapisz ocenę"

6. **Historia współprac** (http://localhost:8080/history)
   - Zobacz listę twoich poprzednich matchów
   - Zobacz otrzymane oceny
   - Zobacz statystyki

## 🎨 Główne widoki

### LoginPage & RegisterPage
- Formularz logowania/rejestracji
- Mock autoryzacja (dowolny email/hasło)
- Info box o demo mode

### EventsPage
- Karty eventów z worldsdc.com
- Informacje: lokalizacja, daty, liczba uczestników
- Przycisk "Dołącz do czatu"

### EventChatPage
- Czat publiczny dla eventu
- Lista aktywnych użytkowników (sidebar)
- Wysyłanie wiadomości
- Matchmaking przez ikonę "+"

### MatchChatPage ⭐ (Główna funkcjonalność)
- Profil partnera
- Status WebRTC połączenia (disconnected/connecting/connected/failed)
- Czat 1:1
- **Mockup transferu wideo WebRTC:**
  - Wybór pliku z galerii
  - Symulacja nawiązywania połączenia WebRTC
  - Progress bar (chunking simulation)
  - Info o szyfrrowaniu E2E (DTLS/SRTP)
- Fallback: wysyłanie linków do filmów
- Przycisk "Zakończ i oceń"

### RatePartnerPage
- Ocena partnera (1-5 gwiazdek)
- Pole komentarza
- Checkbox "Chcę współpracować ponownie"

### HistoryPage
- Lista matchów
- Otrzymane oceny
- Statystyki użytkownika

## 📝 Mock Data

Aplikacja używa mock data dla wszystkich funkcjonalności:
- **Users**: 5 użytkowników testowych
- **Events**: 4 eventy (Warsaw, Berlin, Prague, Krakow)
- **Messages**: Przykładowe wiadomości w czatach
- **Matches**: 3 przykładowe matche
- **Ratings**: 3 przykładowe oceny

Mock data znajduje się w `frontend/src/mocks/`.

## 🔐 Bezpieczeństwo (Mockup)

W obecnej wersji (mockup):
- ✅ Autoryzacja jest symulowana (localStorage)
- ✅ WebRTC status jest symulowany
- ⏳ Backend API będzie dodany w kolejnym etapie
- ⏳ Prawdziwe WebRTC P2P będzie zaimplementowane później
- ⏳ JWT autoryzacja będzie dodana później

## 🎯 Kolejne kroki

Zobacz `docs/TODO.md` dla pełnej listy zadań. Najważniejsze:

1. **Backend setup** - Node.js + Express + PostgreSQL
2. **WebSocket** - Socket.IO dla real-time communication
3. **WebRTC Signaling** - Serwer sygnalizacyjny (SDP/ICE exchange)
4. **WebRTC P2P Transfer** - Prawdziwy transfer plików przez RTCDataChannel
5. **Autentykacja** - JWT + bcrypt
6. **Testy** - Unit, integration, E2E
7. **Deployment** - Production setup

## 📖 Dokumentacja

- `docs/CONTEXT.md` - Szczegółowy opis projektu i architektury
- `docs/TODO.md` - Lista zadań do zrobienia

## 🤝 Contributing

Projekt jest w fazie MVP. Backend i prawdziwy WebRTC będą dodane w kolejnych etapach.

## 📄 License

TBD

---

**Uwaga:** To jest wersja mockup frontendu. WebRTC transfer jest symulowany. Pełna funkcjonalność (backend + prawdziwy WebRTC) będzie dostępna w kolejnych wersjach.