dzinesco
f777ef760b
- Create detailed README.md with quick start and demo accounts - Add complete UI primitives documentation with examples - Document architecture patterns and design decisions - Update REBUILD_PLAN.md marking Phase 2 as complete - Include component usage guides and testing documentation - Document accessibility compliance and performance considerations Documentation provides complete developer onboarding experience with practical examples and architectural guidance. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
407 lines
13 KiB
Markdown
407 lines
13 KiB
Markdown
# 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 ✅ COMPLETE
|
|
|
|
1. ✅ Layout components (AppLayout, Header, Sidebar, MainContainer)
|
|
2. ✅ Complete UI primitives library (Button, Input, Select, Card, Alert, Badge)
|
|
3. ✅ Design token system with light/dark theme support
|
|
4. ✅ Mock authentication with role-based permissions
|
|
5. ✅ Error boundaries and loading states
|
|
6. ✅ Business domain components (EventCard, TicketTypeRow, OrderSummary)
|
|
7. ✅ WCAG AA accessibility compliance
|
|
8. ✅ Comprehensive Playwright test suite
|
|
9. ✅ Strict TypeScript and ESLint configuration
|
|
|
|
**Phase 2 Achievements:**
|
|
- **Design Token System**: Complete CSS custom property system for consistent theming
|
|
- **Component Library**: 15+ production-ready components with TypeScript interfaces
|
|
- **Accessibility**: WCAG AA compliant with 4.5:1+ contrast ratios throughout
|
|
- **Testing**: Full Playwright test suite with visual regression testing
|
|
- **Authentication**: Mock auth system with user/admin/super_admin roles
|
|
- **Error Handling**: Comprehensive error boundaries and graceful fallbacks
|
|
- **Developer Experience**: Strict linting, type checking, and hot reloading
|
|
- **Documentation**: Complete API documentation for all components
|
|
|
|
### Phase 3: Advanced Features (NEXT)
|
|
|
|
**Priority Features for Phase 3:**
|
|
1. ⬜ Advanced event management interface
|
|
- Multi-step event creation wizard
|
|
- Event editing with live preview
|
|
- Bulk ticket type management
|
|
- Venue seating chart integration
|
|
|
|
2. ⬜ Enhanced ticket purchasing flows
|
|
- Multi-ticket type selection
|
|
- Promo code and discount system
|
|
- Fee breakdown and payment simulation
|
|
- Order confirmation and receipt generation
|
|
|
|
3. ⬜ Analytics and reporting dashboard
|
|
- Real-time sales analytics
|
|
- Revenue projections and trends
|
|
- Attendee demographics
|
|
- Performance metrics
|
|
|
|
4. ⬜ Advanced UI patterns
|
|
- Drag-and-drop interfaces
|
|
- Data tables with sorting/filtering
|
|
- Advanced modals and overlays
|
|
- Interactive charts and graphs
|
|
|
|
### 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
|
|
|
|
### Phase 2 Complete ✅
|
|
- ✅ Complete design token system with automatic light/dark theme support
|
|
- ✅ Production-ready UI component library with TypeScript interfaces
|
|
- ✅ WCAG AA accessibility compliance (4.5:1+ contrast ratios)
|
|
- ✅ Comprehensive error handling with graceful fallbacks
|
|
- ✅ Mock authentication system with role-based permissions
|
|
- ✅ Responsive layout system working on all device sizes
|
|
- ✅ Full Playwright test suite with visual regression testing
|
|
- ✅ Strict TypeScript and ESLint configuration with zero errors
|
|
- ✅ Clean, maintainable code architecture following React best practices
|
|
- ✅ Complete developer documentation with usage examples
|
|
|
|
### Overall Project Goals
|
|
- ✅ Beautiful, modern UI with consistent theming
|
|
- ✅ Responsive design working on all devices
|
|
- ⬜ Smooth animations and micro-interactions
|
|
- ✅ All major components recreated in React
|
|
- ✅ Clean, maintainable code architecture
|
|
- ✅ No database dependencies - pure frontend learning project
|
|
- ✅ CrispyGoat quality standards - premium polish and developer experience
|