# replit.md

## Overview

This is a collaborative pixel art application similar to r/place, where multiple users can place colored pixels on a shared canvas in real-time. The application features a React frontend with a Node.js/Express backend, real-time WebSocket communication for live updates, and PostgreSQL database storage using Drizzle ORM. Users can select colors from a palette, place pixels with cooldown restrictions, and see other users' pixel placements instantly. The system includes administrative configuration options for canvas dimensions, cooldown periods, and event settings.

## User Preferences

Preferred communication style: Simple, everyday language.

## System Architecture

**Frontend Architecture**
- React 18 with TypeScript using Vite as the build tool
- Component architecture using shadcn/ui components built on Radix UI primitives
- TailwindCSS for styling with custom CSS variables for theming
- TanStack Query for server state management and caching
- Wouter for lightweight client-side routing
- Custom hooks for WebSocket connections and mobile detection

**Backend Architecture**  
- Express.js server with TypeScript support
- RESTful API endpoints for pixel operations, canvas configuration, and recent activity
- WebSocket server for real-time pixel placement notifications and user count tracking
- Abstracted storage interface (IStorage) with in-memory implementation for development
- Middleware for request logging and error handling

**Database Design**
- PostgreSQL database with Drizzle ORM for type-safe database operations  
- Three main tables: pixels (pixel placements), canvas_config (system settings), user_cooldowns (rate limiting)
- Drizzle-zod integration for runtime schema validation
- Migration support through drizzle-kit

**Real-time Communication**
- WebSocket connections for live pixel placement updates
- Broadcasting system for notifying all connected clients of new pixels
- User connection count tracking and real-time display
- Automatic reconnection handling on the client side

**State Management**
- TanStack Query for server state caching and synchronization
- Local state for UI interactions (color selection, zoom controls, grid visibility)
- WebSocket message handling for real-time updates without full data refetches

**User Experience Features**
- Interactive canvas with zoom and pan capabilities
- Color palette with 16 predefined colors
- Cooldown system to prevent pixel spam
- Recent placements tracking and display
- Grid overlay toggle for precise pixel placement
- Toast notifications for user feedback

## External Dependencies

**Core Framework Dependencies**
- React 18 with TypeScript for the frontend framework
- Express.js for the backend HTTP server
- WebSocket (ws) library for real-time communication

**Database and ORM** 
- PostgreSQL as the primary database (configured via DATABASE_URL)
- Drizzle ORM for database operations and migrations
- @neondatabase/serverless for PostgreSQL connectivity

**UI and Styling**
- Radix UI primitives for accessible component foundations
- TailwindCSS for utility-first styling
- Lucide React for consistent iconography
- shadcn/ui component library for pre-built components

**Development and Build Tools**
- Vite for frontend development and building
- esbuild for backend compilation
- tsx for TypeScript execution in development
- PostCSS and Autoprefixer for CSS processing

**State Management and Data Fetching**
- TanStack React Query for server state management
- React Hook Form with Zod resolvers for form validation

**Utility Libraries**
- date-fns for date manipulation
- clsx and tailwind-merge for conditional styling
- nanoid for unique ID generation
- Zod for runtime schema validation