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
• Source Code: GH Repo

⚙️ Getting Started

Prerequisites

• Node.js and npm: Download and install Node.js from NodeJS. This will also install npm.
• Convex: Creat a Convex account if you already not Convex.dev.
• Clerk: Create a Clerk account for user authentication and get your Secret keys.
• Liveblocks: Make sure to have an account with Liveblocks and get your secret key for real-time collaboration.

1. Clone the Repository:

   git clone https://github.com/laxman-rathod/Miro-Clone.git

2. Navigate to the project directory:

   cd Miro-Clone

3. Install dependencies:

   npm install

4. Create a .env.local file in the root directory and add the following environment variables:

CONVEX_DEPLOYMENT=<your-convex-deployment-url>
NEXT_PUBLIC_CONVEX_URL=<your-convex-url>
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your-clerk-publishable-key>
CLERK_SECRET_KEY=<your-clerk-secret-key>
LIVEBLOCKS_SECRET_KEY=<your-liveblocks-secret-key>

5. Run the development server:

npx convex dev
npm run dev

The application should now be running at 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.