Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pakagronglb/figpro-figma-clone
FigPro is a Figma clone built with modern web technologies. This project demonstrates real-time collaborative design capabilities using Liveblocks, with a powerful canvas implementation using Fabric.js.
https://github.com/pakagronglb/figpro-figma-clone
fabric figma nextjs react
Last synced: 5 days ago
JSON representation
FigPro is a Figma clone built with modern web technologies. This project demonstrates real-time collaborative design capabilities using Liveblocks, with a powerful canvas implementation using Fabric.js.
- Host: GitHub
- URL: https://github.com/pakagronglb/figpro-figma-clone
- Owner: pakagronglb
- Created: 2025-01-03T12:07:53.000Z (5 days ago)
- Default Branch: main
- Last Pushed: 2025-01-03T12:09:21.000Z (5 days ago)
- Last Synced: 2025-01-03T13:20:00.600Z (5 days ago)
- Topics: fabric, figma, nextjs, react
- Language: TypeScript
- Homepage: https://figpro-figma-clone.vercel.app
- Size: 482 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FigPro - A Figma Clone
## 🎨 Overview
FigPro is a Figma clone built with modern web technologies. This project demonstrates real-time collaborative design capabilities using Liveblocks, with a powerful canvas implementation using Fabric.js.
## ✨ Features
- 🎨 Real-time collaborative canvas
- 🖼️ Shape creation and manipulation
- 👥 Multi-user cursors
- 💬 Real-time comments
- 📱 Responsive design
- 🎯 Advanced shape controls
- 💾 Export to PDF functionality
## 🛠️ Tech Stack
- **Framework:** Next.js 14
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **Canvas Library:** Fabric.js
- **UI Components:** Radix UI
- **Real-time Collaboration:** Liveblocks
- **PDF Export:** jsPDF
## 🚀 Getting Started
1. Clone the repository:
```bash
git clone https://github.com/pakagronglb/figpro-figma-clone.git
```
2. Install dependencies:
```bash
npm install
```
3. Create a `.env` file and add your environment variables:
```env
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=your_liveblocks_public_key
```
## 🧰 Project Structure
```bash
README.md
figpro-figma-clone/
├── app/
│ ├── layout.tsx
│ └── page.tsx
├── components/
├── lib/
└── public/
```
## 🤝 Contributing
Contributions, issues, and feature requests are welcome!
## 📜 License
This project is licensed under the MIT License.
## 🙏 Acknowledgments
This project was built following the tutorial by [JavaScript Mastery](https://www.youtube.com/watch?v=oKIThIihv60). Special thanks to Adrian for the excellent guidance and teaching.
## 📫 Contact
For any questions or feedback, please reach out to [your contact information].
---
Built with ❤️ by Pakagrong