blackcanyontickets/reactrebuild0825/REBUILD_PLAN.md

# React Rebuild Plan for BCT Whitelabel (reactrebuild0825)

## Project Overview

This is a frontend-only React rebuild of the Black Canyon Tickets platform for learning purposes.
The goal is to recreate the UI/UX without any database connections or live APIs - using mock data
instead.

## Project Structure

```
reactrebuild0825/
├── package.json                    # Vite + React + TypeScript + Tailwind
├── vite.config.ts                  # Vite configuration
├── tailwind.config.js              # Glassmorphism design system
├── tsconfig.json                   # TypeScript config
├── .env.example                    # All current env vars (no live values)
├── .gitignore                      # Standard React/Node gitignore
├── README.md                       # Project overview and setup
├── CLAUDE.md                       # Instructions for future Claude sessions
├── src/
│   ├── main.tsx                    # React app entry point
│   ├── App.tsx                     # Main app component with routing
│   ├── index.css                   # Global styles + Tailwind imports
│   ├── components/
│   │   ├── layout/
│   │   │   ├── Navigation.tsx      # Main navigation
│   │   │   ├── Layout.tsx          # Base layout wrapper
│   │   │   └── SecureLayout.tsx    # Authenticated layout
│   │   ├── ui/                     # Reusable UI components
│   │   │   ├── Button.tsx
│   │   │   ├── Modal.tsx
│   │   │   ├── Input.tsx
│   │   │   └── Card.tsx
│   │   ├── calendar/               # Calendar components
│   │   │   ├── CalendarGrid.tsx
│   │   │   ├── EventCard.tsx
│   │   │   └── CalendarHeader.tsx
│   │   ├── ticketing/              # Ticketing components
│   │   │   ├── TicketCheckout.tsx
│   │   │   ├── TicketTypeModal.tsx
│   │   │   └── QuickTicketPurchase.tsx
│   │   └── admin/                  # Admin dashboard components
│   │       ├── SuperAdminDashboard.tsx
│   │       └── EventManagement.tsx
│   ├── pages/
│   │   ├── Home.tsx                # Landing page
│   │   ├── Dashboard.tsx           # Main dashboard
│   │   ├── Calendar.tsx            # Public calendar
│   │   ├── Login.tsx               # Authentication
│   │   └── admin/
│   │       └── AdminDashboard.tsx
│   ├── hooks/                      # Custom React hooks
│   │   ├── useAuth.tsx
│   │   ├── useEvents.tsx
│   │   └── useTickets.tsx
│   ├── lib/                        # Utility libraries
│   │   ├── types.ts                # TypeScript type definitions
│   │   ├── constants.ts            # App constants
│   │   ├── utils.ts                # Helper functions
│   │   └── mock-data.ts            # Static mock data (no DB)
│   └── styles/
│       ├── globals.css             # Global styles
│       └── glassmorphism.css       # Design system utilities
└── public/                         # Static assets
    └── assets/
```

## Environment Variables (Static/Mock)

Based on current project `.env.example`:

```bash
# Mock Supabase Configuration (no real connection)
VITE_SUPABASE_URL=https://mock-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=mock-anon-key-here

# Mock Stripe Configuration (no real connection)
VITE_STRIPE_PUBLISHABLE_KEY=pk_test_mock-publishable-key
VITE_STRIPE_SECRET_KEY=sk_test_mock-secret-key

# Application Configuration
VITE_NODE_ENV=development
VITE_APP_URL=http://localhost:5173

# Mock Email Configuration
VITE_RESEND_API_KEY=re_mock-resend-api-key

# Mock Error Monitoring
VITE_SENTRY_DSN=https://mock-sentry-dsn@sentry.io/project-id

# Mock AI Features
VITE_OPENAI_API_KEY=sk-mock-openai-api-key
```

## Key Features to Port (Frontend Only)

### 1. Glassmorphism Design System

- **Dark gradients** with blue/purple themes
- **Backdrop blur** and transparency effects
- **Premium gold** accent colors (#d99e34)
- **Glass effects**: rgba(255, 255, 255, 0.1) backgrounds
- **Animations**: fadeInUp, float, pulse-slow
- **Responsive design** with mobile-first approach

### 2. Core Components to Recreate

#### Layout Components

- **Navigation.tsx**: Main nav with glassmorphism styling, auth state
- **Layout.tsx**: Base layout with SEO and meta
- **SecureLayout.tsx**: Authenticated layout with backdrop blur

#### Calendar System

- **CalendarGrid.tsx**: Monthly/weekly grid views
- **EventCard.tsx**: Event display cards with hover effects
- **CalendarHeader.tsx**: Navigation and view controls
- **EventList.tsx**: List view of events
- **TrendingEvents.tsx**: Popular events section

#### Ticketing Interface

- **TicketCheckout.tsx**: Main ticket purchasing UI
- **TicketTypeModal.tsx**: Ticket type selection modal
- **QuickTicketPurchase.tsx**: Simplified purchase flow

#### Event Management

- **EventManagement.tsx**: Multi-tab event administration
- **TabNavigation.tsx**: Tab interface for manage pages
- **Various tabs**: Tickets, Venue, Orders, Attendees, Analytics

#### Admin Dashboard

- **SuperAdminDashboard.tsx**: Platform administration
- **Analytics components**: Revenue, events, user stats

### 3. Mock Data Structure

#### Events

```typescript
interface Event {
  id: string;
  title: string;
  description: string;
  date: string;
  venue: string;
  slug: string;
  image_url?: string;
  ticket_types: TicketType[];
  organization: Organization;
}
```

#### Ticket Types

```typescript
interface TicketType {
  id: string;
  name: string;
  description?: string;
  price: number;
  quantity_available?: number;
  is_active: boolean;
  presale_start_time?: string;
  general_sale_start_time?: string;
}
```

#### Organizations

```typescript
interface Organization {
  id: string;
  name: string;
  platform_fee_type?: string;
  platform_fee_percentage?: number;
  stripe_account_id?: string;
}
```

## Tech Stack

### Core Dependencies

- **React 18** with TypeScript
- **Vite** for fast development and building
- **React Router v6** for client-side routing
- **Tailwind CSS 4** with custom glassmorphism config
- **Lucide React** for consistent icons
- **Date-fns** for date manipulation
- **Zustand** for lightweight state management

### UI/Animation Libraries

- **Framer Motion** for smooth animations
- **React Hook Form** for form handling
- **Zod** for form validation
- **React Query/TanStack Query** for mock API state

### Development Tools

- **TypeScript** with strict configuration
- **ESLint** with React/TypeScript rules
- **Prettier** for code formatting
- **Vitest** for unit testing

## Development Commands

```bash
# Development
npm run dev          # Start development server at localhost:5173
npm run build        # Build for production
npm run preview      # Preview production build

# Code Quality
npm run lint         # Run ESLint
npm run lint:fix     # Fix ESLint issues
npm run typecheck    # TypeScript type checking

# Testing
npm run test         # Run unit tests
npm run test:ui      # Run tests with UI
```

## Key Design Patterns

### Glassmorphism Theme System

```css
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

.glass-navigation {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
  backdrop-filter: blur(20px);
}
```

### Component Architecture

- **Atomic Design**: Atoms (Button, Input) → Molecules (Form, Card) → Organisms (Navigation,
  EventGrid)
- **Composition over inheritance**
- **Custom hooks** for shared logic
- **Context providers** for global state

### State Management

- **Zustand stores** for different domains (auth, events, tickets)
- **React Query** for server state simulation
- **Local state** with useState/useReducer for component state

## CLAUDE.md Instructions for Future Sessions

```markdown
# React Rebuild Project - Frontend Only

## Important Notes

- This is a LEARNING PROJECT - frontend only, no live APIs
- Uses MOCK DATA instead of real database connections
- Focuses on recreating UI/UX from original BCT Whitelabel project
- Glassmorphism design system with dark themes and blur effects

## Project Goals

- Learn React patterns and modern frontend architecture
- Practice component composition and state management
- Implement responsive design with Tailwind CSS
- Create smooth animations and interactions

## Key Commands

- `npm run dev` - Development server
- `npm run build` - Production build
- `npm run lint` - Code quality checks

## Architecture

- React 18 + TypeScript + Vite
- React Router for navigation
- Zustand for state management
- Tailwind CSS with custom glassmorphism theme
- Mock data services (no real APIs)

## Do NOT

- Set up real database connections
- Use live API keys or services
- Create actual payment processing
- Implement real authentication

## DO

- Focus on UI/UX recreation
- Use mock data and simulated API calls
- Implement responsive design
- Create smooth animations
- Follow component composition patterns
```

## Implementation Priority

### Phase 1: Foundation

1. ✅ Project structure setup
2. ✅ Environment configuration
3. ⬜ Vite + React + TypeScript scaffold
4. ⬜ Tailwind CSS with glassmorphism config
5. ⬜ Basic routing setup

### Phase 2: Core Layout

1. ⬜ Layout components (Navigation, Layout, SecureLayout)
2. ⬜ Base UI components (Button, Input, Modal, Card)
3. ⬜ Theme system implementation
4. ⬜ Mock data structure

### Phase 3: Main Features

1. ⬜ Calendar interface with event cards
2. ⬜ Ticket checkout UI (no real payments)
3. ⬜ Event management dashboard
4. ⬜ Admin interface recreation

### Phase 4: Polish

1. ⬜ Animations and micro-interactions
2. ⬜ Mobile responsiveness
3. ⬜ Accessibility improvements
4. ⬜ Performance optimization

## Next Steps

1. Run `npm create vite@latest . --template react-ts` in this directory
2. Install dependencies (React Router, Tailwind, Zustand, etc.)
3. Set up Tailwind config with glassmorphism utilities
4. Create basic project structure
5. Implement mock data services
6. Start with layout components

## Success Criteria

- ✅ Beautiful glassmorphism UI matching original design
- ✅ Responsive design working on all devices
- ✅ Smooth animations and interactions
- ✅ All major components recreated in React
- ✅ Clean, maintainable code architecture
- ✅ No database dependencies - pure frontend learning project