A collaborative digital whiteboard for brainstorming, planning, and visual teamwork — in real time.
🔗 Live: sync-board-six.vercel.app
SyncBoard is a web-based collaborative whiteboard where teams can draw, organize ideas, and plan together on a shared infinite canvas. Built with React and Supabase, it syncs board state in real time so every collaborator sees changes as they happen.
| Feature | Description |
|---|---|
| 🎨 Infinite Canvas | Unrestricted drawing space for diagrams, wireframes, and idea maps |
| 🤝 Real-Time Collaboration | Changes sync live across all connected users via Supabase Realtime |
| 🖱️ Drag and Drop | Rearrange elements on the board using dnd-kit |
| ✨ Smooth Animations | Fluid UI transitions powered by Framer Motion |
| 🔐 Auth + Data Isolation | Supabase auth with row-level security per user/board |
| 🌗 Theme Support | Light and dark mode via next-themes |
| 📱 Responsive UI | Works across screen sizes with a clean shadcn/ui component base |
Frontend → React 18 + TypeScript
Build Tool → Vite
Styling → Tailwind CSS + shadcn/ui (Radix UI)
Animations → Framer Motion
Drag & Drop → dnd-kit
Data Fetching→ TanStack React Query
Backend → Supabase (PostgreSQL + Auth + Realtime)
Routing → React Router v6
Validation → Zod + React Hook Form
Testing → Vitest + Testing Library
Deployment → Vercel
src/
├── components/ # UI components (shadcn/ui + custom whiteboard elements)
├── pages/ # Route-level views (board, home, auth)
├── hooks/ # Custom React hooks
├── lib/ # Supabase client, utility functions
supabase/
└── migrations/ # PostgreSQL schema (PLpgSQL)
Gummadi Likith and Chiday Pravin Sai