github.com/adrianhajdin/figma_clone @main

<a href="https://youtu.be/oKIThIihv60" target="_blank">
  <img src="https://github.com/JavaScript-Mastery-Pro/figma-ts/assets/151519281/e03dc22d-0f45-464b-9dc3-f01f07906bee" alt="Project Banner">
</a>







<img src="https://img.shields.io/badge/-TypeScript-black?style=for-the-badge&logoColor=white&logo=typescript&color=3178C6" alt="typescript" />
<img src="https://img.shields.io/badge/-Next_JS-black?style=for-the-badge&logoColor=white&logo=nextdotjs&color=000000" alt="nextdotjs" />
<img src="https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge&logoColor=white&logo=tailwindcss&color=06B6D4" alt="tailwindcss" />

Real Time Figma Clone

 Build this project step by step with our detailed tutorial on <a href="https://www.youtube.com/@javascriptmastery/videos" target="_blank"><b>JavaScript Mastery</b></a> YouTube. Join the JSM family!

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🕸️ Snippets
6. 🔗 Links
7. 🚀 More

🚨 Tutorial

This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, JavaScript Mastery.

If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!

🤖 Introduction

A minimalistic Figma clone to show how to add real-world features like live collaboration with cursor chat, comments, reactions, and drawing designs (shapes, image upload) on the canvas using fabric.js.

If you're getting started and need assistance or face any bugs, join our active Discord community with over 27k+ members. It's a place where people help each other out.

⚙️ Tech Stack

• Next.js
• TypeScript
• Liveblocks
• Fabric.js
• Shadcn
• Tailwind CSS

🔋 Features

👉 Multi Cursors, Cursor Chat, and Reactions: Allows multiple users to collaborate simultaneously by showing individual cursors, enabling real-time chat, and reactions for interactive communication.

👉 Active Users: Displays a list of currently active users in the collaborative environment, providing visibility into who is currently engaged.

👉 Comment Bubbles: Enables users to attach comments to specific elements on the canvas, fostering communication and feedback on design components.

👉 Creating Different Shapes: Provides tools for users to generate a variety of shapes on the canvas, allowing for diverse design elements

👉 Uploading Images: Import images onto the canvas, expanding the range of visual content in the design

👉 Customization: Allows users to adjust the properties of design elements, offering flexibility in customizing and fine-tuning visual components

👉 Freeform Drawing: Enables users to draw freely on the canvas, promoting artistic expression and creative design.

👉 Undo/Redo: Provides the ability to reverse (undo) or restore (redo) previous actions, offering flexibility in design decision-making

👉 Keyboard Actions: Allows users to utilize keyboard shortcuts for various actions, including copying, pasting, deleting, and triggering shortcuts for features like opening cursor chat, reactions, and more, enhancing efficiency and accessibility.

👉 History: Review the chronological history of actions and changes made on the canvas, aiding in project management and version control.

👉 Deleting, Scaling, Moving, Clearing, Exporting Canvas: Offers a range of functions for managing design elements, including deletion, scaling, moving, clearing the canvas, and exporting the final design for external use.

and many more, including code architecture, advanced react hooks, and reusability

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/JavaScript-Mastery-Pro/figma-ts.git
cd figma-ts

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.

🕸️ Snippets

Styles

tailwind.config.ts

import type { Config } from "tailwindcss";

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        primary: {
          black: "#14181F",
          green: "#56FFA6",
          grey: {
            100: "#2B303B",
            200: "#202731",
            300: "#C4D3ED",
          },
        },
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;

export default config;

app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "@liveblocks/react-comments/styles.css";

* {
  font-family:
    work sans,
    sans-serif;
}

@layer utilities {
  .no-ring {
    @apply outline-none ring-0 ring-offset-0 focus:ring-0 focus:ring-offset-0 focus-visible:ring-offset-0 !important;
  }

  .input-ring {
    @apply h-8 rounded-none border-none  bg-transparent outline-none ring-offset-0 focus:ring-1  focus:ring-primary-green focus:ring-offset-0 focus-visible:ring-offset-0 !important;
  }

  .right-menu-content {
    @apply flex w-80 flex-col gap-y-1 border-none bg-primary-black py-4 text-white !important;
  }

  .right-menu-item {
    @apply flex justify-between px-3 py-2 hover:bg-primary-grey-200 !important;
  }
}

Overlay Comments

NewThread

```tsx "use client";

import { FormEvent, ReactNode, useCallback, useEffect, useRef, useState, } from "react"; import { Slot } from "@radix-ui/react-slot"; import * as Portal from "@radix-ui/react-portal"; import { ComposerSubmitComment } from "@liveblocks/react-comments/primitives";

import { useCreateThread } from "@/liveblocks.config"; import { useMaxZIndex } from "@/lib/useMaxZIndex";

import PinnedComposer from "./PinnedComposer"; import NewThreadCursor from "./NewThreadCursor";

type ComposerCoords = null | { x: number; y: number };

type Props = { children: ReactNode; };

export const NewThread = ({ children }: Props) => { // set state to track if we're placing a new comment or not const [creatingCommentState, setCreatingCommentState] = useState< "placing" | "placed" | "complete"

("complete");

/* * We're using the useCreateThread hook to create a new thread. * * useCreateThread: https://liveblocks.io/docs/api-reference/liveblocks-react#useCreateThread / const createThread = useCreateThread();

// get the max z-index of a thread const maxZIndex = useMaxZIndex();

// set state to track the coordinates of the composer (liveblocks comment editor) const [composerCoords, setComposerCoords] = useState(null);

// set state to track the last pointer event const lastPointerEvent = useRef();

// set state to track if user is allowed to use the composer const [allowUseComposer, setAllowUseComposer] = useState(false); const allowComposerRef = useRef(allowUseComposer); allowComposerRef.current = allowUseComposer;

useEffect(() => { // If composer is already placed, don't do anything if (creatingCommentState === "complete") { return; }

// Place a composer on the screen
const newComment = (e: MouseEvent) => {
  e.preventDefault();

  // If already placed, click outside to close composer
  if (creatingCommentState === "placed") {
    // check if the click event is on/inside the composer
    const isClickOnComposer = ((e as any)._savedComposedPath = e
      .composedPath()
      .some((el: any) => {
        return el.classList?.contains("lb-composer-editor-actions");
      }));

    // if click is inisde/on composer, don't do anything
    if (isClickOnComposer) {
      return;
    }

    // if click is outside composer, close composer
    if (!isClickOnComposer) {
      setCreatingCommentState("complete");
      return;
    }
  }

  // First click sets composer down
  setCreatingCommentState("placed");
  setComposerCoords({
    x: e.clientX,
    y: e.clientY,
  });
};

document.documentElement.addEventListener("click", newComment);

return () => {
  document.documentElement.removeEventListener("click", newComment);
};

}, [creatingCommentState]);

useEffect(() => { // If dragging composer, update position const handlePointerMove = (e: PointerEvent) => { // Prevents issue with composedPath getting removed (e as any)._savedComposedPath = e.composedPath(); lastPointerEvent.current = e; };

document.documentElement.addEventListener("pointermove", handlePointerMove);

return () => {
  document.documentElement.removeEventListener(
    "pointermove",
    handlePointerMove
  );
};

}, []);

// Set pointer event from last click on body for use later useEffect(() => { if (creatingCommentState !== "placing") { return; }

const handlePointerDown = (e: PointerEvent) => {
  // if composer is already placed, don't do anything
  if (allowComposerRef.current) {
    return;
  }

  // Prevents issue with composedPath getting removed
  (e as any)._savedComposedPath = e.composedPath();
  lastPointerEvent.current = e;
  setAllowUseComposer(true);
};

// Right click to cancel placing
const handleContextMenu = (e: Event) => {
  if (creatingCommentState === "placing") {
    e.preventDefault();
    setCreatingCommentState("complete");
  }
};

document.documentElement.addEventListener("pointerdown", handlePointerDown);
document.documentElement.addEventListener("contextmenu", handleContextMenu);

return () => {
  document.documentElement.removeEventListener(
    "pointerdown",
    handlePointerDown
  );
  document.documentElement.removeEventListener(
    "contextmenu",
    handleContextMenu
  );
};

}, [creatingCommentState]);

// On composer submit, create thread and reset state const handleComposerSubmit = useCallback( ({ body }: ComposerSubmitComment, event: FormEvent) => { event.preventDefault(); event.stopPropagation();

  // Get your canvas element
  const overlayPanel = document.querySelector("#canvas");

  // if there's no composer coords or last pointer event, meaning the user hasn't clicked yet, don't do anything
  if (!composerCoords || !lastPointerEvent.current || !overlayPanel) {
    return;
  }

  // Set coords relative to the top left of your canvas
  const { top, left } = overlayPanel.getBoundingClientRect();
  const x = composerCoords.x - left;
  const y = composerCoords.y - top;

  // create a new thread with the composer coords and cursor selectors
  createThread({
    body,
    metadata: {
      x,
      y,
      resolved: false,
      zIndex: maxZIndex + 1,
    },
  });

  setComposerCoords(null);
  setCreatingCommentState("complete");
  setAllowUseComposer(false);
},
[createThread, composerCoords, maxZIndex]

);

return ( <> {/* * Slot is used to wrap the children of the NewThread component * to allow us to add a click event listener to the children * * Slot: https://www.radix-ui.com/primitives/docs/utilities/slot * * Disclaimer: We don't have to download this package specifically, * it's already included when we install Shadcn /} setCreatingCommentState( creatingCommentState !== "complete" ? "complete" : "placing" ) } style={{ opa