# 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 from the official r/place 2022 color palette (32 colors), place pixels with cooldown restrictions, and see other users' pixel placements instantly. The system includes coordinate system with axis labels, live mouse tracking, automatic SVG exports, and configuration through config.cfg file only.

## User Preferences

Preferred communication style: Simple, everyday language.
Language: German (Deutsch) - User communicates in German and prefers responses in German.

## 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 using absolute positioning (no CSS grid)
- Official r/place 2022 color palette with 32 authentic colors arranged in 8x4 grid
- Coordinate system with X/Y axis labels showing every 10th position
- Real-time mouse coordinate tracking and display
- Cooldown system to prevent pixel spam
- Recent placements tracking and display
- Canvas size and zoom level information display
- Automatic SVG export every 60 seconds to exports/ directory
- Configuration exclusively through config.cfg file (no web interface)
- German user interface
- 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