https://github.com/lra8dev/miro-clone
🎨This repository hosts a Miro clone, a collaborative real-time whiteboard that replicates the core functionality of the popular collaborative tool, offering a seamless, real-time whiteboard experience.
https://github.com/lra8dev/miro-clone
clerkjs convex liveblocks miro-clone nextjs reactjs realtime-collaboration shadcn-ui tailwindcss typescript whiteboard
Last synced: 2 months ago
JSON representation
🎨This repository hosts a Miro clone, a collaborative real-time whiteboard that replicates the core functionality of the popular collaborative tool, offering a seamless, real-time whiteboard experience.
- Host: GitHub
- URL: https://github.com/lra8dev/miro-clone
- Owner: lra8dev
- License: mit
- Created: 2024-07-15T19:11:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-29T21:52:45.000Z (about 1 year ago)
- Last Synced: 2025-07-27T06:00:33.598Z (2 months ago)
- Topics: clerkjs, convex, liveblocks, miro-clone, nextjs, reactjs, realtime-collaboration, shadcn-ui, tailwindcss, typescript, whiteboard
- Language: TypeScript
- Homepage: https://miro-clone-w.vercel.app
- Size: 41.9 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Miro-Clone: Your Collaborative Whiteboard, Reimagined 🎨
A powerful, real-time collaborative whiteboard application built with cutting-edge web technologies.
## 🍁 Overview
This Miro clone replicates the core functionality of the popular collaborative tool, offering a seamless, real-time whiteboard experience. It's designed to showcase the capabilities of modern web development frameworks and services.
## 🚀 Features
- **Real-time Collaboration:** Seamlessly collaborate with others on the whiteboard in real-time.
- **Whiteboard Functionality:** Create and interact with shapes, sticky notes, and freehand drawings.
- **Favorite Boards:** Keep your most important boards easily accessible with our favoriting system.
- **Comprehensive Toolbar:** Effortlessly add Text, Shapes (Rectangles & Ellipses), Sticky Notes, and freehand drawings with the intuitive Pencil tool.
- **Seamless Layering:** Organize your thoughts and ideas with precision using our intuitive layering system.
- **Vibrant Coloring:** Bring your whiteboard to life with a rich color palette for all your elements.
- **Undo & Redo:** Made a mistake? No problem! Our undo/redo functionality has you covered.
- **Keyboard Shortcuts:** Work faster and smarter with handy keyboard shortcuts for common actions.
- **Persistent Storage:** Data is saved and synced in real-time using a robust database solution.
- **User Authentication:** Secure user management and authentication with Clerk.
## 💻 Technologies Used
- **Next.js 14:** A React framework for building performant and SEO-friendly web applications.
- **React.js:** A declarative JavaScript library for building dynamic and interactive user interfaces.
- **Tailwind CSS:** A utility-first CSS framework for rapidly building custom designs.
- **TypeScript:** Adding type safety and improved code maintainability.
- **Clerk:** A comprehensive authentication and user management platform.
- **Convex:** A serverless platform for building and deploying real-time applications.
- **Liveblocks:** A real-time collaboration library for building collaborative applications.
## 🪴 Deployment
- **Live Preview:** [Miro-Clone](https://miro-clone-w.vercel.app)
- **Source Code:** [GH Repo ](https://github.com/laxman-rathod/Miro-Clone)
## ⚙️ Getting Started
### Prerequisites
- **Node.js and npm:** Download and install Node.js from [NodeJS](https://nodejs.org). This will also install npm.
- **Convex:** Creat a [Convex](https://convex.dev) account if you already not Convex.dev.
- **Clerk:** Create a [Clerk](https://clerk.com) account for user authentication and get your [Secret keys](https://clerk.com/docs/references/nextjs/overview).
- **Liveblocks:** Make sure to have an account with [Liveblocks](https://liveblocks.io) and get your secret key for real-time collaboration.
1. **Clone the Repository:**
```bash
git clone https://github.com/laxman-rathod/Miro-Clone.git
```
2. **Navigate to the project directory:**
```bash
cd Miro-Clone
```
3. **Install dependencies:**
```bash
npm install
```
4. **Create a .env.local file in the root directory and add the following environment variables:**
```bash
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
LIVEBLOCKS_SECRET_KEY=
```
5. **Run the development server:**
```bash
npx convex dev
npm run dev
```
The application should now be running at [http://localhost:3000](http://localhost:3000).
## 🤝 Contributing
Contributions are welcome! Please open an issue or submit a pull request.
To contribute:
Fork the repository
Create your feature branch (`git checkout -b feature/your-feature`)
Commit your changes (`git commit -m 'feat: add your feature'`)
Push to the branch (`git push origin feature/your-feature`)
Open a pull request
## 📄 License
This project is open source and available under the [License](LICENSE).