blackcanyontickets/reactrebuild0825/GEMINI.md

Project Overview

This is a React application for "Black Canyon Tickets", a platform for event ticketing. It's built with a modern tech stack including React 18, Vite, TypeScript, and Tailwind CSS. The project emphasizes a design token system for theming, a comprehensive component library, and WCAG AA accessibility compliance.

The application features a mock authentication system with three user roles: User, Admin, and Super Admin, each with different levels of access and permissions. It also includes a robust testing suite using Playwright for end-to-end tests.

Building and Running

Installation:

npm install

Development:

npm run dev

This will start the development server at http://localhost:5173.

Building for Production:

npm run build

Testing:

# Run all tests
npm run test

# Run tests with a visible browser
npm run test:headed

# Run tests with the Playwright UI
npm run test:ui

Development Conventions

• Styling: The project uses Tailwind CSS with a custom design token system. All colors, typography, and spacing are defined as CSS custom properties.
• Components: The project has a well-structured component library with reusable UI primitives and business components.
• Linting: ESLint is configured with strict rules for React and TypeScript. Run npm run lint to check the code.
• Testing: Playwright is used for end-to-end testing. Tests are located in the tests/ directory.
• Authentication: A mock authentication system is implemented with role-based access control.
• Error Handling: The application uses error boundaries to handle errors gracefully.
• Accessibility: The project is designed to be WCAG AA compliant, with a focus on keyboard navigation, screen reader support, and color contrast.