Built with Next.js, Turborepo, Canvas, WebSocket, and ShadCN UI Create, Collaborate & Innovate — all in real-time.
- 🎨 Interactive whiteboard with pencil drawing
- 🤝 Real-time collaboration with WebSockets
- 🔐 JWT-based authentication (Sign In / Sign Up)
- 🖥️ Full canvas preview with room joining by slug
- 🌗 Dark/light mode toggle (ShadCN-powered)
- 📬 Email capture form and responsive footer
- 🔧 Built using Turborepo for modularity and speed
- Frontend: React, Next.js, Tailwind CSS, ShadCN UI
- Backend: Node.js, Express, Socket
- Auth: JWT + Cookie-based session management
- Canvas: HTML5 Canvas API with freehand drawing
- Monorepo: Turborepo + Shared Configurations
Login, draw with friends in real-time, and watch as ideas come to life — all inside your browser.
# 1. Clone the repo
git clone https://github.com/smartcraze/sketchkaro
# 2. Move into the directory
cd sketchkaro
# 3. Install dependencies (Turborepo handles all workspaces)
bun install
# 4. Start dev environment
bun dev🧠 Pro Tip: Use bun build to test production builds across the monorepo.
- Authenticated users can create or join rooms via slug
- The backend ensures secure room creation & user tracking
- Frontend renders real-time drawing with multi-user presence
- JWT stored in cookies
- Login state is reactive across components (Navbar, Hero, etc.)
- Protected routes and room access verification
apps/
web/ → Frontend (Next.js)
http-backend/ → Express backend http
ws-backend/ → Bun inbuilt Websocket
packages/
ui/ → ShadCN components
config/ → Tailwind + tsconfig + eslint
db/ → backend Primsa
common → common zod schema
backend-commom → backend common config
public/ → Static assets
Made with ❤️ by Suraj Vishwakarma