ProjectsSyncSketch
01 / Project Details
LiveReal-Time Collaboration Platform
SyncSketch
SyncSketch is a real-time collaboration product designed for teams that need to think visually, move quickly, and stay aligned inside a single shared workspace. It combines an infinite canvas, live multiplayer presence, persistent board state, and integrated chat into an experience that feels immediate for users and dependable under the hood.
RoleFull-Stack Engineer
Duration4 Weeks
ClientPersonal Project
Year2025
Project Summary
A fast, intuitive collaboration MVP for creative teams — real-time drawing, multi-user presence, persistent chat, and production-ready auth on modern cloud.
02 / Snapshot
Live Production Deployment
Deployed on Vercel and Render with Neon, Upstash, and Google OAuth integrated into a CI-gated release flow.
Realtime Canvas + Chat
Multi-user drawing, presence broadcasting, and persisted chat run together inside a single board experience.
Resilient Sync Model
Local-first interaction, deterministic op broadcasting, snapshot persistence, reconnect resync, and client-side de-duplication keep sessions reliable.
Product Polish
Responsive dashboard flows, branded auth, board management, profile management, and strong UX details elevate the MVP beyond a prototype.
03 / Overview
A collaborative canvas experience that feels fast, focused, and ready to ship.
SyncSketch was shaped as more than a drawing surface. The product had to feel usable as an actual team workspace: simple to enter, quick to share, visually clear during live collaboration, and technically strong enough to recover from disconnects, reloads, and multi-user activity without falling apart.
Challenge
Most whiteboard-style demos prove the interaction layer but stop short of a real product experience. The challenge here was to deliver the full stack around collaboration, not just the canvas itself: user auth, board creation, shareable sessions, persistent state, reconnect behavior, responsive layouts, and deployment architecture that could stand up in a live environment.
Solution
I designed and implemented SyncSketch as a complete board-based collaboration system. The frontend delivers an infinite canvas with live tools, chat, presence, and board management. The backend validates and broadcasts realtime ops, persists snapshots and messages, rate-limits critical flows, and supports horizontal scale through Redis-backed Socket.IO broadcasting. On top of that, the app was deployed with production auth, subdomain-safe session handling, and CI/CD sequencing that deploys backend infrastructure before frontend releases.
04 / Stack & Scope
What shipped
Tech Stack
Next.jsReactTypeScriptTailwind CSSZustandreact-konvaNestJSSocket.IOPrismaPostgreSQLRedisTurborepoZod
Team Context
Solo Full-Stack Engineer
Deliverables
- Responsive board dashboard with grid/list switching
- Create-board flow with icons and participant limits
- Infinite canvas with select, pencil, rectangle, ellipse, arrow, and text tools
- Styling controls for stroke, fill, and layer order
- Shareable board URLs and collaborative session entry
- Realtime chat panel with participant awareness
- Production-ready auth flow across frontend and API subdomains
- Automated CI and staged production deployment workflow
Key Highlights
- User actions apply immediately on the client, then synchronize through validated Socket.IO operations.
- Board snapshots and recent chat history are stored so sessions survive refreshes and reconnects.
- Participants, cursors, tool states, and board-level chat make collaboration legible in real time.
- The sync model favors deterministic behavior and maintainability, using snapshots instead of a more complex ops-only persistence strategy.
- Live deployment, Google OAuth, cross-subdomain session behavior, and CI-gated releases.
05 / Process
From product framing to final polish.
Step 01
Product Framing
Defined the experience around a board-centric workflow instead of a bare canvas. Users authenticate, create a board, invite others by link, collaborate live, and return later to a persisted workspace. That framing made the product feel structured, not experimental.
Step 02
Interaction System
Built the canvas around a focused set of high-utility tools: selection, freehand drawing, shapes, arrows, and text. Supporting controls for stroke, fill, zoom, reset, and layer ordering helped the interface feel usable for real sketching, wireframing, and ideation sessions.
Step 03
Realtime Architecture
Implemented a predictable synchronization model where clients emit validated operations, the server applies them to in-memory board state, and broadcasts updates back to connected participants. Presence and chat run alongside this flow, while client-side op de-duplication helps prevent double-apply issues during reconnects or broadcast races.
Step 04
Persistence & Recovery
Used snapshot-based persistence to keep the MVP robust without overcomplicating the backend. Dirty boards are saved on debounce, periodically while active, and one final time when rooms empty out. On reconnect, the client re-fetches state, re-joins the room, and restores collaboration context.
Step 05
Production Readiness
Extended the build beyond local functionality with production authentication, Google OAuth, cloud deployment, CI validation, and backend-first rollout sequencing. This made the project credible as a shipped product case study, not just an isolated technical demo.
06 / Gallery
Selected product views
07 / Closing Notes
SyncSketch focuses on making collaboration feel immediate for users and dependable for teams evaluating the product behind the interface.
Product-Led Thinking
The experience starts with board management, onboarding, and usability, not just the canvas engine.
Strong Technical Depth
Realtime ops, presence broadcasting, snapshot persistence, chat storage, reconnect handling, and scalable Socket.IO infrastructure are all part of the implementation.
Live Delivery Maturity
Production deployment, CI/CD gating, Google OAuth, and cloud infrastructure give the project real-world credibility.
08 / Next Project