{"id":16139956,"url":"https://github.com/ladunjexa/nextjs14-figma","last_synced_at":"2026-02-09T01:03:53.269Z","repository":{"id":238936235,"uuid":"796954522","full_name":"ladunjexa/nextjs14-figma","owner":"ladunjexa","description":"🖌️ FigPro is a collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.","archived":false,"fork":false,"pushed_at":"2024-05-16T21:38:33.000Z","size":2673,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-24T10:32:50.189Z","etag":null,"topics":["fabricjs","figma-clone","jspdf","liveblocks","nextjs14-tailwindcss","realtime-collaboration"],"latest_commit_sha":null,"homepage":"https://nextjs14-figma.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ladunjexa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"publiccode":null,"codemeta":null}},"created_at":"2024-05-06T23:43:31.000Z","updated_at":"2025-06-30T11:07:31.000Z","dependencies_parsed_at":"2024-05-16T22:38:04.658Z","dependency_job_id":null,"html_url":"https://github.com/ladunjexa/nextjs14-figma","commit_stats":null,"previous_names":["ladunjexa/nextjs14-figma"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/ladunjexa/nextjs14-figma","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-figma","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-figma/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-figma/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-figma/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ladunjexa","download_url":"https://codeload.github.com/ladunjexa/nextjs14-figma/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-figma/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29252659,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-08T22:49:53.206Z","status":"ssl_error","status_checked_at":"2026-02-08T22:49:51.384Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","figma-clone","jspdf","liveblocks","nextjs14-tailwindcss","realtime-collaboration"],"created_at":"2024-10-09T23:50:16.072Z","updated_at":"2026-02-09T01:03:53.251Z","avatar_url":"https://github.com/ladunjexa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js 14 FigPro (Figma Clone)\n\n\u003c!-- GitHub badges --\u003e\n\n[![Latest release](https://img.shields.io/github/v/release/ladunjexa/nextjs14-figma?label=Latest%20release\u0026style=social)](https://github.com/ladunjexa/nextjs14-figma/releases/tag/v0.1.0)\n[![Stars](https://img.shields.io/github/stars/ladunjexa/nextjs14-figma?style=social)](https://github.com/ladunjexa/nextjs14-figma/stargazers)\n[![Fork](https://img.shields.io/github/forks/ladunjexa/nextjs14-figma?style=social)](https://github.com/ladunjexa/nextjs14-figma/forks)\n[![GitHub commits](https://img.shields.io/github/commit-activity/t/ladunjexa/nextjs14-figma?style=social\u0026logo=github)](https://github.com/ladunjexa/nextjs14-figma/commits)\n[![Pull requests](https://img.shields.io/github/issues-pr/ladunjexa/nextjs14-figma?style=social\u0026logo=github)](https://github.com/ladunjexa/nextjs14-figma/pulls)\n\n![demo](https://i.postimg.cc/FHjF4tjS/thumbnail.png)\n\n[![ladunjexa](https://custom-icon-badges.demolab.com/badge/made%20by%20-ladunjexa-556bf2?logo=github\u0026logoColor=white\u0026labelColor=101827)](https://github.com/luadnjexa)\n[![License](https://img.shields.io/github/license/ladunjexa/nextjs14-figma?color=dddddd\u0026labelColor=000000)](https://github.com/ladunjexa/nextjs14-figma/blob/main/LICENSE)\n[![Top Language](https://img.shields.io/github/languages/top/ladunjexa/nextjs14-figma?logo=github\u0026logoColor=%23007ACC\u0026label=TypeScript)](https://www.typescriptlang.org/)\n[![Contributors](https://img.shields.io/github/contributors/ladunjexa/nextjs14-figma?style=flat\u0026color=orange\u0026label=Contributors)](https://github.com/ladunjexa/nextjs14-figma/graphs/contributors)\n![Release](https://img.shields.io/github/release/ladunjexa/nextjs14-figma.svg)\n![PRs](https://img.shields.io/badge/PRs-welcome-ff69b4.svg?style=shields)\n![deployment](https://img.shields.io/github/deployments/ladunjexa/nextjs14-figma/Production?logo=vercel\u0026label=Website)\n[![Known Vulnerabilities](https://snyk.io/test/github/ladunjexa/nextjs14-figma/badge.svg)](https://snyk.io/test/github/ladunjexa/nextjs14-figma)\n\n## 🌐 Live Demo\n\nExplore the live demonstration of the project: [nextjs14-figma](https://nextjs14-figma.vercel.app/)\n\n## 📝 Description\n\n**FigPro** is a Figma Clone built with Next.js 14 and Tailwind CSS using Liveblocks and Fabric.js.\nIt is a collaborative design tool for building meaningful products. Seamlessly design, prototype,\ndevelop, and collect feedback in a single platform.\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eFolder Structure\u003c/b\u003e\u003c/summary\u003e\n\n```bash\nnextjs14-figma/\n├── .vscode/\n│   └── settings.json\n├── app/\n│   ├── (root)/\n│   │   └── app.tsx\n│   ├── api/\n│   │   └── liveblocks/\n│   │       └── auth.ts\n│   ├── favicon.ico\n│   ├── globals.css\n│   ├── layout.tsx\n│   └── page.tsx\n├── components/\n│   ├── comments/\n│   │   ├── comments-overlay.tsx\n│   │   ├── comments.tsx\n│   │   ├── new-thread-cursor.tsx\n│   │   ├── new-thread.tsx\n│   │   ├── pinned-composer.tsx\n│   │   └── pinned-thread.tsx\n│   ├── cursor/\n│   │   ├── cursor-chat.tsx\n│   │   ├── cursor.tsx\n│   │   └── live-cursors.tsx\n│   ├── layout/\n│   │   ├── left-sidebar.tsx\n│   │   ├── loader.tsx\n│   │   ├── navbar.tsx\n│   │   └── right-sidebar.tsx\n│   ├── live.tsx\n│   ├── reaction/\n│   │   ├── flying-reaction.module.css\n│   │   ├── flying-reaction.tsx\n│   │   └── reaction-selector.tsx\n│   ├── settings/\n│   │   ├── color.tsx\n│   │   ├── dimension.tsx\n│   │   ├── export.tsx\n│   │   └── text.tsx\n│   ├── shapes-menu.tsx\n│   ├── ui/\n│   │   ├── button.tsx\n│   │   ├── context-menu.tsx\n│   │   ├── dialog.tsx\n│   │   ├── dropdown-menu.tsx\n│   │   ├── input.tsx\n│   │   ├── label.tsx\n│   │   └── select.tsx\n│   └── users/\n│       ├── avatar.module.css\n│       ├── avatar.tsx\n│       └── live-avatars.tsx\n├── constants/\n│   └── index.ts\n├── hooks/\n│   ├── use-interval.ts\n│   └── use-max-z-index.ts\n├── lib/\n│   ├── canvas.ts\n│   ├── key-events.ts\n│   ├── shapes.ts\n│   └── utils.ts\n├── providers/\n│   └── room-provider.tsx\n├── public/\n│   ├── .DS_Store\n│   ├── assets/\n│   │   ├── CursorSVG.tsx\n│   │   └── [[...]].{svg,gif,ico}\n│   ├── next.svg\n│   ├── thumbnail.png\n│   └── vercel.svg\n├── types/\n│   ├── declaration.d.ts\n│   └── index.ts\n└── utils/\n│   └── get-contrasting-color.ts\n├── .env.local\n├── .eslintignore\n├── .eslintrc.json\n├── .gitignore\n├── .prettierignore\n├── .prettierrc\n├── components.json\n├── liveblocks.config.ts\n├── next-env.d.ts\n├── next.config.mjs\n├── package-lock.json\n├── package.json\n├── postcss.config.mjs\n├── README.md\n├── tailwind.config.ts\n└── tsconfig.json\n```\n\n\u003c/details\u003e\n\n## 📖 Table of Contents\n\n\u003cdetails\u003e\u003csummary\u003eTable of Contents\u003c/summary\u003e\n\n- [Live Demo](#-live-demo)\n- [Description](#-description)\n- [Technologies Used](#-technologies-used)\n- [Get Started](#-get-started)\n  - [Prerequisites](#-prerequisites)\n  - [Installation and Run Locally](#-installation-and-run-locally)\n  - [Scripts](#-scripts)\n- [Environment Variables](#-environment-variables)\n- [Deployment](#-deployment)\n  - [Deploy to production (manual)](#-deploy-to-production-manual)\n  - [Deploy on Vercel (recommended)](#-deploy-on-vercel-recommended)\n  - [Deploy on Netlify](#-deploy-on-netlify)\n- [Contributing](#-contributing)\n  - [Bug / Feature Request](#-bug--feature-request)\n- [Acknowledgements](#-acknowledgements)\n- [Contact Us](#-contact-us)\n- [License](#-license)\n\n\u003c/details\u003e\n\n## ✨ Technologies Used\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eFigPro\u003c/b\u003e is built using the following technologies:\u003c/summary\u003e\n\n- [TypeScript](https://www.typescriptlang.org/): TypeScript is a typed superset of JavaScript that\n  compiles to plain JavaScript.\n- [Next.js](https://nextjs.org/): Next.js is a React framework for building server-side rendered and\n  statically generated web applications.\n- [Tailwind CSS](https://tailwindcss.com/): Tailwind CSS is a utility-first CSS framework for\n  rapidly building custom user interfaces.\n- [Liveblocks](https://liveblocks.io/): Liveblocks is a real-time collaboration API for building\n  collaborative applications.\n- [Fabric.js](http://fabricjs.com/): Fabric.js is a powerful and simple JavaScript HTML5 canvas\n  library.\n- [Framer Motion](https://www.framer.com/motion/): Framer Motion is a production-ready motion\n  library for React.\n- [ESLint](https://eslint.org/): ESLint is a static code analysis tool for identifying problematic\n  patterns found in JavaScript code.\n- [Prettier](https://prettier.io/): Prettier is an opinionated code formatter.\n- [Shadcn-UI](https://ui.shadcn.com/): Shadcn UI is a React UI library that helps developers rapidly\n  build modern web applications.\n- [jsPDF](https://parall.ax/products/jspdf): jsPDF is a client-side JavaScript PDF generation\n  library.\n- [Vercel](https://vercel.com/): Vercel is a cloud platform for frontend developers, providing the\n  frameworks, workflows, and infrastructure to build a faster, more personalized Web.\n\n\u003c/details\u003e\u003cbr/\u003e\n\n[![Technologies Used](https://skillicons.dev/icons?i=ts,nextjs,tailwind,vercel)](https://skillicons.dev)\n\n## 🧰 Get Started\n\nTo get this project up and running in your development environment, follow these step-by-step\ninstructions.\n\n### 📋 Prerequisites\n\nIn order to install and run this project locally, you would need to have the following installed on\nyour local machine.\n\n- [Node.js](https://nodejs.org/en/)\n- [NPM](https://www.npmjs.com/get-npm)\n- [Git](https://git-scm.com/downloads)\n\n### ⚙️ Installation and Run Locally\n\n**Step 0:**\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e - the application uses Liveblocks for Real-time Collaboration, therefore, you need to create\n\u003e   Liveblocks account [here](https://liveblocks.io/) and sets the\n\u003e   `NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY` and `NEXT_PUBLIC_LIVEBLOCKS_SECRET_KEY` environment\n\u003e   variables in `.env` file.\n\n**Step 1:**\n\nDownload or clone this repo by using the link below:\n\n```bash\ngit clone https://github.com/ladunjexa/nextjs14-figma.git\n```\n\n**Step 2:**\n\nExecute the following command in the root directory of the downloaded repo in order to install\ndependencies:\n\n```bash\nnpm install\n```\n\n**Step 3:**\n\nExecute the following command in order to run the development server locally:\n\n```bash\nnpm run dev\n```\n\n**Step 4:**\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n### 📜 Scripts\n\nAll scripts are defined in the `package.json` file. Here is a list of all scripts:\n\n| Script          | Action                                      |\n| :-------------- | :------------------------------------------ |\n| `npm install`   | Installs dependencies                       |\n| `npm run dev`   | Starts local dev server at `localhost:3000` |\n| `npm run build` | Build your production site to `./dist/`     |\n| `npm run start` | Start your production site locally          |\n| `npm run lint`  | Run ESLint                                  |\n\n## 🔒 Environment Variables\n\nEnvironment variables[^2] can be used for configuration. They must be set before running the app.\n\n\u003e [Environment variables](https://en.wikipedia.org/wiki/Environment_variable) are variables that are\n\u003e set in the operating system or shell, typically used to configure programs.\n\n**FigPro** uses [Liveblocks](https://liveblocks.io) for real-time collaboration. You need to create\nan account on Liveblocks and get the required credentials to run the app.\n\nCreate a `.env` file in the root directory of the project and add the following environment\nvariables:\n\n```env\nNEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=\u003cLIVEBLOCKS_PUBLIC_KEY\u003e\nNEXT_PUBLIC_LIVEBLOCKS_SECRET_KEY=\u003cLIVEBLOCKS_SECRET_KEY\u003e\n```\n\n## 🚀 Deployment\n\n#### Deploy to production (manual)\n\nYou can create an optimized production build with the following command:\n\n```bash\nnpm run build\n```\n\n#### Deploy on Vercel (recommended)\n\nThe easiest way to deploy this Next.js app is to use the\n[Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme).\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fladunjexa%2Fnextjs14-figma)\n\n#### Deploy on Netlify\n\nYou can also deploy this Next.js app with [Netlify](https://www.netlify.com/).\n\n[![Deploy with Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ladunjexa/nextjs14-figma)\n\nCheck out [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n\n## 🔧 Contributing\n\n[![contributors](https://contrib.rocks/image?repo=ladunjexa/nextjs14-figma)](https://github.com/ladunjexa/nextjs14-figma/graphs/contributors)\n\nContributions are what make the open source community such an amazing place to learn, inspire, and\ncreate. Any contributions you make are **greatly appreciated**.\n\nTo fix a bug or enhance an existing module, follow these steps:\n\n1. Fork the repo\n2. Create a new branch (`git checkout -b improve-feature`)\n3. Make the appropriate changes in the files\n4. Commit your changes (`git commit -m 'Improve feature'`)\n5. Push to the branch (`git push origin improve-feature`)\n6. Create a Pull Request 🎉\n\n### 📩 Bug / Feature Request\n\nIf you find a bug (failure of a module to execute its intended function), kindly open an issue\n[here](https://github.com/ladunjexa/nextjs14-figma/issues/new) by including the issue with a title\nand clear description.\n\nIf you'd like to request a new function, feel free to do so by opening an issue\n[here](https://github.com/ladunjexa/nextjs14-figma/issues/new). Please include sample queries and\ntheir corresponding results.\n\n## 💎 Acknowledgements\n\nI'd like to express my gratitude to the following people who helped me with this project and made it\npossible:\n\n- [Next.js](https://nextjs.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Liveblocks](https://liveblocks.io/)\n- [Fabric.js](http://fabricjs.com/)\n- [Radix](https://radix-ui.com/)\n- [Shadcn UI](https://ui.shadcn.com/)\n- [Framer Motion](https://www.framer.com/motion/)\n- [jsPDF](https://parall.ax/products/jspdf)\n- [UUID](https://www.npmjs.com/package/uuid)\n- [Vercel](https://vercel.com/)\n- [JavaScript Mastery](https://www.jsmastery.pro/)\n\n## 📞 Contact Us\n\n[![Telegram](https://img.shields.io/badge/Telegram-@ladunjexa-2CA5E0?style=social\u0026logo=telegram\u0026logoColor=000000)](https://t.me/ladunjexa)\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-ladunjexa-blue?style=flat\u0026logo=linkedin\u0026logoColor=b0c0c0\u0026labelColor=363D44)](https://www.linkedin.com/in/lironabutbul)\n[![Instagram](https://img.shields.io/badge/Instagram-ladunjexa-grey?style=flat\u0026logo=instagram\u0026logoColor=b0c0c0\u0026labelColor=8134af)](https://www.instagram.com/ladunjexa)\n[![Discord](https://img.shields.io/badge/Discord-ladunjexa-7289da?style=flat\u0026logo=discord\u0026logoColor=b0c0c0\u0026labelColor=2c2f33)](https://discord.com/users/827996364331810816)\n\n\u003c!-- [![Twitter](https://img.shields.io/twitter/follow/ladunjexa.svg?style=social)](https://twitter.com/intent/follow?screen_name=ladunjexa) --\u003e\n\n## 📋 License\n\n**FigPro** is open source software [licensed as MIT](https://opensource.org/license/mit/) and is\nfree to use — See [LICENSE](https://github.com/ladunjexa/nextjs14-figma/blob/main/LICENSE) for more\ndetails.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fladunjexa%2Fnextjs14-figma","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fladunjexa%2Fnextjs14-figma","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fladunjexa%2Fnextjs14-figma/lists"}