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

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

# clerk default org id
CLERK_DEFAULT_ORGANIZATION_ID=org_xxxxxxxxxxxxxxxxxxxxxxxxxxxx

# liveblocks api keys
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=pk_dev_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
LIVEBLOCKS_SECRET_KEY=sk_dev_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

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

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

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

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

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

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

• Go to Clerk Dashboard > Settings > Organizations and Enable Organizations.
• Create a new organization, Replace the CLERK_DEFAULT_ORGANIZATION_ID with the newly created organization id.

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

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

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

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

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

1. Install Project Dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps.
2. 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.

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.

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

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!

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.

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

(back to top)