> For the complete documentation index, see [llms.txt](https://splflip.gitbook.io/splflip/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://splflip.gitbook.io/splflip/frontend-architecture.md).

# Frontend Architecture

#### Technical Stack

The frontend is built using React with several key technologies:

* Tailwind CSS for styling
* WebSocket for real-time updates
* Solana Web3.js for blockchain interactions

#### Component Structure

1. **Core Components**
   * `SPLFlip`: Main application component
   * `TokenSelector`: Token selection interface
   * `GameDetailsModal`: Detailed game view
   * `CompletedGameItem`: Game history display
   * `Toast`: Notification system
2. **UI Features**
   * Responsive design with mobile support
   * Real-time game status updates
   * Interactive toast notifications
   * Modal-based game details
   * Dynamic token balance display
3. **State Management**
   * Game state tracking (open/active/completed)
   * User wallet connection state
   * Token balances and selection
   * Transaction status monitoring
   * WebSocket connection state
4. **User Interaction Flow**
   * Wallet connection handling
   * Game creation interface
   * Game joining process
   * Result display
   * Transaction confirmation

#### Key Features

1. **Wallet Integration**
   * Multiple wallet support
   * Balance checking
   * Transaction signing
   * Token account management
2. **Real-Time Updates**
   * WebSocket connection management
   * Game state synchronization
   * Balance updates
   * Transaction notifications
3. **Error Handling**
   * User feedback system
   * Transaction error recovery
   * Connection error handling
   * State recovery mechanisms
4. **Responsive Design**
   * Mobile-first approach
   * Adaptive layouts
   * Touch-friendly interfaces
   * Cross-browser compatibility

The frontend architecture focuses on providing a seamless user experience while maintaining robust communication with the backend and blockchain infrastructure. The component-based structure allows for easy maintenance and scalability, while the real-time update system ensures users always have the latest game information.