github.com/Andreaswt/figma-clone @main

https://youtu.be/43xmaSJbEVs

Overview

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

Setup

Follow these steps to install and set up the project.

Clone the Repository

git clone https://github.com/Andreaswt/figma-clone.git

Navigate to the Project Directory

cd figma-clone

Install Node.js

Download and install Node.js if not already installed. Use the link below for guidance on installation via package manager: Node.js Download

Install Node Modules

npm install

Liveblocks

Sign up for Liveblocks, and create a project. Grab the public and secret key for the project.

Setup Environment Variables

Create a .env file in the root of the project and add the necessary environment variables listed in env.js.

Run the Project

npm run dev

Access the Application

Open your browser and visit: http://localhost:3000