This project is a clone of the popular Miro whiteboard application, built using modern web technologies and tools. Follow the tutorial by Code with Antonio to create your own collaborative whiteboard app.
- Framework: Next.js
- UI Components: shadcn/ui
- Backend: convex
- Real-time Collaboration: liveblocks
The application is deployed on Vercel. Check it out here.
Follow these instructions to set up the project locally.
Make sure you have the following installed on your system:
- Node.js (>= 14.x)
- npm
-
Clone the repository:
git clone https://github.com/jatin1510/miro-clone cd miro-clone
-
Install dependencies:
npm install
-
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. -
Clerk Setup
-
Prepare the convex functions:
npx convex dev
-
Run the development server:
npm run dev
Open http://localhost:3000 with your browser to see the result.
- 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.
-
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
.
- Search and Favorite Functionality: Fixed the search and favorite functionality by using
This project follows the tutorial by Code with Antonio. Watch the full tutorial on YouTube.
Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.