Tech Stack

• Framework: Next.js
• UI Components: shadcn/ui
• Backend: convex
• Real-time Collaboration: liveblocks

Deployment

The application is deployed on Vercel. Check it out [here]

Getting Started

Follow these instructions to set up the project locally.

Prerequisites

Make sure you have the following installed on your system:

• Node.js (>= 14.x)
• npm

Installation

1. Clone the repository:

   git clone https://github.com/jatin1510/miro-clone
   cd miro-clone

2. Install dependencies:

   npm install

3. Configure environment variables:

   Create a .env.local file in the root directory and add your configuration variables. You can explore the .env.example file for more information.

4. Clerk Setup

   • Enable Organization from the "Organization settings"
   • Add JWT Template named "convex"
   • Make sure to have org_id and org_role inside Claims
   • Don't forget to add issuer into the auth.config.js inside /convex.

5. Prepare the convex functions:

   npx convex dev

6. Run the development server:

   npm run dev

   Open http://localhost:3000 with your browser to see the result.

Features

• Real-time collaboration: Multiple users can interact on the whiteboard simultaneously.
• Interactive UI: Intuitive and responsive user interface for a seamless experience.
• Scalable backend: Powered by Convex for managing backend logic and data storage.
• Live updates: Instant updates using Liveblocks for real-time synchronization.

New Features

• Keyboard Shortcuts:

  • Move Selected Layers: Use keyboard shortcuts to move selected layers within the Canvas component.
  • Duplicate Layers: Duplicate selected layers with Ctrl + D.
  • Focus Search Input: Keyboard shortcut to focus on the search input field.

• Enhanced Selection Tool:

  • Improved Layout and Functionality: Added a duplicate icon in the selection box for better usability.
  • Select Fully Inside Rectangle: Layers are only selected if they are fully inside the selection rectangle.
  • Shortcuts for Layer Insertion: Added keyboard shortcuts for selection and insertion in the toolbar

• Board Creation Limit:

  • User can make only 5 boards within an organization

• Reset Camera:

  • When the user scrolls through the canvas, a button at the right bottom appears through which the user can reset the camera position

• Color Picker:

  • User now has infinite possible combinations of the layer they want. Color picker also has the debouncing technique to prevent the numerous undo/redo actions

• Export as a PNG:

  • Users can now export their board as a PNG image file. This functionality allows users to save their work and share it with others easily.

• Bug Fixes:

  • Search and Favorite Functionality: Fixed the search and favorite functionality by using useSearchParams.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

---