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:

git clone <repo-url>
cd spotlightcam

2. Uruchom Docker Compose:

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

docker-compose down

Rebuild po zmianach

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

Quick Start:

• docs/SESSION_CONTEXT.md - Ultra-zwięzły kontekst dla wznowienia sesji (minimal tokens)

Main Documentation:

• docs/CONTEXT.md - Główny opis projektu i założeń
• docs/TODO.md - Aktywne zadania i roadmap

Detailed Documentation:

• docs/ARCHITECTURE.md - Szczegóły techniczne i implementacyjne
• docs/COMPLETED.md - Archiwum ukończonych zadań
• docs/RESOURCES.md - Linki do dokumentacji i zasobów edukacyjnych

🤝 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.