https://github.com/bernietv/liveblocks-demo
Miro Clone build using LiveBlocks components 🎨✴✨📊📝
https://github.com/bernietv/liveblocks-demo
clerkauth liveblocks nextjs prisma typescript
Last synced: 3 months ago
JSON representation
Miro Clone build using LiveBlocks components 🎨✴✨📊📝
- Host: GitHub
- URL: https://github.com/bernietv/liveblocks-demo
- Owner: BernieTv
- License: mit
- Created: 2024-11-19T17:20:04.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-27T10:34:35.000Z (over 1 year ago)
- Last Synced: 2025-03-24T07:47:28.139Z (over 1 year ago)
- Topics: clerkauth, liveblocks, nextjs, prisma, typescript
- Language: TypeScript
- Homepage: https://miro-clone-jade.vercel.app/
- Size: 8.89 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Miro Clone with Next.js 🚀
Real-Time Miro Clone built using Next.js, React, and Tailwind CSS 🎨
---
## 📖 Table of Contents
- [About the Project](#star2-about-the-project)
- [Screenshots](#camera-screenshots)
- [Tech Stack](#space_invader-tech-stack)
- [Environment Variables](#key-environment-variables)
- [Getting Started](#toolbox-getting-started)
- [Prerequisites](#bangbang-prerequisites)
- [Installation](#gear-installation)
- [Run Locally](#running-run-locally)
- [Deployment](#triangular_flag_on_post-deployment)
---
## ⭐ About the Project
A feature-rich real-time Miro clone built with modern web technologies like Next.js, React, and Tailwind CSS. This project showcases collaborative functionalities, responsive design, and a seamless user experience. 💻✨
---
### 📸 Screenshots
---
## 🌟 [LIVE DEMO](https://miro-clone-jade.vercel.app) 💥
---
### 🛠️ Tech Stack
#### Client
- [TypeScript](https://www.typescriptlang.org/)
- [Next.js](https://nextjs.org/)
- [React.js](https://reactjs.org/)
- [TailwindCSS](https://tailwindcss.com/)
- [Prisma](https://www.prisma.io)
#### Database
- [MongoDB](https://www.mongodb.com)
- [Cloudinary](https://cloudinary.com/)
---
## 🔧 Getting Started
### ❗ Prerequisites
1. Install Node.js [here](https://nodejs.org/en/).
2. Sign up for the following accounts:
- [Clerk](https://clerk.com/)
- [Convex](https://www.convex.dev/)
- [Liveblocks](https://liveblocks.io/)
### 🔑 Environment Variables
Create a `.env` file in the root directory and add the following:
```plaintext
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
LIVEBLOCKS_SECRET_KEY=
```
---
### ⚙️ Installation
1. Clone the repository:
```bash
https://github.com/BernieTv/LiveBlocks-Demo.git
cd LiveBlocks-Demo
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) to view the project locally. 🎉
---
### 🚀 Deployment
#### Deploy on Vercel
The easiest way to deploy your Next.js app is through [Vercel](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme). Follow their [Next.js deployment documentation](https://nextjs.org/docs/deployment) for a smooth deployment process.
---
### 📚 Learn More
- [Next.js Documentation](https://nextjs.org/docs) - In-depth knowledge of Next.js features.
- [Next.js GitHub Repository](https://github.com/vercel/next.js/) - Contributions are welcome!
Happy Coding! 🎨✨