mregosar/place_maxlan
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
de5e7bfc6c
place_maxlan/replit.md
freesemar93 de5e7bfc6c Add basic structure for a collaborative pixel art website 
Adds the core project structure, including configuration files, a basic HTML page, and the main application component. It also lays the groundwork for the canvas, color palette, and configuration modal functionalities.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0385ea33-cde8-4bbd-8fce-8d192d30eb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/870d08ce-da3b-4822-9874-c2fe2b7628b1/0385ea33-cde8-4bbd-8fce-8d192d30eb41/Vuy7IOw
2025-08-18 12:13:30 +00:00

3.7 KiB
Raw Blame History

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