Hi 🤙 In this FREE 11 hour video you'll learn how to build a real-time Figma clone. You'll build features like real-time canvas updates, collaborative tools, advanced shape and text editing, and much more. We'll be using modern technologies such as Next.js 15, React 18, TypeScript and Liveblocks. You'll be able to build along with me from project setup to Vercel deployment.
Features: 🔄 Real-time canvas updates 👀 See others' cursors 🔗 Share rooms 🛠️ Property editor 📊 Dashboard ✏️ Shapes, drawings, and text ↩️ Undo and redo 🔀 Manage layer's z-indexes 🔑 Sign Up And In 🚀 Vercel Deployment 📊 Postgres Database
Follow these steps to install and set up the project.
git clone https://github.com/Andreaswt/figma-clone.gitcd figma-cloneDownload and install Node.js if not already installed. Use the link below for guidance on installation via package manager: Node.js Download
npm installSign up for Liveblocks, and create a project. Grab the public and secret key for the project.
Create a .env file in the root of the project and add the necessary environment variables listed in env.js.
npm run devOpen your browser and visit: http://localhost:3000