Real-Time Figma Clone

Project Screenshots

Auth

Description of the Auth screen.

Dashboard

Editor

Prerequisites

Get Started

Tech Stack

Project Development Rules

Features

🔧 Prerequisites

Before getting started, ensure you have the following:

1. Node.js:

   • Install from nodejs.org.
   • Recommended version: 14.x or higher.

2. npm (Node Package Manager):

   • Included with Node.js. Verify installation:

     npm -v

3. React:

   • Basic understanding required. Learn more at the React documentation.

4. TypeScript:

   • Familiarity with TypeScript. Learn more from the TypeScript documentation.

⚙️ Get Started

To set up the Real-Time Figma Clone:

1. Clone the Repository:

   git clone https://github.com/srosama/figma-clone.git
   cd figma-clone/figma-clone

2. Install Dependencies:

   npm install

3. Start the Development Server:

   npm run dev

4. Open the Application: Navigate to http://localhost:5173 in your browser.

⚙️ Tech Stack

• React.js
• React-router
• Vite
• TypeScript
• Liveblocks
• Fabric.js
• Shadcn
• Firebase
• MongoDB (NoSQL)
• GSAP
• Tailwind CSS

Project Development Rules

1. Follow & Create SDLC (Software Development Life Cycle): Plan, design, develop, test, deploy, and maintain the application systematically.
2. Intermediate in React: Ensure a solid understanding of React concepts and best practices.
3. Algorithmic Thinking: Solve problems efficiently with algorithmic principles.
4. Fundamentals of Tools and Libraries: Master the tools and libraries used in the project.
5. Design Patterns for JavaScript and React: Write scalable, maintainable code using design patterns.
6. Intermediate Level with TypeScript: Write type-safe code and leverage TypeScript's features.
7. Real-Time Knowledge: Implement real-time collaboration with Liveblocks.
8. Serverless Backend with Firebase: Utilize Firebase for authentication, database, and cloud functions.
9. Intermediate Level with NoSQL (MongoDB): Manage and query MongoDB effectively.
10. Concurrency (Asynchronous/Synchronous): Handle asynchronous operations and concurrency in JavaScript.
11. Documentation: Maintain clear and comprehensive documentation.
12. Software Architecture and Best Practices: Design with scalability and best practices in mind.
13. Understanding Technical Debt: Manage technical debt for long-term project health.

✨ Features

🖱️ Multi-Cursors, Cursor Chat

• Multi-Cursors: Allows multiple users to collaborate simultaneously by showing individual cursors.
• Cursor Chat: Enables real-time chat within the collaborative environment.

🧑‍🤝‍🧑 Active Users

• Displays a list of currently active users in the collaborative environment, offering visibility into who is engaged.

💬 Comment Bubbles (Soon)

• Attach comments to specific elements on the canvas, facilitating communication and feedback on design components.

⬛ Creating Different Shapes

• Tools for generating a variety of shapes on the canvas for diverse design elements.

🖼️ Uploading Images (Soon)

• Import images onto the canvas to expand the range of visual content in your design.

🎨 Customization

• Adjust properties of design elements to customize and fine-tune visual components.

✏️ Freeform Drawing (Soon)

• Draw freely on the canvas to promote artistic expression and creative design.

⏪ Undo/Redo

• Reverse (undo) or restore (redo) previous actions, providing flexibility in design decisions.

⌨️ Keyboard Actions

• Use keyboard shortcuts for actions like copying, pasting, deleting, and triggering features such as cursor chat and reactions.

🗑️ Deleting, Scaling, Moving, Clearing, Exporting Canvas

• Manage design elements with functions for deletion, scaling, moving, clearing, and exporting the final design for external use.

🛠️ And More

• Explore advanced features including code architecture, advanced React hooks, and reusability.