https://github.com/tariqkichawele/figpro
A figma-clone web application built using Next.js
https://github.com/tariqkichawele/figpro
Last synced: 8 months ago
JSON representation
A figma-clone web application built using Next.js
- Host: GitHub
- URL: https://github.com/tariqkichawele/figpro
- Owner: TariqKichawele
- Created: 2024-03-08T14:59:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-13T15:47:52.000Z (over 1 year ago)
- Last Synced: 2025-02-16T02:44:15.341Z (10 months ago)
- Language: TypeScript
- Homepage: https://figma-clone-jade-ten.vercel.app
- Size: 242 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FigPro
- 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](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](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`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.