https://github.com/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...
https://github.com/elmurodvokhidov/figma-clone
fabricjs liveblocks nextjs shadcn-ui taiwindcss typscript
Last synced: 7 months ago
JSON representation
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...
- Host: GitHub
- URL: https://github.com/elmurodvokhidov/figma-clone
- Owner: elmurodvokhidov
- Created: 2024-02-26T18:43:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-09T18:19:01.000Z (over 1 year ago)
- Last Synced: 2025-03-27T05:01:54.623Z (8 months ago)
- Topics: fabricjs, liveblocks, nextjs, shadcn-ui, taiwindcss, typscript
- Language: TypeScript
- Homepage:
- Size: 401 KB
- Stars: 25
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```bash
git clone https://github.com/your-username/figma-clone.git
```
2. Navigate to the project directory:
```bash
cd figma-clone
```
3. Install dependencies using npm:
```bash
npm install
```
4. Set up environment variables:
```bash
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=your-liveblocks-public-key
```
5. Run the development server:
```bash
npm run dev
```
6. Access the application by visiting [http://localhost:3000](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](https://github.com/adrianhajdin) 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! 🎉