Chess Web App

A modern chess web application built with Next.js, TypeScript, and shadcn/ui.

Project Structure

This is a monorepo with the following packages:

• packages/web - Next.js 14+ web application with TypeScript and App Router
• packages/engine - Shared chess logic and types

Tech Stack

• Framework: Next.js 14+ with App Router
• Language: TypeScript
• UI Components: shadcn/ui with custom chess theme
• Styling: Tailwind CSS with custom design tokens
• Package Manager: bun with workspaces
• Fonts: Inter (primary), JetBrains Mono (monospace)

Design System

• Primary Colors: Deep navy (#1A1A2E), Purple accent (#7C3AED)
• Secondary Colors: Teal accent (#2BC6B3)
• Chess Colors: Custom light/dark square colors
• Border Radius: 16px (rounded-2xl) for modern rounded design
• Typography: Inter font family with optimized weights

Development

Prerequisites

• bun (latest version)
• Node.js 18+

Getting Started

1. Install dependencies:

   bun install

2. Start development server:

   bun run dev

3. Build for production:

   bun run build

Available Scripts

• bun run dev - Start development server
• bun run build - Build all packages
• bun run start - Start production server
• bun run lint - Run ESLint across all packages
• bun run type-check - Run TypeScript type checking
• bun run test - Run tests across all packages
• bun run clean - Clean build artifacts

Package Scripts

Web App (packages/web)

• bun run dev - Start Next.js development server
• bun run build - Build Next.js application
• bun run start - Start production server
• bun run lint - Run ESLint
• bun run type-check - TypeScript type checking

Chess Engine (packages/engine)

• bun run build - Build TypeScript to dist/
• bun run dev - Watch mode compilation
• bun run lint - Run ESLint
• bun run type-check - TypeScript type checking
• bun run test - Run Jest tests

Architecture

The application follows a clean architecture with:

1. Separation of Concerns: Chess logic is isolated in the engine package
2. Type Safety: Full TypeScript coverage with strict configuration
3. Modern UI: shadcn/ui components with custom chess theme
4. Responsive Design: Mobile-first approach with Tailwind CSS
5. Accessibility: Built-in accessibility features from shadcn/ui

Next Steps

This setup provides the foundation for implementing:

1. Chess game logic and move validation
2. Interactive chess board components
3. Game state management
4. Move history and notation
5. Responsive design and mobile support
6. Audio feedback system
7. Comprehensive testing suite

See the implementation tasks in .kiro/specs/chess-web-app/tasks.md for detailed development plan.