- Welcome to FigPro, a minimalistic Figma clone built with Next.js. FigPro showcases real-world features like live collaboration with cursor chat, comments, reactions, and drawing designs on the canvas using Fabric.js. The application provides a collaborative environment for users to design and collaborate on projects in real-time.
Technologies Used
Frontend:
- Next.js: A React framework for building server-side rendered (SSR) and static web applications.
- TypeScript: A statically typed superset of JavaScript for building scalable and robust applications.
- Tailwind CSS: A utility-first CSS framework for styling web interfaces.
Libraries:
- Fabric.js: A JavaScript library for interactive and customizable HTML5 canvas graphics.
- Liveblocks: A platform for building real-time collaborative applications.
- Shadcn: A library for implementing shadow effects in web applications.
Features
-
Multi Cursors, Cursor Chat, and Reactions: Enable real-time collaboration by displaying individual cursors, providing cursor chat for communication, and reactions for interactive engagement.
-
Active Users: Display a list of currently active users in the collaborative environment, offering visibility into engagement.
-
Comment Bubbles: Allow users to attach comments to specific elements on the canvas, fostering communication and feedback on design components.
-
Creating Different Shapes: Provide tools for users to generate a variety of shapes on the canvas, facilitating diverse design elements.
-
Uploading Images: Import images onto the canvas, expanding the range of visual content in the design.
-
Customization: Allow users to adjust the properties of design elements, offering flexibility in customization and fine-tuning visual components.
-
Freeform Drawing: Enable users to draw freely on the canvas, promoting artistic expression and creative design.
-
Undo/Redo: Provide the ability to reverse (undo) or restore (redo) previous actions, offering flexibility in design decision-making.
-
Keyboard Actions: Utilize keyboard shortcuts for various actions, enhancing efficiency and accessibility.
-
History: Review the chronological history of actions and changes made on the canvas, aiding in project management and version control.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.