evanch98/miro-clone-nextjs

Full-stack Miro Clone project built by using Next JS 14, React, TypeScript, Shadcn UI, Tailwind CSS, Convex Database, Zustand, liveblocks, and Clerk Auth.

miro-clone-nextjs

February, 2024.
Full-stack Miro Clone project built by using Next JS 14, React, TypeScript, Shadcn UI, Tailwind CSS, Convex Database, Zustand, liveblocks, and Clerk Auth.

Features

• Create organizations and invite team members seamlessly.
• Collaborate with team members seamlessly in Miro-like whiteboard interface.
• Real-time collaboration using the real-time Convex database.
• User authentication, organization creation, and management with Clerk Auth.
• Responsive design with TailwindCSS.
• State management using Zustand.

Getting Started

These instructions will help you set up and run the project on your local machine for development and testing purposes.

1. Clone the repository:

git clone https://github.com/evanch98/notion-clone-nextjs.git
cd your-repo-name

2. Install the required dependencies:

npm install

3. Configure environmental variables: Create a .env.local file in the project root and set the necessary environment variables.

CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
LIVEBLOCKS_SECRET_KEY=

4. Run the development server:

npm run dev

5. Start building and customizing your Miro Clone!

Technologies Used

• Next.js
• React
• TailwindCSS
• TypeScript
• Convex
• Clerk Auth
• Zustand
• Shadcn UI
• Liveblocks

Acknowledgements

• class-variance-authority
• clsx
• cmdk
• date-fns
• lucide-react
• nanoid
• perfect-freehand
• query-string
• react-contenteditable
• sonner
• tailwind-merge
• usehooks-ts