Markdown
A high-performance, multi-user drawing application built using vanilla TypeScript and HTML5 Canvas, synchronized via a real-time Node.js WebSocket layer.
Follow these quick steps to launch both the frontend client environment and backend synchronization cluster:
- Install Dependencies
Run the following command in the project root directory to configure required node modules:
npm install
Boot the Application Environment
Frontend Server: Run npm run dev to launch the Vite development server (typically serves on http://localhost:5173).
Backend Synchronization Cluster: Run npm run start to execute the Node/TypeScript room broker service (runs on http://localhost:3000).
👥 Testing Multiple Users Local-Simulations Open your primary web browser window to http://localhost:5173/?room=interview-room.
Open a separate Incognito browser terminal or an alternative browser program side-by-side to the exact same URL pattern.
Observe real-time cursor indicators, live paint coordinate streaming, and conflict-isolated global Undo/Redo tracking instantly.
📊 Technical Metrics & Evaluation Constraints Time Invested: ~12-16 Engineering Hours
Known Limitations:
Background erasing is drawn via explicit stroke color masking (#FFFFFF) to bypass heavy pixel re-computation pipelines.
History arrays are stored explicitly in RAM memory blocks on the server instance. High system lifecycle periods would require redis-backed storage engines.