https://github.com/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.
https://github.com/evanch98/miro-clone-nextjs
clerk-auth convex-database full-stack-web-development liveblocks nextjs14 react shadcn-ui tailwindcss typescript
Last synced: 5 months ago
JSON representation
Full-stack Miro Clone project built by using Next JS 14, React, TypeScript, Shadcn UI, Tailwind CSS, Convex Database, Zustand, liveblocks, and Clerk Auth.
- Host: GitHub
- URL: https://github.com/evanch98/miro-clone-nextjs
- Owner: evanch98
- Created: 2024-02-09T05:51:10.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-30T11:17:10.000Z (almost 2 years ago)
- Last Synced: 2025-04-21T16:49:22.323Z (11 months ago)
- Topics: clerk-auth, convex-database, full-stack-web-development, liveblocks, nextjs14, react, shadcn-ui, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://miro-clone-nextjs.vercel.app
- Size: 9.66 MB
- Stars: 28
- Watchers: 1
- Forks: 13
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-shadcnui - Github - clone-nextjs.vercel.app) | ★29 | (Platforms & Applications)
README
# 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:**
```bash
git clone https://github.com/evanch98/notion-clone-nextjs.git
cd your-repo-name
```
2. **Install the required dependencies:**
```bash
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:**
```bash
npm run dev
```
5. **Start building and customizing your Miro Clone!**
## Technologies Used
- [Next.js](https://nextjs.org/)
- [React](https://react.dev/)
- [TailwindCSS](https://tailwindcss.com/)
- [TypeScript](https://www.typescriptlang.org/)
- [Convex](https://www.convex.dev/)
- [Clerk Auth](https://clerk.com/)
- [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction)
- [Shadcn UI](https://ui.shadcn.com/)
- [Liveblocks](https://liveblocks.io/)
## Acknowledgements
- [class-variance-authority](https://www.npmjs.com/package/class-variance-authority)
- [clsx](https://www.npmjs.com/package/clsx)
- [cmdk](https://www.npmjs.com/package/cmdk)
- [date-fns](https://www.npmjs.com/package/date-fns)
- [lucide-react](https://www.npmjs.com/package/lucide-react)
- [nanoid](https://www.npmjs.com/package/nanoid)
- [perfect-freehand](https://www.npmjs.com/package/perfect-freehand)
- [query-string](https://www.npmjs.com/package/query-string)
- [react-contenteditable](https://www.npmjs.com/package/react-contenteditable)
- [sonner](https://www.npmjs.com/package/sonner)
- [tailwind-merge](https://www.npmjs.com/package/tailwind-merge)
- [usehooks-ts](https://www.npmjs.com/package/usehooks-ts)