Modernize collaborative pixel art platform to production-ready architecture

Major refactor from simple HTML/JS app to modern full-stack TypeScript application:

## Architecture Changes
- Migrated to monorepo structure with workspaces (backend, frontend, shared)
- Backend: Node.js + Express + TypeScript + Socket.IO
- Frontend: Next.js 15.5 + React 19 + TypeScript + Tailwind CSS
- Shared: Common types and utilities across packages

## Key Features Implemented
- Real-time WebSocket collaboration via Socket.IO
- Virtual canvas with chunked loading for performance
- Modern UI with dark mode and responsive design
- Mock database system for easy development (Redis/PostgreSQL compatible)
- Comprehensive error handling and rate limiting
- User presence and cursor tracking
- Infinite canvas support with zoom/pan controls

## Performance Optimizations
- Canvas virtualization - only renders visible viewport
- Chunked pixel data loading (64x64 pixel chunks)
- Optimized WebSocket protocol
- Memory-efficient state management with Zustand

## Development Experience
- Full TypeScript support across all packages
- Hot reload for both frontend and backend
- Docker support for production deployment
- Comprehensive linting and formatting
- Automated development server startup

## Fixed Issues
- Corrected start script paths
- Updated environment configuration
- Fixed ESLint configuration issues
- Ensured all dependencies are properly installed
- Verified build process works correctly
This commit is contained in:
martin 2025-08-22 19:28:05 +02:00
commit 3ce5a97422
69 changed files with 17771 additions and 1589 deletions

76
docker-compose.yml Normal file
View file

@ -0,0 +1,76 @@
version: '3.8'
services:
redis:
image: redis:7-alpine
ports:
- "6379:6379"
volumes:
- redis_data:/data
command: redis-server --appendonly yes
healthcheck:
test: ["CMD", "redis-cli", "ping"]
interval: 5s
timeout: 3s
retries: 5
postgres:
image: postgres:15-alpine
environment:
POSTGRES_DB: gaplace
POSTGRES_USER: gaplace
POSTGRES_PASSWORD: password
ports:
- "5432:5432"
volumes:
- postgres_data:/var/lib/postgresql/data
healthcheck:
test: ["CMD-SHELL", "pg_isready -U gaplace"]
interval: 5s
timeout: 3s
retries: 5
backend:
build:
context: .
dockerfile: backend/Dockerfile
ports:
- "3001:3001"
environment:
- NODE_ENV=development
- REDIS_URL=redis://redis:6379
- POSTGRES_HOST=postgres
- POSTGRES_PORT=5432
- POSTGRES_DB=gaplace
- POSTGRES_USER=gaplace
- POSTGRES_PASSWORD=password
- JWT_SECRET=development-secret-change-in-production
depends_on:
redis:
condition: service_healthy
postgres:
condition: service_healthy
volumes:
- ./backend:/app
- /app/node_modules
command: npm run dev
frontend:
build:
context: .
dockerfile: frontend/Dockerfile
ports:
- "3000:3000"
environment:
- NEXT_PUBLIC_BACKEND_URL=http://localhost:3001
depends_on:
- backend
volumes:
- ./frontend:/app
- /app/node_modules
- /app/.next
command: npm run dev
volumes:
redis_data:
postgres_data: