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
253
README.md
Normal file
253
README.md
Normal file
@@ -0,0 +1,253 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user