/next14-miro-clone

Primary LanguageTypeScript

Build a Real-Time Miro Clone With Nextjs, React, Tailwind (2024)

Copy of Copy of Copy of Copy of Fullstack Twitter Clone (11)

This is a repository for a Build a Real-Time Miro Clone With Nextjs, React, Tailwind (2024) youtube video.

VIDEO TUTORIAL

Features:

  • 🛠️ Whiteboard from scratch
  • 🧰 Toolbar with Text, Shapes, Sticky Notes & Pencil
  • 🪄 Layering functionality
  • 🎨 Coloring system
  • ↩️ Undo & Redo functionality
  • ⌨️ Keyboard shortcuts
  • 🤝 Real-time collaboration
  • 💾 Real-time database
  • 🔐 Auth, organisations and invites
  • ⭐️ Favoriting functionality
  • 🌐 Next.js 14 framework
  • 💅 TailwindCSS & ShadcnUI styling

Prerequisites

Node version 14.x

Cloning the repository

git clone https://github.com/AntonioErdeljac/next14-miro-clone.git

Install packages

npm i

Setup .env file

CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
LIVEBLOCKS_SECRET_KEY=

Setup Convex

npx convex dev

Start the app

npm run dev