Figmaeigma
A minimalistic Figma clone with real-world features like live collaboration with cursor chat, comments, reactions, and drawing designs (shapes, image upload) on the canvas using fabric.js.
⚙️ Tech Stack
- Next.js
- TypeScript
- Liveblocks
- Fabric.js
- Shadcn
- Tailwind CSS
🔋 Features
Uploading Images
Customization
Freeform Drawing
Undo/Redo
Multi Cursors, Cursor Chat, and Reactions
Active Users
Comment Bubbles
Creating Different Shapes
Keyboard Actions
History
Deleting, Scaling, Moving, Clearing, Exporting Canvas
and more, including code architecture, advanced react hooks, and reusability
Prerequisites
Make sure you have the following installed on your machine:
Cloning the Repository
git clone https://github.com/edishabani/FigmaEigma.git
cd figmaEigma
Installation
Install the project dependencies using npm:
npm install
Set Up Environment Variables
Create a new file named .env.local in the root of your project and add the following content:
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=
Replace the placeholder values with your actual Liveblocks credentials. You can obtain these credentials by signing up on the Liveblocks website.
Running the Project
npm run dev
Open http://localhost:3000 in your browser to view the project.
