{"id":18788873,"url":"https://github.com/elmurodvokhidov/figma-clone","last_synced_at":"2025-04-13T13:32:17.988Z","repository":{"id":224702519,"uuid":"763690116","full_name":"elmurodvokhidov/FIGMA-CLONE","owner":"elmurodvokhidov","description":"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...","archived":false,"fork":false,"pushed_at":"2024-03-09T18:19:01.000Z","size":411,"stargazers_count":25,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T05:01:54.623Z","etag":null,"topics":["fabricjs","liveblocks","nextjs","shadcn-ui","taiwindcss","typscript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elmurodvokhidov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-26T18:43:12.000Z","updated_at":"2025-03-18T04:47:19.000Z","dependencies_parsed_at":"2024-03-06T08:35:16.575Z","dependency_job_id":null,"html_url":"https://github.com/elmurodvokhidov/FIGMA-CLONE","commit_stats":null,"previous_names":["elmurodvokhidov/figma-clone"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elmurodvokhidov%2FFIGMA-CLONE","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elmurodvokhidov%2FFIGMA-CLONE/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elmurodvokhidov%2FFIGMA-CLONE/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elmurodvokhidov%2FFIGMA-CLONE/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elmurodvokhidov","download_url":"https://codeload.github.com/elmurodvokhidov/FIGMA-CLONE/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248721249,"owners_count":21151070,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fabricjs","liveblocks","nextjs","shadcn-ui","taiwindcss","typscript"],"created_at":"2024-11-07T21:06:03.738Z","updated_at":"2025-04-13T13:32:14.249Z","avatar_url":"https://github.com/elmurodvokhidov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Real-time Figma Clone 🎨\n\nWelcome 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. 🚀\n\n  \u003cdiv\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-TypeScript-black?style=for-the-badge\u0026logoColor=white\u0026logo=typescript\u0026color=3178C6\" alt=\"typescript\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Next_JS-black?style=for-the-badge\u0026logoColor=white\u0026logo=nextdotjs\u0026color=000000\" alt=\"nextdotjs\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge\u0026logoColor=white\u0026logo=tailwindcss\u0026color=06B6D4\" alt=\"tailwindcss\" /\u003e\n  \u003c/div\u003e\n\n## Features ✨\n\n- **Multi Cursors**: See where other users are editing in real-time.\n- **Cursor Chat**: Communicate with collaborators through cursor chat.\n- **Reactions**: React to changes and collaborate with expressive reactions.\n- **Active Users**: See who else is currently editing the canvas.\n- **Comment Bubbles**: Leave comments and annotations directly on the canvas.\n- **Creating Different Shapes**: Draw and create various shapes on the canvas.\n- **Uploading Images**: Easily upload images to the canvas for reference or design elements.\n- **Customization**: Customize elements and shapes according to your design needs.\n- **Freeform Drawing**: Sketch and draw freely on the canvas.\n- **Undo/Redo**: Easily undo or redo actions to fine-tune your designs.\n- **Keyboard Actions**: Perform actions quickly using keyboard shortcuts.\n- **History**: View the history of changes made on the canvas.\n- **Deleting**: Remove unwanted elements from the canvas.\n- **Scaling**: Scale elements for precise adjustments.\n- **Moving**: Easily move elements around the canvas.\n- **Clearing**: Clear the canvas to start fresh.\n- **Exporting Canvas**: Export your designs for further use or sharing.\n\n## Hotkeys 🎹\n\n- **/**: Open live cursor chat\n- **e**: Open reactions\n- **esc**: Close\n- **ctrl+z**: Undo\n- **ctrl+y**: Redo\n- **ctrl+c**: Copy\n- **ctrl+v**: Paste\n\n\n## Quick Start 🚀\n\nTo get started with the real-time Figma Clone project, follow these steps:\n\n1. Clone the repository to your local machine:\n\n    ```bash\n    git clone https://github.com/your-username/figma-clone.git\n    ```\n\n2. Navigate to the project directory:\n\n    ```bash\n    cd figma-clone\n    ```\n\n3. Install dependencies using npm:\n\n    ```bash\n    npm install\n    ```\n\n4. Set up environment variables:\n\n    ```bash\n    NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=your-liveblocks-public-key\n    ```\n\n5. Run the development server:\n\n    ```bash\n    npm run dev\n    ```\n\n6. Access the application by visiting [http://localhost:3000](http://localhost:3000) in your web browser.\n\n**Note:** Ensure you have obtained a Liveblocks public key from the Liveblocks dashboard and replace `your-liveblocks-public-key` with your actual key.\n\n## Project Structure 📂\n\n- `pages/`: Contains Next.js pages.\n- `components/`: Reusable React components.\n- `styles/`: Styling files using Tailwind CSS.\n- `public/`: Static assets.\n- `utils/`: Utility functions and configuration files.\n- `lib/`: Library files and integrations (e.g., Liveblocks).\n\n## Credits 🙌\n\nA heartfelt thank you to [Adrian Hajdin](https://github.com/adrianhajdin) for inspiring and guiding us in the creation of this fantastic and fun project!\n\n## Contributions 🌟\n\nContributions 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.\n\nThank you for using and contributing to the project! Happy designing! 🎉","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felmurodvokhidov%2Ffigma-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felmurodvokhidov%2Ffigma-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felmurodvokhidov%2Ffigma-clone/lists"}