feat(tests): add e2e tests

.github/workflows/e2e-tests.yml

@@ -0,0 +1,121 @@
+name: E2E Tests
+
+on:
+  push:
+    branches: [ main, develop ]
+  pull_request:
+    branches: [ main, develop ]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
+        # Add shardIndex: [1, 2, 3, 4, 5, 6, 7, 8] and shardTotal: [8] for more shards
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 18
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+
+    - name: Setup Supabase
+      run: |
+        npx supabase start
+        sleep 10
+        npx supabase db reset
+
+
+    - name: Build project
+      run: npm run build
+
+    - name: Run Playwright tests
+    # PLAYWRIGHT_JSON_OUTPUT_NAME=json-report-${{ matrix.shardIndex }}.json
+      run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob,json
+      env:
+        TEST_SUPABASE_URL: http://localhost:54321
+        TEST_SUPABASE_ANON_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCN9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
+
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: blob-report-${{ matrix.shardIndex }}
+        path: blob-report
+        retention-days: 1
+
+    # - uses: actions/upload-artifact@v4
+    #   if: ${{ !cancelled() }}
+    #   with:
+    #     name: json-report-${{ matrix.shardIndex }}.json
+    #     path: json-report-${{ matrix.shardIndex }}.json
+    #     retention-days: 1
+
+  report:
+    needs: test
+    runs-on: ubuntu-latest
+    if: always()
+    steps:
+    - uses: actions/checkout@v4
+
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 18
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Download blob reports from GitHub Actions Artifacts
+      uses: actions/download-artifact@v4
+      with:
+        path: all-blob-reports
+        pattern: blob-report-*
+        merge-multiple: true
+
+    # - name: Merge into HTML Report
+    #   run: npx playwright merge-reports --reporter html ./all-blob-reports
+
+    # - name: Download JSON reports
+    #   uses: actions/download-artifact@v4
+    #   with:
+    #     path: all-json-reports
+    #     pattern: json-report-*
+    #     merge-multiple: true
+
+    # - name: Debug JSON reports directory
+    #   run: |
+    #     echo "=== Contents of all-json-reports ==="
+    #     ls -la all-json-reports/
+    #     echo "=== Recursive listing ==="
+    #     find all-json-reports -type f -name "*.json"
+    #     echo "=== Current working directory ==="
+    #     pwd
+    #     echo "=== Directory structure ==="
+    #     tree all-json-reports || find all-json-reports -type f
+
+    - name: Merge JSON reports
+      run: npx playwright merge-reports --reporter json ./all-blob-reports > ./all-json-reports.json
+
+    - name: Generate summary comment
+      uses: daun/playwright-report-summary@v3
+      if: always()
+      with:
+        report-file: all-json-reports.json
+
+    - uses: actions/upload-artifact@v4
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30 

.gitignore

@@ -24,3 +24,13 @@ dist-ssr
 *.sw?
 
 supabase/.temp
+
+# Test artifacts
+playwright-report/
+test-results/
+tests/screenshots/
+
+.env
+
+supabase/.temp
+supabase/.branches

CLAUDE.md

@@ -0,0 +1,108 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Essential Commands
+
+### Development
+- `npm run dev` - Start development server on port 8080
+- `npm run build` - Production build
+- `npm run build:dev` - Development build
+- `npm run lint` - Run ESLint
+- `npm run preview` - Preview production build
+
+### Testing
+- `npm run test:e2e` - Run Playwright end-to-end tests
+- `npm run test:e2e:ui` - Run tests with Playwright UI
+- `npm run test:e2e:headed` - Run tests in headed mode
+- `npm run test:e2e:debug` - Debug tests
+- `npm run test:e2e:report` - Show test report
+- `npm run test:setup` - Setup test environment
+- `npm run test:setup:full` - Setup full local Supabase
+
+## Architecture Overview
+
+### Tech Stack
+- **Frontend**: React 18 + TypeScript + Vite
+- **UI**: shadcn/ui components with Radix UI primitives
+- **Styling**: Tailwind CSS with custom design system
+- **Database**: Supabase PostgreSQL with Row Level Security
+- **State Management**: TanStack Query for server state
+- **Authentication**: Supabase Auth (magic links + OTP)
+- **Testing**: Playwright for E2E tests
+
+### Project Structure
+```
+src/
+├── components/          # Reusable UI components
+│   ├── ui/             # shadcn/ui base components
+│   ├── Admin/          # Admin dashboard components
+│   ├── ArtistDetail/   # Artist detail page components
+│   ├── Index/          # Main page components
+│   └── legal/          # Legal pages (privacy, terms)
+├── hooks/              # Custom React hooks
+│   ├── queries/        # TanStack Query hooks
+│   └── useAuth.ts      # Authentication logic
+├── integrations/
+│   └── supabase/       # Supabase client and types
+├── lib/                # Utility functions
+├── pages/              # Route components
+├── services/           # Business logic services
+└── types/              # TypeScript type definitions
+```
+
+### Core Application Concepts
+
+**VibeTribe** is a collaborative festival voting platform with these key features:
+
+1. **Artist Management**: Core team can add/edit artists with genres, stages, and metadata
+2. **Voting System**: Three vote types - "Must Go" (2), "Interested" (1), "Won't Go" (-1)
+3. **Group System**: Users can create groups for collaborative decision-making
+4. **Real-time Updates**: Live vote counts and artist changes via Supabase subscriptions
+5. **Authentication**: Passwordless login with magic links and OTP backup
+
+### Database Schema
+- `artists` - Artist information with genres, stages, performance times
+- `votes` - User votes linked to artists and groups
+- `artist_notes` - Collaborative notes visible to group members
+- `groups` - Voting groups with invite system
+- `group_members` - Group membership with roles
+- `profiles` - Extended user information
+
+### Key Architectural Patterns
+
+1. **Component Architecture**: Functional components with TypeScript, using custom hooks for business logic
+2. **State Management**: Server state via TanStack Query, URL state for filters, local state for UI
+3. **Real-time Features**: Supabase subscriptions for live updates
+4. **Security**: Row Level Security policies, role-based permissions (Anonymous, Authenticated, Group Creator, Core Team)
+5. **Offline Support**: PWA configuration with service worker caching
+
+### Development Guidelines
+
+1. **TypeScript**: Full type coverage with generated Supabase types
+2. **Styling**: Use Tailwind utilities and existing component patterns
+3. **Components**: Follow shadcn/ui patterns for new UI components
+4. **Data Fetching**: Use TanStack Query hooks in `hooks/queries/`
+5. **Authentication**: Use `useAuth` hook for auth state and actions
+6. **Routing**: Add new routes to `App.tsx` above the catch-all "*" route
+
+### Testing Setup
+- E2E tests use Playwright with local Supabase instance
+- Tests run against port 8080 (development server)
+- Test data setup via `scripts/setup-test-env.sh`
+- CI/CD runs tests in parallel across multiple browsers
+- Detailed testing documentation in `tests/README.md`
+
+### Code Conventions
+- ESLint configuration disables unused variable warnings
+- React hooks follow standard patterns
+- Component files use PascalCase
+- Custom hooks use camelCase with "use" prefix
+- Services and utilities use camelCase
+
+### Important Notes
+- Server runs on port 8080 (not standard 3000)
+- Authentication uses magic links primarily, OTP as backup
+- All database operations go through Supabase RLS policies
+- Group-based permissions affect data visibility
+- PWA manifest configured for "UpLine" branding

docs/TESTING.md

@@ -0,0 +1,63 @@
+# Testing Setup for Boom Voter
+
+> For step-by-step E2E test instructions, test data, commands, coverage, debugging, troubleshooting, and next steps, see [tests/README.md](../tests/README.md).
+
+## 🎯 What We've Added
+
+### 1. **Playwright E2E Testing**
+- **Framework**: Playwright for end-to-end testing
+- **Browsers**: Chrome, Firefox, Safari, Mobile Chrome, Mobile Safari
+- **Features**: Screenshots, videos, traces, parallel execution
+- **Configuration**: `playwright.config.ts`
+- **How to run E2E tests, setup test data, and available commands:** See [tests/README.md](../tests/README.md)
+
+### 2. **Local Supabase Testing Environment**
+- **Local Database**: Supabase running on Docker
+- **Test Data**: Automated setup with sample artists, genres, groups
+- **Isolation**: Separate from production environment
+- **Scripts**: Easy setup and teardown
+
+### 3. **Test Infrastructure**
+- **Test Helpers**: Common utilities for authentication, navigation, etc.
+- **Test Data**: Consistent test scenarios
+- **Environment Config**: Flexible configuration for different environments
+- **CI/CD Integration**: GitHub Actions workflow
+
+
+## 🚀 Getting Started
+
+For E2E test setup, test data, and available commands, see [tests/README.md](../tests/README.md).
+
+## 🧪 Available Commands
+
+See [tests/README.md](../tests/README.md) for all E2E test commands and usage.
+
+## 🔧 Configuration
+
+For E2E environment variables and test data details, see [tests/README.md](../tests/README.md).
+
+## 🔄 CI/CD Integration
+
+### GitHub Actions Workflow
+- **Triggers**: Push to main/develop, PRs
+- **Parallel Execution**: 4 shards for faster runs
+- **Artifacts**: Test reports, screenshots, videos
+- **Environment**: Local Supabase in CI
+
+### Workflow Steps
+1. Setup Node.js and dependencies
+2. Install Playwright browsers
+3. Start local Supabase
+4. Populate test data
+5. Build application
+6. Run tests in parallel
+7. Generate and upload reports
+
+## 🗄️ Local Supabase
+
+For local Supabase usage in E2E, see [tests/README.md](../tests/README.md).
+
+## 📚 Resources
+
+- [Supabase Local Development](https://supabase.com/docs/guides/cli/local-development)
+- [GitHub Actions Documentation](https://docs.github.com/en/actions)