Deadlock API Frontend

A modern, high-performance web frontend for the Deadlock game API, built with React 19 and React Router 7. This application provides detailed game statistics, hero/item analysis, and an AI-powered chat interface.

🚀 Features

• Hero & Item Analytics: Comprehensive statistics, matchup data, and performance trends for all Deadlock heroes and items.
• AI Chat Assistant: Integrated chat interface with streaming responses and tool support.
• Patreon Integration: Tiered access and rate limiting based on Patreon membership.
• Data Visualization: Interactive charts for hero win rates, item buy timings, and more using Recharts.
• Secure & Robust: Cloudflare Turnstile integration and strict TypeScript implementation.

🛠 Tech Stack

• Framework: React 19 with React Router 7
• Build Tool: Vite 7
• Styling: Tailwind CSS 4 with tw-animate-css
• State Management: TanStack Query v5
• UI Components: Radix UI & custom Shadcn-inspired primitives
• Linting/Formatting: Biome
• Type Safety: TypeScript (Strict Mode)

📦 Getting Started

Prerequisites

• Node.js >= 20.0.0
• pnpm (preferred package manager)

Installation

pnpm install

Environment Setup

Copy the example environment file and fill in the required values:

cp .env.example .env

Development

Start the development server:

pnpm dev

Building for Production

pnpm build

The build output will be in build/client/.

Quality Control

pnpm lint      # Run Biome checks
pnpm fmt       # Format code with Biome
pnpm typecheck # Run TypeScript compiler checks

📂 Project Structure

• app/components: Reusable UI components and page-specific blocks.
• app/routes: File-based routing for different views (Heroes, Items, Chat, etc.).
• app/hooks: Custom React hooks for data fetching and state logic.
• app/lib: Utility functions and API client configurations.
• app/queries: TanStack Query hooks for server state.
• app/types: Shared TypeScript interfaces and types.

📄 License

Refer to the LICENSE file for details.