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

View file

@ -1,18 +1,50 @@
{
"dependencies": {
"cookie-parser": "^1.4.6",
"express": "^4.18.2",
"fs": "^0.0.1-security",
"socket.io": "^4.7.1"
},
"name": "collaborative-pixel-art",
"version": "1.0.0",
"main": "server.js",
"name": "gaplace",
"version": "2.0.0",
"description": "Modern collaborative pixel art platform with real-time collaboration and infinite canvas",
"private": true,
"workspaces": [
"backend",
"frontend",
"shared"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"dev": "node scripts/start-dev.js",
"dev:old": "concurrently \"npm run dev:backend\" \"npm run dev:frontend\"",
"dev:backend": "npm run dev --workspace=backend",
"dev:frontend": "npm run dev --workspace=frontend",
"build": "npm run build --workspace=backend && npm run build --workspace=frontend",
"start": "npm run start --workspace=backend",
"test": "npm run test --workspaces",
"lint": "npm run lint --workspaces",
"type-check": "npm run type-check --workspaces",
"clean": "npm run clean --workspaces && rm -rf node_modules",
"setup": "node scripts/setup.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
"devDependencies": {
"concurrently": "^9.1.2",
"@typescript-eslint/eslint-plugin": "^8.22.0",
"@typescript-eslint/parser": "^8.22.0",
"eslint": "^8.57.1",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1",
"prettier": "^3.4.2",
"typescript": "^5.7.3"
},
"engines": {
"node": ">=18.0.0",
"npm": ">=9.0.0"
},
"keywords": [
"pixel-art",
"collaborative",
"real-time",
"canvas",
"websocket",
"react",
"nextjs",
"typescript"
],
"author": "GaPlace Team",
"license": "MIT"
}