This is a Real-Time Collaborative Whiteboard built with Next.js, React, and TailwindCSS. It enables users to collaborate in real-time, allowing multiple users to draw, add text, shapes, sticky notes, and use various tools to create content together.
- 🛠️ Whiteboard from scratch
- 🧰 Toolbar with Text, Shapes, Sticky Notes & Pencil
- 🪄 Layering functionality
- 🎨 Coloring system
- ↩️ Undo & Redo functionality
- ⌨️ Keyboard shortcuts
- 🤝 Real-time collaboration
- 💾 Real-time database
- 🔐 Auth, organisations and invites
- ⭐️ Favoriting functionality
- 🌐 Built with Next.js 14 framework
- 💅 Styled with TailwindCSS & ShadcnUI
This whiteboard application is packed with features such as real-time database support, a wide array of drawing tools including shapes like rectangles and ellipses, sticky notes, and freehand drawing using the pencil tool. It utilizes cutting-edge technologies such as Next.js 14, Clerk for authentication, Convex for real-time collaboration, and LiveBlocks for additional functionality.
To run this project locally, follow these steps:
- Clone this repository.
- Install dependencies using
npm install. - Start the development server using
npm run dev.
- Access the application in your browser.
- Sign in or create an account to start using the whiteboard.
- Use the toolbar to select drawing tools, change colors, and perform various actions.
- Collaborate in real-time with other users by sharing the whiteboard link.
- Next.js 14
- React
- TailwindCSS
- ShadcnUI
- Clerk (for authentication)
- Convex (for real-time collaboration)
- LiveBlocks (for additional features)
Contributions are welcome! Feel free to open an issue or submit a pull request to suggest new features, report bugs, or make improvements to the codebase.
This project is licensed under the MIT License.
