SyncSlate is an innovative web application designed to facilitate collaborative drawing experiences in real-time. With SyncSlate, users can unleash their creativity by sketching, doodling, and brainstorming together seamlessly, regardless of their physical location.
Frontend: Next JS 14, React, TypeScript, Shadcn UI, Tailwind CSS
Backend: Convex
Authentication: Clerk Auth
Web-Sockets: liveblocks.io
- Create organizations and invite team members seamlessly.
- Collaborate with team members seamlessly in whiteboard interface.
- Real-time collaboration using the real-time Convex database.
- User authentication, organization creation, and management with Clerk Auth.
- Responsive design with TailwindCSS.
- State management using Zustand.
These instructions will help you set up and run the project on your local machine for development and testing purposes.
- Clone the repository:
git clone https://github.com/sanglap13/sync-slate.git
cd your-repo-name- Install the required dependencies:
npm install- Configure environmental variables:
Create a
.env.localfile in the project root and set the necessary environment variables.
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
LIVEBLOCKS_SECRET_KEY=
- Run the development server:
npx convex dev
npm run dev- Start building and customizing your SyncSlate!