🔒 Intelligent Focus Locks (Anti-Collision): If a teammate is editing cards, configuring properties, or appending discussions, the card is locked system-wide with a glowing visual banner to prevent editing collisions.
📦 Express-WebSocket State Machine: High-performance socket pipelines sync all structural change actions—creation, descriptions, priority shifts, comment additions, and drag motions—globally.
💬 Integrated Chat Forums: Each room coordinates an isolated workspace chat to talk in real-time alongside Kanban columns.
🔑 Dynamic Room Routing: Simply change the ?room= link query or inputs to create isolated spaces for separate teams.
🤖 Co-Architecting with Gemini on AI Studio
Building a truly real-time interactive coordinate tracking space is notoriously tricky to scale and refine. Gemini acted as a world-class senior developer, helper, and designer at every stage:
- Architecture Design: Gemini drafted the structured type interfaces and strict client/server communication state schemas, ensuring that backend events maps to the unified source of truth.
- WebSocket Integration: Gemini successfully avoided the classic React WebSocket footprint trap (re-instantiating connections on state changes) by leveraging persistent
useRef handlers, combining robust fallback backoff reconnection logic.
- Performance Optimization: To keep cursor broadcast packets lightweight, Gemini suggested a
45ms throttle on pointer updates, reducing websocket server load by up to 80% while maintaining premium human-eye fluidity.
- No Mock Infrastructure: Guided by AI Studio's architectural guidelines, Gemini crafted a real Node/Express backend on disk instead of simple mockup timeouts, giving us live server and client synchronizations dynamically served on Cloud Run.
🛠️ Tech Stack & Implementation Details
- Frontend: React 19, Tailwind CSS, Lucide icons, and
motion (Framer) for fluid task rearrangements.
- Backend: Node.js/TypeScript running an Express server bound with robust memory states, hosted on Google's scalable Cloud Run container environment.
- Persistence & Sync: Raw ws WebSocket servers combined with robust JSON snapshots saved automatically to local data volumes matching active operations.
💭 Reflection & Google I/O Appreciation
Developing this project using AI Studio Build has been an incredible experience. The ability to express intent naturally and immediately receive clean TypeScript modules, matching proper bundler builds and actual socket integrations, makes it incredibly fun to take products from simple sketches to live, ready-to-test systems.
Let me know what you think by jumping into my collaborative workspace room! Let's build together. 🤖
Built with ♥ for the Google I/O Challenge 2026.