Miro Clone with Next.js 🚀

Real-Time Miro Clone built using Next.js, React, and Tailwind CSS 🎨

---

📖 Table of Contents

• About the Project
  • Screenshots
  • Tech Stack
  • Environment Variables
• Getting Started
  • Prerequisites
  • Installation
  • Run Locally
  • 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 💥

---

🛠️ Tech Stack

Client

• TypeScript
• Next.js
• React.js
• TailwindCSS
• Prisma

Database

• MongoDB
• Cloudinary

---

🔧 Getting Started

❗ Prerequisites

1. Install Node.js here.
2. Sign up for the following accounts:
   • Clerk
   • Convex
   • Liveblocks

🔑 Environment Variables

Create a .env file in the root directory and add the following:

CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
LIVEBLOCKS_SECRET_KEY=

---

⚙️ Installation

1. Clone the repository:

https://github.com/BernieTv/LiveBlocks-Demo.git

cd LiveBlocks-Demo

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

Open http://localhost:3000 to view the project locally. 🎉

---

🚀 Deployment

Deploy on Vercel

The easiest way to deploy your Next.js app is through Vercel. Follow their Next.js deployment documentation for a smooth deployment process.

---

📚 Learn More

• Next.js Documentation - In-depth knowledge of Next.js features.
• Next.js GitHub Repository - Contributions are welcome!

Happy Coding! 🎨✨