Miro Clone - Real-time collaboration, versatile canvas, rich media, secure.

📔 Table of Contents

• Folder Structure
• Getting Started
• Screenshots
• Tech Stack
• Stats
• Contribute
• Acknowledgements
• Buy Me a Coffee
• Follow Me
• Learn More
• Deploy on Vercel
• Give A Star
• Star History
• Give A Star

‼️ Folder Structure

Here is the folder structure of this app.

miro-clone/
  |- app/
    |-- (dashboard)/
        |--- _components/
            |---- board-card/
            |---- sidebar/
            |---- board-list.tsx
            |---- empty-boards.tsx
            |---- empty-favourites.tsx
            |---- empty-org.tsx
            |---- empty-search.tsx
            |---- invite-button.tsx
            |---- navbar.tsx
            |---- new-board-button.tsx
            |---- org-sidebar.tsx
            |---- search-input.tsx
        |--- layout.tsx
        |--- page.tsx
    |-- api/liveblocks-auth/
        |--- route.ts
    |-- board/[boardId]/
        |--- _components/
            |---- canvas.tsx
            |---- color-picker.tsx
            |---- cursor.tsx
            |---- cursors-presence.tsx
            |---- ellipse.tsx
            |---- info.tsx
            |---- layer-preview.tsx
            |---- loading.tsx
            |---- note.tsx
            |---- participants.tsx
            |---- path.tsx
            |---- rectangle.tsx
            |---- selection-box.tsx
            |---- selection-tools.tsx
            |---- text.tsx
            |---- tool-button.tsx
            |---- toolbar.tsx
            |---- user-avatar.tsx
        |--- page.tsx
    |-- apple-icon.png
    |-- favicon.ico
    |-- globals.css
    |-- icon1.png
    |-- icon2.png
    |-- layout.tsx
  |- components/
    |-- auth/
    |-- modals/
    |-- ui/
    |-- actions.tsx
    |-- confirm-modal.tsx
    |-- hint.tsx
    |-- room.tsx
  |- config/
    |-- index.ts
  |- convex/
    |-- _generated/
    |-- auth.config.js
    |-- board.ts
    |-- boards.ts
    |-- schema.ts
    |-- tsconfig.json
  |- hooks/
    |-- use-api-mutation.tsx
    |-- use-disable-scroll-bounce.tsx
    |-- use-selection-bounds.tsx
  |- lib/
    |-- utils.ts
  |- providers/
    |-- convex-client-provider.tsx
    |-- modal-provider.tsx
  |- public/
    |-- placeholders/
    |-- elements.svg
    |-- empty-boards.svg
    |-- empty-favourites.svg
    |-- empty-search.svg
    |-- logo.svg
  |- store/
    |-- use-rename-modal.ts
  |- types/
    |-- canvas.ts
  |- .env.local
  |- .env.local.example
  |- .eslintrc.json
  |- .gitignore
  |- components.json
  |- environment.d.ts
  |- liveblocks.config.ts
  |- middleware.ts
  |- next.config.mjs
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- tailwind.config.ts
  |- tsconfig.json

🧰 Getting Started

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Create .env.local file in root directory.
4. Contents of .env.local:

# .env.local

# disable next.js telemetry
NEXT_TELEMETRY_DISABLED=1

# deployment for convex
CONVEX_DEPLOYMENT=dev:convex-app-name # team: <your-team-name>, project: <your-project-name>

# convex deployment url
NEXT_PUBLIC_CONVEX_URL=https://convex-app-name.convex.cloud

# clerk auth keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# liveblocks api keys
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=pk_dev_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_LIVEBLOCKS_SECRET_KEY=sk_dev_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

5. Convex Deployment Configuration:

a. Visit the Convex Website:

• Go to the Convex website and sign in to your account.

b. Access Deployment Settings:

• Navigate to the deployment settings section in your Convex account.

c. Retrieve Deployment Configuration:

• Find the deployment details, including team and project names.
• Update the CONVEX_DEPLOYMENT variable in the .env.local file with the obtained information.

6. Clerk Authentication Keys:

a. Visit the Clerk Website:

• Go to the Clerk website and sign in to your Clerk account.

b. Access API Keys:

• Find the section in your Clerk account related to API keys or authentication settings.

c. Generate Keys:

• Generate a pair of keys (Publishable Key and Secret Key).

d. Update .env.local:

• Replace the NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY variables in the .env.local file with the keys obtained from Clerk.

7. Liveblocks API Keys:

a. Visit the Liveblocks Website:

• Go to the Liveblocks website and sign in to your Liveblocks account.

b. Access API Keys:

• Navigate to your Liveblocks account settings or API keys section.

c. Generate Keys:

• Generate a pair of keys (Public Key and Secret Key) for development.

d. Update .env.local:

• Replace the NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY and NEXT_PUBLIC_LIVEBLOCKS_SECRET_KEY variables in the .env.local file with the Liveblocks API keys obtained.

8. Save and Secure:

• Save the changes to the .env.local file.

9. Install Project Dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps.
10. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

📷 Screenshots

⚙️ Tech Stack

🔧 Stats

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

💎 Acknowledgements

Useful resources and dependencies that are used in Miro Clone.

• Thanks to CodeWithAntonio: https://codewithantonio.com/
• @clerk/nextjs: ^4.29.7
• @liveblocks/client: ^1.10.1
• @liveblocks/node: ^1.10.1
• @liveblocks/react: ^1.10.1
• @radix-ui/react-alert-dialog: ^1.0.5
• @radix-ui/react-avatar: ^1.0.4
• @radix-ui/react-dialog: ^1.0.5
• @radix-ui/react-dropdown-menu: ^2.0.6
• @radix-ui/react-slot: ^1.0.2
• @radix-ui/react-tooltip: ^1.0.7
• class-variance-authority: ^0.7.0
• clsx: ^2.1.0
• convex: ^1.9.0
• convex-helpers: ^0.1.23
• date-fns: ^3.3.1
• lucide-react: ^0.323.0
• nanoid: ^5.0.6
• next: 14.1.0
• next-themes: ^0.2.1
• perfect-freehand: ^1.2.2
• query-string: ^8.2.0
• react: ^18
• react-contenteditable: ^3.3.7
• react-dom: ^18
• sonner: ^1.4.0
• tailwind-merge: ^2.2.1
• tailwindcss-animate: ^1.0.7
• usehooks-ts: ^2.14.0
• zustand: ^4.5.1

☕ Buy Me a Coffee

🚀 Follow Me

📚 Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

📃 Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

(back to top)