elmurodvokhidov / figma-clone

Introducing a real-time Figma Clone project crafted with Next.js, TypeScript, Liveblocks, Fabric.js, Shadcn, and Tailwind CSS. This collaborative design platform empowers users with multi-cursor functionality, real-time chat, reaction expressions, active user monitoring, comment annotations, shape creation, image integration, and more...

Real-time Figma Clone 🎨

Welcome to the real-time Figma Clone project! This project aims to replicate the functionality of Figma with real-time collaboration features using a stack of popular technologies including Next.js, TypeScript, Liveblocks, Fabric.js, Shadcn, and Tailwind CSS. 🚀

Features ✨

• Multi Cursors: See where other users are editing in real-time.
• Cursor Chat: Communicate with collaborators through cursor chat.
• Reactions: React to changes and collaborate with expressive reactions.
• Active Users: See who else is currently editing the canvas.
• Comment Bubbles: Leave comments and annotations directly on the canvas.
• Creating Different Shapes: Draw and create various shapes on the canvas.
• Uploading Images: Easily upload images to the canvas for reference or design elements.
• Customization: Customize elements and shapes according to your design needs.
• Freeform Drawing: Sketch and draw freely on the canvas.
• Undo/Redo: Easily undo or redo actions to fine-tune your designs.
• Keyboard Actions: Perform actions quickly using keyboard shortcuts.
• History: View the history of changes made on the canvas.
• Deleting: Remove unwanted elements from the canvas.
• Scaling: Scale elements for precise adjustments.
• Moving: Easily move elements around the canvas.
• Clearing: Clear the canvas to start fresh.
• Exporting Canvas: Export your designs for further use or sharing.

Hotkeys 🎹

• /: Open live cursor chat
• e: Open reactions
• esc: Close
• ctrl+z: Undo
• ctrl+y: Redo
• ctrl+c: Copy
• ctrl+v: Paste

Quick Start 🚀

To get started with the real-time Figma Clone project, follow these steps:

1. Clone the repository to your local machine:

   git clone https://github.com/your-username/figma-clone.git

2. Navigate to the project directory:

   cd figma-clone

3. Install dependencies using npm:

   npm install

4. Set up environment variables:

   NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=your-liveblocks-public-key

5. Run the development server:

   npm run dev

6. Access the application by visiting http://localhost:3000 in your web browser.

Note: Ensure you have obtained a Liveblocks public key from the Liveblocks dashboard and replace your-liveblocks-public-key with your actual key.

Project Structure 📂

• pages/: Contains Next.js pages.
• components/: Reusable React components.
• styles/: Styling files using Tailwind CSS.
• public/: Static assets.
• utils/: Utility functions and configuration files.
• lib/: Library files and integrations (e.g., Liveblocks).

Credits 🙌

A heartfelt thank you to Adrian Hajdin for inspiring and guiding us in the creation of this fantastic and fun project!

Contributions 🌟

Contributions to the real-time Figma Clone project are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on GitHub.

Thank you for using and contributing to the project! Happy designing! 🎉