spotlightcam/docs/SESSION_CONTEXT.md

# Session Context - spotlight.cam

**Quick reference for resuming development sessions - optimized for minimal token usage**

---

## Project Overview

**Name:** spotlight.cam
**Purpose:** P2P video exchange app for dance event participants
**Main Feature:** WebRTC P2P video file transfer (no server storage)
**Tech Stack:** React + Vite + Tailwind | Node.js + Express + Socket.IO | PostgreSQL 15 | Docker Compose

---

## Current Status

**Phase:** 2.5 (WebRTC P2P File Transfer) - ✅ COMPLETED
**Current Phase:** 3 (MVP Finalization) - ⏳ IN PROGRESS
**Previous Phases:**
- Phase 2 (Matches & Ratings API) - ✅ COMPLETED
- Phase 1.6 (Competition Heats) - ✅ COMPLETED
- Phase 1.5 (Email & WSDC & Profiles & Security & QR Check-in) - ✅ COMPLETED
**Progress:** ~95% overall
**Next Goal:** Production deployment, monitoring

### What Works Now
- ✅ Docker Compose (nginx:8080 + frontend + backend + PostgreSQL)
- ✅ All frontend views with real API integration
- ✅ Backend API (Node.js + Express)
- ✅ PostgreSQL database with 8 tables (Prisma ORM)
- ✅ Real authentication (JWT + bcrypt)
- ✅ **Email verification (AWS SES with link + PIN code) - Phase 1.5**
- ✅ **Password reset workflow - Phase 1.5**
- ✅ **WSDC ID integration for auto-fill registration - Phase 1.5**
- ✅ **User profiles with social media & location - Phase 1.5**
- ✅ **Public profiles (/{username}) - Phase 1.5**
- ✅ **Event participation tracking - Phase 1.5**
- ✅ **Event security (unique slugs, no ID enumeration) - Phase 1.5**
- ✅ **QR code event check-in system - Phase 1.5** (requires physical presence at venue)
- ✅ **Competition heats declaration system - Phase 1.6** (matchmaking prerequisite)
- ✅ **Matches API (create/accept/list matches with slugs) - Phase 2**
- ✅ **Ratings API (rate partners, 1-5 stars, comments) - Phase 2**
- ✅ **WebRTC signaling (SDP/ICE exchange via Socket.IO) - Phase 2.5**
- ✅ **WebRTC P2P file transfer (RTCDataChannel, 16KB chunks, up to 700MB tested) - Phase 2.5**
- ✅ **WebRTC detection & fallback UX (auto-detect browser capabilities) - Phase 2.5**
- ✅ **STUN servers for NAT traversal (production-ready) - Phase 2.5**
- ✅ **Landing page with hero section and features showcase - Phase 3**
- ✅ **WebRTC test suite (7 backend tests passing) - Phase 3**
- ✅ **Security hardening (CSRF protection, Account Lockout, Rate Limiting) - Phase 3**
- ✅ **PWA features (manifest, icons, service worker, iOS support, install prompt) - Phase 3**
- ✅ Real-time chat (Socket.IO for event & match rooms)

### What's Missing
- ⏳ Production deployment & monitoring
- ⏳ Competition heats UI integration improvements

---

## Tech Stack

**Infrastructure:**
- Docker Compose (nginx, frontend, backend, PostgreSQL db)
- nginx reverse proxy on port 8080 (API + WebSocket)

**Frontend:**
- React 18 + Vite
- Tailwind CSS v3.4.0 (NOT v4 - compatibility issues)
- React Router
- Context API for state
- socket.io-client for real-time chat
- PWA (vite-plugin-pwa, Workbox for service worker)

**Backend:**
- Node.js 20 + Express 4.18.2
- Socket.IO 4.8.1 for WebSocket (real-time chat)
- PostgreSQL 15 with Prisma ORM 5.8.0
- bcrypt + JWT authentication
- Jest + supertest for testing (223/223 tests passing, 71% coverage)

**WebRTC:**
- RTCPeerConnection
- RTCDataChannel (file transfer)
- Chunking (16KB chunks)
- STUN/TURN servers

---

## Project Structure

```
/spotlightcam
├── docker-compose.yml          # nginx + frontend + backend + PostgreSQL
├── nginx/                      # Proxy config (API + WebSocket)
├── frontend/                   # React PWA
│   ├── src/
│   │   ├── pages/             # All views (Login, Register, Events, Chat, Match, Rate, History)
│   │   ├── contexts/          # AuthContext (JWT integration)
│   │   ├── components/        # Layout, Navbar
│   │   ├── services/          # API client, Socket.IO client
│   │   └── mocks/             # Mock data (events, users for UI)
├── backend/                    # Node.js + Express API
│   ├── src/
│   │   ├── controllers/       # Auth, users, events
│   │   ├── middleware/        # Authentication middleware
│   │   ├── routes/            # API routes
│   │   ├── socket/            # Socket.IO server
│   │   ├── utils/             # Auth utils, DB connection
│   │   └── __tests__/         # Jest unit tests
│   └── prisma/                # Database schema, migrations, seed
└── docs/
    ├── SESSION_CONTEXT.md     # This file
    ├── CONTEXT.md             # Full project description
    ├── TODO.md                # Task list
    ├── ARCHITECTURE.md        # Technical details
    ├── COMPLETED.md           # Completed tasks archive
    └── RESOURCES.md           # Learning resources
```

---

## Key Files

**Frontend:**
- `frontend/src/pages/HomePage.jsx` - **NEW: Landing page with hero section - Phase 3**
- `frontend/src/pages/RegisterPage.jsx` - Two-step registration (WSDC lookup + form)
- `frontend/src/pages/VerifyEmailPage.jsx` - Email verification (link + code)
- `frontend/src/pages/ForgotPasswordPage.jsx` - Request password reset
- `frontend/src/pages/ResetPasswordPage.jsx` - Reset password with token
- `frontend/src/pages/ProfilePage.jsx` - **UPDATED: Edit profile (social media, location) - Phase 1.5**
- `frontend/src/pages/PublicProfilePage.jsx` - **NEW: View other user profiles - Phase 1.5**
- `frontend/src/pages/EventsPage.jsx` - **UPDATED: Shows check-in requirement, dev-only QR access - Phase 1.5**
- `frontend/src/pages/EventChatPage.jsx` - **UPDATED: Heats integration (banner, badges, filtering) - Phase 1.6**
- `frontend/src/pages/EventDetailsPage.jsx` - **NEW: QR code display, participant list - Phase 1.5**
- `frontend/src/pages/EventCheckinPage.jsx` - **NEW: Check-in confirmation page - Phase 1.5**
- `frontend/src/pages/MatchChatPage.jsx` - **UPDATED: WebRTC P2P file transfer - Phase 2.5**
- `frontend/src/hooks/useWebRTC.js` - **NEW: WebRTC hook (RTCPeerConnection, RTCDataChannel) - Phase 2.5**
- `frontend/src/utils/webrtcDetection.js` - **NEW: WebRTC browser detection - Phase 2.5**
- `frontend/src/components/WebRTCWarning.jsx` - **NEW: WebRTC blocked warning component - Phase 2.5**
- `frontend/src/components/heats/HeatsBanner.jsx` - **NEW: Heats declaration form component - Phase 1.6**
- `frontend/src/components/pwa/InstallPWA.jsx` - **NEW: PWA install prompt (Android + iOS) - Phase 3**
- `frontend/src/components/common/PasswordStrengthIndicator.jsx` - Password strength indicator
- `frontend/src/components/common/VerificationBanner.jsx` - Email verification banner
- `frontend/src/contexts/AuthContext.jsx` - JWT authentication integration
- `frontend/src/services/api.js` - **UPDATED: Heats API, CSRF token handling - Phase 1.6 & Phase 3**
- `frontend/src/services/socket.js` - Socket.IO client connection manager
- `frontend/src/data/countries.js` - **NEW: List of 195 countries - Phase 1.5**
- `frontend/src/utils/__tests__/webrtcDetection.test.js` - **NEW: WebRTC detection tests - Phase 3**
- `frontend/src/components/__tests__/WebRTCWarning.test.jsx` - **NEW: WebRTC warning tests - Phase 3**
- `frontend/vite.config.js` - **UPDATED: PWA plugin configuration - Phase 3**
- `frontend/index.html` - **UPDATED: iOS PWA meta tags, app icons, splash screens - Phase 3**
- `frontend/public/icons/` - **NEW: App icons (192x192, 512x512, apple-touch-icon) - Phase 3**
- `frontend/public/splash/` - **NEW: iOS splash screens for various devices - Phase 3**

**Backend:**
- `backend/src/app.js` - **UPDATED: CSRF protection, cookie-parser middleware - Phase 3**
- `backend/src/controllers/auth.js` - **UPDATED: Account lockout logic in login - Phase 3**
- `backend/src/controllers/user.js` - **UPDATED: Profile updates (social, location) - Phase 1.5**
- `backend/src/controllers/wsdc.js` - WSDC API proxy for dancer lookup
- `backend/src/config/security.js` - **Security configuration (CSRF, rate limiting, account lockout)**
- `backend/src/routes/events.js` - **UPDATED: Heats management endpoints (POST/GET/DELETE /heats) - Phase 1.6**
- `backend/src/routes/divisions.js` - **NEW: List all divisions - Phase 1.6**
- `backend/src/routes/competitionTypes.js` - **NEW: List all competition types - Phase 1.6**
- `backend/src/routes/users.js` - **UPDATED: Public profile endpoint - Phase 1.5**
- `backend/src/socket/index.js` - **UPDATED: WebRTC signaling (offer/answer/ICE), heats_updated - Phase 2.5**
- `backend/src/utils/email.js` - AWS SES email service with HTML templates
- `backend/src/utils/auth.js` - Token generation utilities
- `backend/src/middleware/auth.js` - Email verification middleware
- `backend/src/middleware/rateLimiter.js` - Rate limiting middleware (API, auth, email)
- `backend/src/middleware/validators.js` - **UPDATED: Social media URL validation - Phase 1.5**
- `backend/src/server.js` - Express server with Socket.IO integration
- `backend/src/__tests__/socket-webrtc.test.js` - **NEW: WebRTC signaling tests (7 tests) - Phase 3**
- `backend/src/__tests__/auth.test.js` - **UPDATED: Account lockout tests (6 new tests) - Phase 3**
- `backend/src/__tests__/csrf.test.js` - **NEW: CSRF protection tests (11 tests) - Phase 3**
- `backend/src/__tests__/events.test.js` - Events API tests
- `backend/src/__tests__/matches.test.js` - Matches API tests
- `backend/prisma/schema.prisma` - **UPDATED: Account lockout fields (failedLoginAttempts, lockedUntil) - Phase 3**
- `backend/prisma/migrations/20251113151534_add_wsdc_and_email_verification/` - Phase 1.5 migration
- `backend/prisma/migrations/20251113202500_add_event_slug/` - **NEW: Event slugs migration - Phase 1.5**
- `backend/prisma/migrations/20251114125544_add_event_checkin_tokens/` - **NEW: QR check-in tokens - Phase 1.5**
- `backend/prisma/migrations/20251119_add_account_lockout_fields/` - **NEW: Account lockout migration - Phase 3**

**Config:**
- `docker-compose.yml` - nginx, frontend, backend, PostgreSQL
- `nginx/conf.d/default.conf` - Proxy for /api and /socket.io
- `backend/.env.production` - **UPDATED: Security env variables - Phase 3**
- `backend/.env.development` - **UPDATED: Security env variables - Phase 3**

---

## Database Schema (Implemented - Prisma)

11 tables with relations:
- `users` - **EXTENDED in Phase 1.5 & Phase 3:**
  - Base: id, username, email, password_hash, avatar, created_at, updated_at
  - **WSDC:** first_name, last_name, wsdc_id
  - **Email Verification:** email_verified, verification_token, verification_code, verification_token_expiry
  - **Password Reset:** reset_token, reset_token_expiry
  - **Social Media:** youtube_url, instagram_url, facebook_url, tiktok_url
  - **Location:** country, city
  - **Account Lockout (Phase 3):** failed_login_attempts, locked_until
- `events` - id, **slug (unique)**, name, location, start_date, end_date, description, worldsdc_id, participants_count
- `event_participants` - **NEW in Phase 1.5:** id, user_id, event_id, joined_at (many-to-many)
- `event_checkin_tokens` - **NEW in Phase 1.5:** id, event_id (unique), token (cuid, unique), created_at
- `divisions` - **NEW in Phase 1.6:** id, name, abbreviation, display_order (Newcomer, Novice, Intermediate, Advanced, All-Star, Champion)
- `competition_types` - **NEW in Phase 1.6:** id, name, abbreviation (Jack & Jill, Strictly)
- `event_user_heats` - **NEW in Phase 1.6:** id, user_id, event_id, division_id, competition_type_id, heat_number (1-9), role (Leader/Follower/NULL)
- `chat_rooms` - id, event_id, match_id, type (event/private), created_at
- `messages` - id, room_id, user_id, content, type, created_at
- `matches` - id, user1_id, user2_id, event_id, room_id, status, created_at
- `ratings` - id, match_id, rater_id, rated_id, score, comment, would_collaborate_again, created_at

**Migrations:**
- `20251112205214_init` - Initial schema
- `20251113151534_add_wsdc_and_email_verification` - Phase 1.5 (email, WSDC, social, location)
- `20251113202500_add_event_slug` - **Phase 1.5 (event security - unique slugs)**
- `20251114125544_add_event_checkin_tokens` - **Phase 1.5 (QR code check-in system)**
- `20251114142504_add_competition_heats_system` - **Phase 1.6 (competition heats for matchmaking)**
- `20251119_add_account_lockout_fields` - **Phase 3 (account lockout security)**

**Seed data:** 4 events, 6 divisions, 2 competition types, event chat rooms

---

## User Flow

1. Register/Login
2. Choose event (from worldsdc.com list)
3. Event chat - matchmaking
4. Match confirmation → private 1:1 chat
5. **Select video from gallery** (recorded outside app)
6. **WebRTC P2P transfer** (direct, no server storage) OR link sharing fallback
7. Rate partner (1-5 stars, comment)

---

## Development Guidelines

### Code Language
- **All code, strings, UI text, comments:** ENGLISH
- **Variable/function names:** ENGLISH
- **Communication with developer:** POLISH

### Git Commits
- Standard format, NO mentions of AI/automatic generation
- ✅ Good: `feat: add WebRTC P2P video transfer`
- ❌ Bad: `feat: add video transfer (generated by AI)`

### Important Decisions
- Port 8080 (port 80 was occupied)
- Tailwind CSS v3.4.0 (v4 has breaking changes with Vite)
- Mock authentication uses localStorage
- All UI text in English

---

## Next Steps (Phase 2 - Core Features)

**Priority:** HIGH
**Estimated Time:** 12-15 hours

### Step 1: Matches API (3-4h)
- `POST /api/matches` - Create match request
- `POST /api/matches/:id/accept` - Accept match
- `GET /api/matches` - List user's matches
- Frontend integration (match request flow)
- Tests

### Step 2: Ratings API (2-3h)
- `POST /api/ratings` - Submit rating after collaboration
- `GET /api/users/:id/ratings` - Get user's ratings
- Frontend integration (rating form)
- Tests

### Step 3: WebRTC Signaling (3-4h)
- Socket.IO events for SDP/ICE exchange
- Signaling flow (offer/answer/ice-candidate)
- Frontend WebRTC setup (RTCPeerConnection)
- Connection establishment tests

### Step 4: WebRTC File Transfer (4-5h)
- RTCDataChannel setup
- File chunking (16KB chunks)
- Progress monitoring (sender & receiver)
- Error handling & reconnection
- Complete P2P video transfer flow

---

## Common Commands

**Start project:**
```bash
docker compose up --build
```

**Access:**
- Frontend: http://localhost:8080
- Backend API: http://localhost:8080/api
- Socket.IO: ws://localhost:8080/socket.io
- Health check: http://localhost:8080/api/health

**Rebuild after changes:**
```bash
docker compose down
docker compose up --build
```

**Git:**
```bash
git status
git add .
git commit -m "feat: description"
```

---

## Known Issues & Solutions

### Issue: Tailwind v4 compatibility error
**Solution:** Downgraded to Tailwind v3.4.0
```bash
npm install -D tailwindcss@^3.4.0
```

### Issue: Port 80 already allocated
**Solution:** Changed nginx port to 8080 in docker-compose.yml

### Issue: Prisma OpenSSL error in Alpine Linux
**Solution:** Added OpenSSL to Dockerfile
```dockerfile
RUN apk add --no-cache openssl
```

---

## WebRTC Implementation Notes (Future)

**Main functionality - P2P file transfer:**
- RTCPeerConnection for connection establishment
- RTCDataChannel for binary data transfer
- File chunking (16KB chunks recommended)
- Progress monitoring (both sender and receiver)
- Metadata exchange (filename, size, MIME type)
- Error handling and reconnection logic
- Fallback: link sharing (Google Drive, Dropbox)

**Signaling:**
- WebSocket (Socket.IO) for SDP/ICE exchange
- Server only for signaling, NOT for file storage

**Security:**
- WebRTC native encryption (DTLS/SRTP)
- Optional: additional chat encryption (WebCrypto API)

---

## Quick Reference - Frontend Routes

- `/` - Landing page with hero section, features showcase, CTAs
- `/login` - Login page
- `/register` - Two-step registration (WSDC lookup + form)
- `/verify-email` - Email verification (link + PIN code)
- `/forgot-password` - Request password reset
- `/reset-password/:token` - Reset password with token
- `/profile` - Edit user profile (social media, location)
- `/:username` - Public profile view
- `/events` - Event list (joined events first, check-in requirement notice)
- `/events/:slug/chat` - Event chat (requires check-in, real-time Socket.IO)
- `/events/:slug/details` - **NEW:** Event details with QR code, participant list
- `/events/checkin/:token` - **NEW:** QR code check-in confirmation page
- `/matches/:id/chat` - Private 1:1 chat + WebRTC mockup
- `/matches/:id/rate` - Rate partner
- `/history` - Match history

---

## Test Accounts

**Test users for manual testing (seeded in database):**

1. **john_dancer**
   - Email: `john@example.com`
   - Password: `Dance123!`
   - Profile: John Smith (WSDC #12345), Los Angeles, USA
   - Social: Instagram, YouTube
   - Events: Warsaw Dance Festival (checked in), Swing Camp Barcelona (checked in)
   - Heats in Warsaw: J&J NOV 1 L, STR INT 2 L

2. **sarah_swings**
   - Email: `sarah@example.com`
   - Password: `Swing456!`
   - Profile: Sarah Johnson (WSDC #23456), London, UK
   - Social: TikTok, Facebook
   - Events: Warsaw Dance Festival (checked in)
   - Heats in Warsaw: J&J NOV 1 F, J&J ADV 3

3. **mike_blues**
   - Email: `mike@example.com`
   - Password: `Blues789!`
   - Profile: Mike Williams (WSDC #34567), Stockholm, Sweden
   - Social: Instagram, YouTube, TikTok, Facebook
   - Events: Warsaw Dance Festival (checked in)
   - Heats in Warsaw: J&J INT 5 L, STR ADV 1 F

**Note:** All test users are verified and checked in to Warsaw Dance Festival 2025 event. They have pre-configured heats to test the matchmaking system.

---

## Quick Reference - Events

**Seeded Events (slugs are auto-generated cuid for security):**
- Warsaw Dance Festival 2025 (slug: auto-generated, e.g. `cmhz3lcgb00018vbn34v4phoi`)
- Swing Camp Barcelona 2025 (slug: auto-generated)
- Blues Week Herräng 2025 (slug: auto-generated)
- Krakow Swing Connection 2025 (slug: auto-generated)

**Note:** Event slugs are randomly generated cuid strings to prevent ID enumeration attacks. To find the actual slug, log in and check the Events page URL.

---

## Files to Read for Full Context

**Minimal (for quick start):**
- `docs/SESSION_CONTEXT.md` (this file)
- `docker-compose.yml`
- `frontend/src/pages/MatchChatPage.jsx` (WebRTC mockup)

**Full context:**
- `docs/CONTEXT.md` (project description)
- `docs/TODO.md` (task list)
- `docs/ARCHITECTURE.md` (technical details)

**Archives:**
- `docs/COMPLETED.md` (completed tasks)
- `docs/RESOURCES.md` (learning resources)

---

**Last Updated:** 2025-11-19
**Phase 1 Status:** ✅ COMPLETED - Backend Foundation (Express + PostgreSQL + JWT + Socket.IO)
**Phase 1.5 Status:** ✅ COMPLETED - Email Verification & WSDC Integration & User Profiles & Security
  - AWS SES email verification (link + PIN)
  - Password reset workflow
  - WSDC API integration
  - User profiles (social media, location)
  - Public profiles (/{username})
  - Event participation tracking
  - Event security (unique slugs, no ID enumeration)
  - **QR code event check-in system** (physical presence required, dev mode bypass)
**Phase 1.6 Status:** ✅ COMPLETED - Competition Heats System
  - ✅ Backend: 3 new tables (divisions, competition_types, event_user_heats)
  - ✅ API endpoints (GET /divisions, GET /competition-types, heats CRUD)
  - ✅ Socket.IO heats_updated broadcast for real-time updates
  - ✅ Frontend: HeatsBanner component for declaration
  - ✅ EventChatPage integration: heat badges, filtering, Edit button
  - ✅ Matchmaking disabled for users without declared heats
**Phase 2 Status:** ✅ COMPLETED - Matches & Ratings API
  - ✅ Matches API (create/accept/list matches with slugs)
  - ✅ Ratings API (rate partners, 1-5 stars, comments)
  - ✅ Real-time notifications via Socket.IO
**Phase 2.5 Status:** ✅ COMPLETED - WebRTC P2P File Transfer
  - ✅ WebRTC signaling (SDP/ICE exchange via Socket.IO)
  - ✅ P2P file transfer (RTCDataChannel, 16KB chunking, 700MB tested)
  - ✅ STUN servers for NAT traversal
  - ✅ WebRTC detection & fallback UX
  - ✅ E2E encryption (DTLS)
**Phase 3 Status:** ⏳ IN PROGRESS - MVP Finalization
  - ✅ Landing page with hero section
  - ✅ WebRTC test suite (7 backend tests passing)
  - ✅ Security hardening (CSRF, Account Lockout, env variables, comprehensive tests)
  - ✅ PWA features (manifest, service worker, icons, iOS support, install prompts)
  - ✅ Test isolation & fixes (223/223 tests passing, 71% coverage)
  - ⏳ Production deployment
**Next Goal:** Production deployment, monitoring