27 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/components/cursor/cursor.tsx:
--------------------------------------------------------------------------------
1 | import CursorSVG from "@/public/cursor-svg";
2 |
3 | type CursorProps = {
4 | color: string;
5 | x: number;
6 | y: number;
7 | message: string;
8 | };
9 |
10 | export const Cursor = ({ color, x, y, message }: CursorProps) => {
11 | return (
12 |
28 |
32 |
29 | {value}
30 |
31 |
18 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata, Viewport } from "next";
2 | import { Work_Sans } from "next/font/google";
3 | import type { PropsWithChildren } from "react";
4 |
5 | import { siteConfig } from "@/config";
6 | import { cn } from "@/lib/utils";
7 |
8 | import { Room } from "./room";
9 |
10 | import "./globals.css";
11 |
12 | const workSans = Work_Sans({
13 | subsets: ["latin"],
14 | variable: "--font-work-sans",
15 | weight: ["400", "600", "700"],
16 | });
17 |
18 | export const viewport: Viewport = {
19 | themeColor: "#14181F",
20 | };
21 |
22 | export const metadata: Metadata = siteConfig;
23 |
24 | const RootLayout = ({ children }: Readonly
27 |
31 | )}
32 | 28 | {message} 29 |
30 |
19 |
33 | );
34 |
--------------------------------------------------------------------------------
/public/group.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: ""
5 | labels: ""
6 | assignees: ""
7 | ---
8 |
9 | **Describe the bug**
10 | A clear and concise description of what the bug is.
11 |
12 | **To Reproduce**
13 | Steps to reproduce the behavior:
14 |
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 |
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 |
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 |
26 | **Desktop (please complete the following information):**
27 |
28 | - OS: [e.g. iOS]
29 | - Browser [e.g. chrome, safari]
30 | - Version [e.g. 22]
31 |
32 | **Smartphone (please complete the following information):**
33 |
34 | - Device: [e.g. iPhone6]
35 | - OS: [e.g. iOS8.1]
36 | - Browser [e.g. stock browser, safari]
37 | - Version [e.g. 22]
38 |
39 | **Additional context**
40 | Add any other context about the problem here.
41 |
--------------------------------------------------------------------------------
/public/ungroup.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Sanidhya Kumar Verma
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/config/index.ts:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 |
3 | export const siteConfig: Metadata = {
4 | title: "Figma Clone",
5 | description:
6 | "A minimalist Figma clone using Fabric.js and Liveblocks for real-time collaboration.",
7 | keywords: [
8 | "reactjs",
9 | "nextjs",
10 | "vercel",
11 | "react",
12 | "liveblocks",
13 | "livekit",
14 | "shadcn",
15 | "shadcn-ui",
16 | "radix-ui",
17 | "cn",
18 | "clsx",
19 | "figma-clone",
20 | "realtime-drawing",
21 | "live-chat",
22 | "live-reactions",
23 | "live-updates",
24 | "sonner",
25 | "zustand",
26 | "zod",
27 | "lucide-react",
28 | "next-themes",
29 | "postcss",
30 | "prettier",
31 | "react-dom",
32 | "tailwindcss",
33 | "tailwindcss-animate",
34 | "ui/ux",
35 | "js",
36 | "javascript",
37 | "typescript",
38 | "eslint",
39 | "html",
40 | "css",
41 | ] as Array{placeholder}
20 | inputRef.current.click()}
23 | >
24 | handleInputChange(attributeType, e.target.value)}
29 | />
30 |
31 |
32 | e.stopPropagation()}
10 | >
11 |
18 | );
19 | };
20 |
21 | const ReactionButton = ({
22 | reaction,
23 | onSelect,
24 | }: {
25 | reaction: string;
26 | onSelect: (reaction: string) => void;
27 | }) => {
28 | return (
29 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 |
3 | const config = {
4 | darkMode: ["class"],
5 | content: [
6 | "./pages/**/*.{ts,tsx}",
7 | "./components/**/*.{ts,tsx}",
8 | "./app/**/*.{ts,tsx}",
9 | "./src/**/*.{ts,tsx}",
10 | ],
11 | prefix: "",
12 | theme: {
13 | container: {
14 | center: true,
15 | padding: "2rem",
16 | screens: {
17 | "2xl": "1400px",
18 | },
19 | },
20 | extend: {
21 | colors: {
22 | primary: {
23 | black: "#14181F",
24 | green: "#56FFA6",
25 | grey: {
26 | 100: "#2B303B",
27 | 200: "#202731",
28 | 300: "#C4D3ED",
29 | },
30 | },
31 | },
32 | keyframes: {
33 | "accordion-down": {
34 | from: { height: "0" },
35 | to: { height: "var(--radix-accordion-content-height)" },
36 | },
37 | "accordion-up": {
38 | from: { height: "var(--radix-accordion-content-height)" },
39 | to: { height: "0" },
40 | },
41 | },
42 | animation: {
43 | "accordion-down": "accordion-down 0.2s ease-out",
44 | "accordion-up": "accordion-up 0.2s ease-out",
45 | },
46 | },
47 | },
48 | plugins: [require("tailwindcss-animate")],
49 | } satisfies Config;
50 |
51 | export default config;
52 |
--------------------------------------------------------------------------------
/public/align-top.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/public/align-bottom.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/public/align-vertical-center.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/public/align-left.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/components/users/active-users.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from "react";
2 |
3 | import { generateRandomName } from "@/lib/utils";
4 | import { useOthers, useSelf } from "@/liveblocks.config";
5 |
6 | import { Avatar } from "./avatar";
7 |
8 | export const ActiveUsers = () => {
9 | const users = useOthers();
10 | const currentUser = useSelf();
11 | const hasMoreUsers = users.length > 3;
12 |
13 | const memorizedUsers = useMemo(
14 | () => (
15 |
16 |
41 | ),
42 | // eslint-disable-next-line react-hooks/exhaustive-deps
43 | [users.length]
44 | );
45 |
46 | return memorizedUsers;
47 | };
48 |
--------------------------------------------------------------------------------
/public/align-right.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/public/align-horizontal-center.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/components/settings/dimensions.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 | import { Label } from "@/components/ui/label";
3 |
4 | const dimensionsOptions = [
5 | { label: "W", property: "width" },
6 | { label: "H", property: "height" },
7 | ];
8 |
9 | type DimensionsProps = {
10 | width: string;
11 | height: string;
12 | isEditingRef: React.MutableRefObject
17 | {currentUser && (
18 |
40 |
36 | +{users.length - 3}
37 |
38 | )}
39 |
24 | {dimensionsOptions.map((item) => (
25 |
47 |
29 |
32 | handleInputChange(item.property, e.target.value)}
40 | onBlur={(e) => {
41 | isEditingRef.current = false;
42 | }}
43 | />
44 |
45 | ))}
46 |
16 |
44 | );
45 | };
46 |
--------------------------------------------------------------------------------
/components/left-sidebar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useMemo } from "react";
4 | import Image from "next/image";
5 |
6 | import { getShapeInfo } from "@/lib/utils";
7 |
8 | export const LeftSidebar = ({ allShapes }: { allShapes: Array
17 |
27 |
28 | {/**
29 | * We're using the Composer component to create a new comment.
30 | * Liveblocks provides a Composer component that allows to
31 | * create/edit/delete comments.
32 | *
33 | * Composer: https://liveblocks.io/docs/api-reference/liveblocks-react-comments#Composer
34 | */}
35 | {
39 | e.stopPropagation();
40 | }}
41 | />
42 |
43 | 14 | Layers 15 |
16 |
17 | {allShapes?.map((shape: any) => {
18 | const info = getShapeInfo(shape[1]?.type);
19 |
20 | return (
21 |
39 |
25 |
36 | );
37 | })}
38 | 33 | {info.name} 34 |
35 | e.stopPropagation()}
43 | >
44 | {cursorState.mode === CursorMode.Chat && (
45 | <>
46 |
68 | );
69 | };
70 |
--------------------------------------------------------------------------------
/liveblocks.config.ts:
--------------------------------------------------------------------------------
1 | import { type LiveMap, createClient } from "@liveblocks/client";
2 | import { createRoomContext } from "@liveblocks/react";
3 |
4 | import { ReactionEvent } from "@/types/type";
5 |
6 | const client = createClient({
7 | throttle: 16,
8 | publicApiKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY!,
9 | });
10 |
11 | // Presence represents the properties that exist on every user in the Room
12 | // and that will automatically be kept in sync. Accessible through the
13 | // `user.presence` property. Must be JSON-serializable.
14 | export type Presence = {
15 | cursor: { x: number; y: number } | null;
16 | message: string | null;
17 | };
18 |
19 | // Optionally, Storage represents the shared document that persists in the
20 | // Room, even after all users leave. Fields under Storage typically are
21 | // LiveList, LiveMap, LiveObject instances, for which updates are
22 | // automatically persisted and synced to all connected clients.
23 | type Storage = {
24 | // author: LiveObject<{ firstName: string, lastName: string }>,
25 | // ...
26 | canvasObjects: LiveMap
49 | {cursorState.previousMessage && (
50 |
65 |
66 | )}
67 | {cursorState.previousMessage}
51 | )}
52 |
53 |
64 | Design
41 | 42 | 43 | Make changes to canvas as you like 44 | 45 | 46 |
34 | {threads
35 | .filter((thread) => !thread.metadata.resolved)
36 | .map((thread) => (
37 |
44 | );
45 | };
46 |
47 | const OverlayThread = ({ thread, maxZIndex }: OverlayThreadProps) => {
48 | /**
49 | * We're using the useEditThreadMetadata hook to edit the metadata
50 | * of a thread.
51 | *
52 | * useEditThreadMetadata: https://liveblocks.io/docs/api-reference/liveblocks-react#useEditThreadMetadata
53 | */
54 | const editThreadMetadata = useEditThreadMetadata();
55 |
56 | /**
57 | * We're using the useUser hook to get the user of the thread.
58 | *
59 | * useUser: https://liveblocks.io/docs/api-reference/liveblocks-react#useUser
60 | */
61 |
62 | // We're using a ref to get the thread element to position it
63 | const threadRef = useRef
89 | {/* render the thread */}
90 |
92 | );
93 | };
94 |
--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import jsPDF from "jspdf";
3 | import { twMerge } from "tailwind-merge";
4 |
5 | const adjectives = [
6 | "Happy",
7 | "Creative",
8 | "Energetic",
9 | "Lively",
10 | "Dynamic",
11 | "Radiant",
12 | "Joyful",
13 | "Vibrant",
14 | "Cheerful",
15 | "Sunny",
16 | "Sparkling",
17 | "Bright",
18 | "Shining",
19 | ];
20 |
21 | const animals = [
22 | "Dolphin",
23 | "Tiger",
24 | "Elephant",
25 | "Penguin",
26 | "Kangaroo",
27 | "Panther",
28 | "Lion",
29 | "Cheetah",
30 | "Giraffe",
31 | "Hippopotamus",
32 | "Monkey",
33 | "Panda",
34 | "Crocodile",
35 | ];
36 |
37 | export function cn(...inputs: ClassValue[]) {
38 | return twMerge(clsx(inputs));
39 | }
40 |
41 | export function generateRandomName(): string {
42 | const randomAdjective =
43 | adjectives[Math.floor(Math.random() * adjectives.length)];
44 | const randomAnimal = animals[Math.floor(Math.random() * animals.length)];
45 |
46 | return `${randomAdjective} ${randomAnimal}`;
47 | }
48 |
49 | export const getShapeInfo = (shapeType: string) => {
50 | switch (shapeType) {
51 | case "rect":
52 | return {
53 | icon: "/rectangle.svg",
54 | name: "Rectangle",
55 | };
56 |
57 | case "circle":
58 | return {
59 | icon: "/circle.svg",
60 | name: "Circle",
61 | };
62 |
63 | case "triangle":
64 | return {
65 | icon: "/triangle.svg",
66 | name: "Triangle",
67 | };
68 |
69 | case "line":
70 | return {
71 | icon: "/line.svg",
72 | name: "Line",
73 | };
74 |
75 | case "i-text":
76 | return {
77 | icon: "/text.svg",
78 | name: "Text",
79 | };
80 |
81 | case "image":
82 | return {
83 | icon: "/image.svg",
84 | name: "Image",
85 | };
86 |
87 | case "freeform":
88 | return {
89 | icon: "/freeform.svg",
90 | name: "Free Drawing",
91 | };
92 |
93 | default:
94 | return {
95 | icon: "/rectangle.svg",
96 | name: shapeType,
97 | };
98 | }
99 | };
100 |
101 | export const exportToPdf = () => {
102 | const canvas = document.querySelector("canvas");
103 |
104 | if (!canvas) return;
105 |
106 | // use jspdf
107 | const doc = new jsPDF({
108 | orientation: "landscape",
109 | unit: "px",
110 | format: [canvas.width, canvas.height],
111 | });
112 |
113 | // get the canvas data url
114 | const data = canvas.toDataURL();
115 |
116 | // add the image to the pdf
117 | doc.addImage(data, "PNG", 0, 0, canvas.width, canvas.height);
118 |
119 | // download the pdf
120 | doc.save("canvas.pdf");
121 | };
122 |
--------------------------------------------------------------------------------
/components/comments/pinned-thread.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ThreadData } from "@liveblocks/client";
4 | import { Thread } from "@liveblocks/react-comments";
5 | import Image from "next/image";
6 | import { useMemo, useState } from "react";
7 |
8 | import { ThreadMetadata } from "@/liveblocks.config";
9 |
10 | type PinnedThreadProps = {
11 | thread: ThreadData {
41 | onFocus(thread.id);
42 |
43 | // check if click is on/in the composer
44 | if (
45 | e.target &&
46 | e.target.classList.contains("lb-icon") &&
47 | e.target.classList.contains("lb-button-icon")
48 | ) {
49 | return;
50 | }
51 |
52 | setMinimized(!minimized);
53 | }}
54 | >
55 |
82 | ),
83 | // eslint-disable-next-line react-hooks/exhaustive-deps
84 | [thread.comments.length, minimized]
85 | );
86 |
87 | return <>{memoizedContent};
88 | };
89 |
--------------------------------------------------------------------------------
/components/shapes-menu.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Image from "next/image";
4 |
5 | import { Button } from "@/components/ui/button";
6 | import {
7 | DropdownMenu,
8 | DropdownMenuContent,
9 | DropdownMenuTrigger,
10 | } from "@/components/ui/dropdown-menu";
11 | import type { ShapesMenuProps } from "@/types/type";
12 |
13 | export const ShapesMenu = ({
14 | item,
15 | activeElement,
16 | handleActiveElement,
17 | handleImageUpload,
18 | imageInputRef,
19 | }: ShapesMenuProps) => {
20 | const isDropdownElem = item.value.some(
21 | (elem) => elem?.value === activeElement.value
22 | );
23 |
24 | return (
25 | <>
26 |
59 |
70 | {!minimized ? (
71 |
72 | {
76 | e.stopPropagation();
77 | }}
78 | />
79 |
80 | ) : null}
81 |
42 |
66 | );
67 |
68 | type RenderSelectProps = {
69 | config: {
70 | property: string;
71 | placeholder: string;
72 | options: { label: string; value: string }[];
73 | };
74 | fontSize: string;
75 | fontWeight: string;
76 | fontFamily: string;
77 | handleInputChange: (property: string, value: string) => void;
78 | };
79 |
80 | export const RenderSelect = ({
81 | config,
82 | fontSize,
83 | fontWeight,
84 | fontFamily,
85 | handleInputChange,
86 | }: RenderSelectProps) => (
87 |
121 | );
122 |
--------------------------------------------------------------------------------
/components/navbar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Image from "next/image";
4 | import { memo } from "react";
5 |
6 | import { NewThread } from "@/components/comments/new-thread";
7 | import { Button } from "@/components/ui/button";
8 | import { ActiveUsers } from "@/components/users/active-users";
9 | import { navElements } from "@/constants";
10 | import type { ActiveElement, NavbarProps } from "@/types/type";
11 |
12 | import { ShapesMenu } from "./shapes-menu";
13 | import Link from "next/link";
14 | import { links } from "@/config";
15 |
16 | export const Navbar = memo(
17 | ({
18 | activeElement,
19 | imageInputRef,
20 | handleImageUpload,
21 | handleActiveElement,
22 | }: NavbarProps) => {
23 | const isActive = (value: string | ArrayText
43 | 44 |
45 | {RenderSelect({
46 | config: selectConfigs[0],
47 | fontSize,
48 | fontWeight,
49 | fontFamily,
50 | handleInputChange,
51 | })}
52 |
53 |
65 |
54 | {selectConfigs.slice(1).map((config) =>
55 | RenderSelect({
56 | config,
57 | fontSize,
58 | fontWeight,
59 | fontFamily,
60 | handleInputChange,
61 | })
62 | )}
63 |
64 | {shortcut.name}
264 |{shortcut.shortcut}
265 |
18 |
19 |
41 |
42 | ## :bangbang: Folder Structure
43 |
44 | Here is the folder structure of this app.
45 |
46 | ```bash
47 | figma-clone/
48 | |- app/
49 | |-- app.tsx
50 | |-- apple-icon.png
51 | |-- favicon.ico
52 | |-- globals.css
53 | |-- icon1.png
54 | |-- icon2.png
55 | |-- layout.tsx
56 | |-- page.tsx
57 | |-- room.tsx
58 | |- components/
59 | |-- comments/
60 | |-- cursor/
61 | |-- reaction/
62 | |-- settings/
63 | |-- ui/
64 | |-- users/
65 | |-- left-sidebar.tsx
66 | |-- live.tsx
67 | |-- loader.tsx
68 | |-- navbar.tsx
69 | |-- right-sidebar.tsx
70 | |-- shapes-menu.tsx
71 | |- config/
72 | |-- index.ts
73 | |- constants/
74 | |-- index.ts
75 | |- hooks/
76 | |-- use-interval.ts
77 | |- lib/
78 | |-- canvas.ts
79 | |-- key-events.ts
80 | |-- shapes.ts
81 | |-- use-max-zindex.ts
82 | |-- utils.ts
83 | |- public/
84 | |- scripts/
85 | |-- prod.ts
86 | |-- reset.ts
87 | |-- seed.ts
88 | |- store/
89 | |-- use-exit-modal.ts
90 | |-- use-hearts-modal.ts
91 | |-- use-practice-modal.ts
92 | |- types/
93 | |-- declaration.d.ts
94 | |-- type.ts
95 | |- .env.local
96 | |- .env.example
97 | |- .eslintrc.js
98 | |- .gitignore
99 | |- .prettierrc.json
100 | |- components.json
101 | |- environment.d.ts
102 | |- liveblocks.config.ts
103 | |- next.config.mjs
104 | |- package-lock.json
105 | |- package.json
106 | |- postcss.config.js
107 | |- tailwind.config.ts
108 | |- tsconfig.json
109 | ```
110 |
111 | 20 | 21 | # :notebook_with_decorative_cover: Table of Contents 22 | 23 |
24 | 25 | - [Folder Structure](#bangbang-folder-structure) 26 | - [Getting Started](#toolbox-getting-started) 27 | - [Screenshots](#camera-screenshots) 28 | - [Tech Stack](#gear-tech-stack) 29 | - [Stats](#wrench-stats) 30 | - [Contribute](#raised_hands-contribute) 31 | - [Acknowledgements](#gem-acknowledgements) 32 | - [Buy Me a Coffee](#coffee-buy-me-a-coffee) 33 | - [Follow Me](#rocket-follow-me) 34 | - [Learn More](#books-learn-more) 35 | - [Deploy on Netlify](#page_with_curl-deploy-on-netlify) 36 | - [Give A Star](#star-give-a-star) 37 | - [Star History](#star2-star-history) 38 | - [Give A Star](#star-give-a-star) 39 | 40 |112 | 113 | ## :toolbox: Getting Started 114 | 115 | 1. Make sure **Git** and **NodeJS** is installed. 116 | 2. Clone this repository to your local computer. 117 | 3. Create `.env.local` file in **root** directory. 118 | 4. Contents of `.env.local`: 119 | 120 | ```env 121 | # .env.local 122 | 123 | # disable next.js telemetry 124 | NEXT_TELEMETRY_DISABLED=1 125 | 126 | # liveblocks api key 127 | NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=pk_dev_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 128 | 129 | ``` 130 | 131 | ### 5. Set Up Liveblocks 132 | 133 | 1. **Create a Liveblocks Account**: 134 | 135 | - If you don't have a Liveblocks account, sign up at [Liveblocks](https://liveblocks.io/). 136 | 137 | 2. **Create a New Project**: 138 | - After logging in, navigate to the Liveblocks dashboard. 139 | - Click on "Create Project" to set up a new project for Figma-Clone. 140 | - Provide a name for your project and create it. 141 | 142 | ### 6. Obtain the Liveblocks Public Key 143 | 144 | 1. **Navigate to the Project Settings**: 145 | 146 | - In your Liveblocks dashboard, select the project you created for Figma-Clone. 147 | - Go to the "Settings" or "API Keys" section. 148 | 149 | 2. **Copy the Public Key**: 150 | 151 | - You will find the "Public Key" under the API Keys section. Copy the public key that starts with `pk_dev_` and replace placeholder value in `NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY` with the copied value. 152 | 153 | 3. Save and Secure: 154 | 155 | - Save the changes to the `.env.local` file. 156 | 157 | 4. Install Project Dependencies using `npm install --legacy-peer-deps` or `yarn install --legacy-peer-deps`. 158 | 159 | 5. Now app is fully configured 👍 and you can start using this app using either one of `npm run dev` or `yarn dev`. 160 | 161 | **NOTE:** Please make sure to keep your API keys and configuration values secure and do not expose them publicly. 162 | 163 | ## :camera: Screenshots 164 | 165 |  166 | 167 |  168 | 169 |  170 | 171 | ## :gear: Tech Stack 172 | 173 | [](https://react.dev/ "React JS") [](https://nextjs.org/ "Next JS") [](https://www.typescriptlang.org/ "Typescript") [](https://tailwindcss.com/ "Tailwind CSS") [](https://netlify.app/ "Netlify") 174 | 175 | ## :wrench: Stats 176 | 177 | [](https://pagespeed.web.dev/analysis?url=https://clone-figmaa.netlify.app/ "Stats for Figma Clone") 178 | 179 | ## :raised_hands: Contribute 180 | 181 | You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines. 182 | 183 | ## :gem: Acknowledgements 184 | 185 | Useful resources and dependencies that are used in Figma Clone. 186 | 187 | - [@liveblocks/client](https://www.npmjs.com/package/@liveblocks/client): ^1.12.0 188 | - [@liveblocks/react](https://www.npmjs.com/package/@liveblocks/react): ^1.12.0 189 | - [@liveblocks/react-comments](https://www.npmjs.com/package/@liveblocks/react-comments): ^1.12.0 190 | - [@radix-ui/react-context-menu](https://www.npmjs.com/package/@radix-ui/react-context-menu): ^2.1.5 191 | - [@radix-ui/react-dropdown-menu](https://www.npmjs.com/package/@radix-ui/react-dropdown-menu): ^2.0.6 192 | - [@radix-ui/react-label](https://www.npmjs.com/package/@radix-ui/react-label): ^2.0.2 193 | - [@radix-ui/react-select](https://www.npmjs.com/package/@radix-ui/react-select): ^2.0.0 194 | - [@radix-ui/react-slot](https://www.npmjs.com/package/@radix-ui/react-slot): ^1.0.2 195 | - [class-variance-authority](https://www.npmjs.com/package/class-variance-authority): ^0.7.0 196 | - [clsx](https://www.npmjs.com/package/clsx): ^2.1.1 197 | - [fabric](https://www.npmjs.com/package/fabric): ^5.3.0 198 | - [jspdf](https://www.npmjs.com/package/jspdf): ^2.5.1 199 | - [lucide-react](https://www.npmjs.com/package/lucide-react): ^0.379.0 200 | - [next](https://www.npmjs.com/package/next): 14.2.3 201 | - [react](https://www.npmjs.com/package/react): ^18 202 | - [react-dom](https://www.npmjs.com/package/react-dom): ^18 203 | - [tailwind-merge](https://www.npmjs.com/package/tailwind-merge): ^2.3.0 204 | - [tailwindcss-animate](https://www.npmjs.com/package/tailwindcss-animate): ^1.0.7 205 | - [uuid](https://www.npmjs.com/package/uuid): ^9.0.1 206 | - [@types/fabric](https://www.npmjs.com/package/@types/fabric): ^5.3.7 207 | - [@types/node](https://www.npmjs.com/package/@types/node): ^20 208 | - [@types/react](https://www.npmjs.com/package/@types/react): ^18 209 | - [@types/react-dom](https://www.npmjs.com/package/@types/react-dom): ^18 210 | - [@types/uuid](https://www.npmjs.com/package/@types/uuid): ^9.0.8 211 | - [eslint](https://www.npmjs.com/package/eslint): ^8 212 | - [eslint-config-next](https://www.npmjs.com/package/eslint-config-next): 14.2.3 213 | - [postcss](https://www.npmjs.com/package/postcss): ^8 214 | - [tailwindcss](https://www.npmjs.com/package/tailwindcss): ^3.4.1 215 | - [typescript](https://www.npmjs.com/package/typescript): ^5 216 | 217 | ## :coffee: Buy Me a Coffee 218 | 219 | [
](https://www.buymeacoffee.com/sanidhy "Buy me a Coffee")
220 |
221 | ## :rocket: Follow Me
222 |
223 | [](https://github.com/sanidhyy "Follow Me")
224 | [](https://twitter.com/intent/tweet?text=Check+out+this+amazing+app:&url=https%3A%2F%2Fgithub.com%2Fsanidhyy%2Ffigma-clone "Tweet about this project")
225 | [](https://www.youtube.com/@OPGAMER./?sub_confirmation=1 "Subscribe to my YouTube Channel")
226 |
227 | ## :books: Learn More
228 |
229 | To learn more about Next.js, take a look at the following resources:
230 |
231 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
232 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
233 |
234 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
235 |
236 | ## :page_with_curl: Deploy on Netlify
237 |
238 | The simplest way to deploy your React.js app is to use the [Netlify Platform](https://app.netlify.com/start) - a powerful platform for modern web projects.
239 |
240 | Explore the [Netlify deployment documentation](https://docs.netlify.com/site-deploys/create-deploys) for step-by-step instructions on deploying your React.js app on Netlify.
241 |
242 | Happy coding, and feel free to share your thoughts and improvements with the [Netlify community](https://community.netlify.com)!
243 |
244 | ## :star: Give A Star
245 |
246 | You can also give this repository a star to show more people and they can use this repository.
247 |
248 | ## :star2: Star History
249 |
250 |
251 | 259 | 260 | -------------------------------------------------------------------------------- /lib/canvas.ts: -------------------------------------------------------------------------------- 1 | import { fabric } from "fabric"; 2 | import { v4 as uuid4 } from "uuid"; 3 | 4 | import { defaultNavElement } from "@/constants"; 5 | import { 6 | CanvasMouseDown, 7 | CanvasMouseMove, 8 | CanvasMouseUp, 9 | CanvasObjectModified, 10 | CanvasObjectScaling, 11 | CanvasPathCreated, 12 | CanvasSelectionCreated, 13 | RenderCanvas, 14 | } from "@/types/type"; 15 | 16 | import { createSpecificShape } from "./shapes"; 17 | 18 | // initialize fabric canvas 19 | export const initializeFabric = ({ 20 | fabricRef, 21 | canvasRef, 22 | }: { 23 | fabricRef: React.MutableRefObject