Back to projects
Figma Clone

Figma Clone

Seyed Keyvan Hosseini / September 16, 2024

This project is a Figma-inspired collaborative design tool, built with modern web technologies including Next.js 14, Tailwind CSS, and LiveBlocks for real-time collaboration. It includes advanced key bindings, a custom canvas, and extensive use of web sockets to provide a smooth, interactive experience.

You can view the live project here and check out the code on GitHub here.

Features

  • Custom Canvas: Developed a custom canvas for drawing and editing design elements.
  • Real-time Collaboration: Integrated LiveBlocks for seamless multi-user collaboration with real-time updates.
  • Advanced Key Bindings: Implemented advanced keyboard shortcuts for an improved user workflow.
  • WebSocket Integration: Leveraged WebSockets for real-time communication and live updates between users.
  • Responsive Design: Designed using ShadCN components and styled with Tailwind CSS for responsiveness and customization.

Technologies

  • Next.js 14: Used for the front-end framework to handle both the UI and backend API routes.
  • LiveBlocks: A powerful library for real-time collaboration, handling live editing and synchronization across clients.
  • Tailwind CSS: A utility-first CSS framework that allows for rapid and responsive UI development.
  • ShadCN: Component library used for accessible and customizable UI components.
  • WebSockets: Custom integration of WebSockets for live data flow between clients during collaborative design sessions.
  • Vercel: Hosting and deployment done on Vercel for fast and scalable performance.

Getting Started

To get started with this project, you can clone the repository and install the dependencies:

git clone https://github.com/skh113/figma-clone.git
cd figma-clone
npm install

Do not for get to include this key in your .env.local file.

NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY

The development server will start at http://localhost:3000.

Deployment

To deploy this project, connect your GitHub repository to Vercel for seamless deployment and automatic updates upon each push to the repository.

Conclusion

The Figma Clone project is an advanced web application demonstrating real-time collaboration and custom canvas development. By leveraging modern tools like LiveBlocks, WebSockets, and Next.js 14, this project offers a powerful platform for collaborative design, with an emphasis on responsiveness and ease of use.