Crafter.

io
Web-based product management and collaboration platform

A Project Report

Submitted in partial fulfilment of the Requirements for the award of the Degree of

BACHELOR OF SCIENCE (INFORMATION TECHNOLOGY)

By

Mr. Suryaprasad Yadav

Seat No. 3021620

Under the esteemed guidance of

Prof. Aarti Patkar

IT Co-ordinator

DEPARTMENT OF INFORMATION TECHNOLOGY

VALIA C.L. COLLEGE OF COMMERCE & VALIA L.C
COLLEGE OF ARTS CES ROAD D.N. NAGAR

(Affiliated to University of Mumbai)

Mumbai – Maharashtra – 400053.

2024-2025
1

PROFORMA FOR THE APPROVAL PROJECT PROPOSAL

(Note: All entries of the proforma of approval should be filled up with appropriate and complete
information. Incomplete proforma of approval in any respect will be summarily rejected.)

PNR NO.: 2022016401588471 Roll no:

1. Name of the Student

2. Title of the Project

3. Name of the Guide

4. Teaching experience of the Guide:

5. Is this your first submission? Yes No

Signature of the Student Signature of the

Date: Guide Date:

Signature of the Coordinator

Date:

2
 VALIA C.L COLLEGE OF
INFORMATION TECHNOLOGY
(Affiliated to University of Mumbai)
Mumbai – Maharashtra – 400053.

DEPARTMENT OF INFORMATION
TECHNOLOGY

CERTIFICATE
This is to certify that the project entitled, "[Link] (web-based product management
and collaboration platform)", is the bonafide work of Suryaprasad Yadav bearing Seat
No: 3021620 submitted in partial fulfillment of the requirements for the award of degree of
BACHELOR OF SCIENCE in INFORMATION TECHNOLOGY
from University of Mumbai.

Internal Guide Coordinator

External Examiner

Date: College Seal

3
 ABSTRACT

In modern work environments, efficient collaboration and document management are

crucial for productivity. This project presents a web-based platform designed to
facilitate seamless team collaboration, allowing users to create, manage, and share
documents, diagrams, and structured content.

The system enables real-time editing and organization of workspaces while integrating
essential features such as version control, user roles, and access permissions.
Advanced functionalities, including diagram generation, markdown support,
and AI-assisted content structuring, enhance workflow efficiency.

The project involves backend implementation using Convexdb with Node js,
ensuring robust data handling, while the frontend is built with React and [Link] for a
smooth user experience. Additional enhancements include real-time updates via
WebSockets and a dark-themed UI inspired by ShadCn Ui for a modern, user-
friendly interface.

This platform aims to provide teams with an intuitive and powerful workspace for
document collaboration, knowledge sharing, and structured project
management, ultimately boosting productivity and innovation.

4
 ACKNOWLEDGEMENT

I would like to express my sincere gratitude to our Project Co-Ordinator Prof. Aarti
Patkar who has played a vital role in the development of my project Suryaprasad
Yadav. Your support, guidance, and expertise have been invaluable in creating a
system that meets the needs of our clients.

Your feedback and suggestions have helped us to improve the functionality of the
system and make it more user-friendly. Your knowledge and insights have been
crucial in ensuring that the system meets the highest standards of excellence.

We appreciate your dedication and commitment to helping us create a system that

enhances the canteen food ordering experience for our clients. Your partnership has
been instrumental in making this project a success.

We would also like to thank our college that have supported us throughout the
development process. Your partnership has been essential in enabling us to create a
system that meets the highest standards of excellence.

Once again, thank you to all the teachers who have supported us in this project. Your
contributions have been invaluable, and we are grateful for your partnership.

5
 DECLARATION

I hereby declare that the project entitled, “[Link] – Web-Based Product

Management and Collaboration Platform”, done at Valia C.L. College of
Information Technology, has not been duplicated or submitted to any other
university for the award of any degree. To the best of my knowledge, no one other
than myself has submitted this project elsewhere.

This project is completed in partial fulfillment of the requirements for the award of
the degree of BACHELOR OF SCIENCE (INFORMATION TECHNOLOGY)
and is submitted as the final semester project as part of the curriculum.

Signature:
Suryaprasad Yadav
Seat No.: 3021620

6
 TABLE OF CONTENTS

Sr. No Chapters Page No.

1 INTRODUCTION

1.1 Background 10
1.2 Objectives 11
1.3 Purpose, Scope & Applicability 11
1.3.1 Purpose 11
1.3.2 Scope 11
1.3.3 Applicability 12
1.4 Achievements 12
1.5 Organization of Report 12

2 SURVEY OF TECHNOLOGIES

2.1 HTML 13

2.2 Css 13

2.3 Tailwind Css 14

2.4 React js 14
2.5 Next Js 15
2.6 16
Convex Database

2.7 17
Kinde Authentication

2.8 Google Gemini Ai Api 18

7
8
3 REQUIREMENTS & ANALYSIS
3.1 Problem Definition 18

3.2 Requirement Specification 19

3.3 Planning & Scheduling 22
3.4 Software and Hardware Requirements 24
3.5 Preliminary Product Description 25
3.6 Conceptual Models 26

4 SYSTEM DESIGN

4.1 Basic Models 31

4.2 Security Issues 33

4.3 Test Case Design 34

5 IMPLEMENTATION AND TESTING

5.1 Coding and details 35

6 RESULTS AND DISCUSSION

6.1 Output Screens 74

7 CONCLUSIONS AND REFERENCES

7.1 Conclusion 81
7.2 References 82

9
 TABLE OF FIGURES

Fig. Models/Diagrams Page

No No
3.3 23
GANTT Chart
3.6 Activity Diagram 26

3.6 Class Diagram 27

3.6 Component Diagram 28

3.6 Use Case Diagram 29

3.6 Sequence Diagram 30

10
 CHAPTER 1: INTRODUCTION

In modern work environments, effective product management and team collaboration play a vital
role in improving productivity and workflow efficiency. Managing documents, diagrams, and
structured content in real time is essential for teams working on complex projects.
This project, [Link] – Web-Based Product Management and Collaboration Platform, provides a real-
time, collaborative workspace where users can create, edit, and manage documents and diagrams efficiently.
It integrates [Link] for the frontend, Convex for real-time backend functionality, and Kinde for
authentication, ensuring seamless user interactions and security.

The platform supports rich-text editing using EditorJS, real-time diagramming with Excalidraw, and team-
based file management. The system ensures real-time synchronization, allowing multiple users to
collaborate seamlessly on shared workspaces.

By leveraging modern web technologies and AI-powered features, [Link] aims to enhance team
productivity, knowledge sharing, and efficient project management in a streamlined and user-friendly
manner.

1.1 Background:

In the modern digital workspace, efficient product management and seamless collaboration are
essential for teams working on complex projects. Traditional methods of document handling and
diagram creation often involve multiple disconnected tools, leading to inefficiencies, version
control issues, and collaboration barriers.
To address these challenges, [Link] – Web-Based Product Management and Collaboration Platform
provides a real-time, collaborative environment for managing documents, diagrams, and structured
content. By integrating modern web technologies like [Link], Convex, and Excalidraw, [Link] enables
teams to work together effortlessly, improving workflow efficiency and project management.

Unlike conventional collaboration tools, [Link] emphasizes:

• Real-time document editing with EditorJS

• Interactive diagramming with Excalidraw
• Team-based file management with hierarchical organization
• AI-powered assistance for enhanced productivity

By offering a centralized, intuitive, and real-time collaborative platform, [Link] aims to streamline team
workflows, reduce inefficiencies, and enhance productivity across various industries.

11
 1.2 Objective:

The primary objectives of this project, [Link] – Web-Based Product Management and
Collaboration Platform, are:
1. Real-time Document Editing:

• Implement a rich-text editor (EditorJS) for structured content creation.

• Support multiple block types such as headers, lists, tables, and code snippets.
• Enable real-time collaborative editing for seamless teamwork.
2. Interactive Diagramming:

• Integrate Excalidraw for whiteboard-based diagramming.

• Allow users to create, edit, and share visual content within workspaces.
• Ensure real-time updates for multi-user collaboration.
3. Efficient File Management:

• Develop a team-based file organization system with hierarchical structures.

• Implement features like file creation, renaming, priority assignment, and sharing.
• Support metadata management for better organization and retrieval.
4. Real-time Collaboration and Synchronization:

• Utilize Convex as the backend for real-time data updates.

• Ensure seamless user interactions across documents and diagrams.
• Implement team-based access controls for role-based permissions.
5. User Authentication and Security:

• Integrate Kinde Auth for user authentication and access management.

• Implement protected routes and session management for secure collaboration.
• Ensure data privacy through encrypted storage and controlled user access.
6. Deployment and Accessibility:

• Host the application on a scalable platform for easy access.

• Optimize the UI for responsive and user-friendly interactions.
• Provide cross-device compatibility for seamless usage on different platforms.

By achieving these objectives, [Link] will serve as a powerful, real-time collaborative workspace,
enhancing productivity, teamwork, and project management efficiency.

12
 1.3 Purpose, Scope and Applicability:

1.3.1 Purpose:
The purpose of this project is to develop a web-based product management and collaboration
platform that enhances team productivity through real-time document editing, diagramming, and
project organization. Inspired by [Link], this platform aims to provide an efficient and user-
friendly workspace for professionals, developers, and teams working on shared projects.
Traditional product management tools often suffer from complex interfaces, lack of real-time collaboration,
and limited integration options. This project overcomes these challenges by leveraging:

• [Link] for a fast, scalable, and modern frontend experience

• Convex for real-time database interactions and backend logic
• Kinde Auth for secure user authentication and role management
• EditorJS & Excalidraw for document editing and diagramming
• Tailwind CSS & shadcn/ui for an intuitive, responsive UI

By integrating these technologies, the platform ensures seamless collaboration, efficient file organization,
and enhanced team communication, making it an essential tool for modern product teams.

1.3.2 Scope:

The project will focus on developing the following key functionalities:

1. Document Editing – Real-time text editing with formatting, tables, and code blocks using
EditorJS.
2. Diagramming & Whiteboarding – Interactive sketching, flowcharts, and mind maps with
Excalidraw.
3. File & Task Management – Organizing files by priority, tags, and metadata for better
workflow management.
4. Real-time Collaboration – Multi-user editing, commenting, and version tracking powered by
Convex.
5. User Authentication & Role Management – Secure sign-ins and access controls with Kinde Auth.
6. Dark Mode & UI Enhancements – Modern, accessible, and visually appealing interface using
Tailwind CSS.

This platform is designed for teams, startups, and individuals looking for a streamlined and real-time
product management solution. Future enhancements may include AI-powered suggestions, integrations
with external tools, and advanced analytics for productivity tracking.

13
 1.3.3 Applicability:
The [Link] platform has broad applicability in product management, team collaboration,
and project organization. It serves as a real-time workspace for professionals, startups, and
enterprises, enhancing productivity by enabling seamless document editing, diagramming, and file
management.
Key areas where [Link] can be applied include:

• Remote and Hybrid Teams – Enables teams to collaborate in real time with shared
documents and diagrams.
• Project & Product Management – Helps teams organize tasks, track progress, and manage
files efficiently.
• Software Development Workflows – Facilitates technical documentation, brainstorming,
and architecture planning.
• Education & Research – Supports students and educators in creating structured
notes, flowcharts, and reports.
• Business and Enterprise Solutions – Acts as a centralized workspace for planning,
execution, and communication.

By integrating Convex for real-time collaboration, Kinde Auth for authentication, and [Link] for a
seamless frontend, this platform ensures fast, scalable, and efficient team productivity.

1.4 Achievement:
Successfully developed a [Link]-based real-time product management platform.
• Implemented Convex backend for instant updates and multi-user collaboration.\

• Designed an interactive, user-friendly UI with Tailwind CSS and shadcn/ui components.

• Integrated document editing (EditorJS) and diagramming (Excalidraw) for

comprehensive project management.

• Enabled secure authentication and role-based access control using Kinde Auth.

• Implemented real-time file organization and task prioritization with dynamic metadata.

• Optimized performance and UI responsiveness for smooth user experience

1.5 Organization of report:

This report is structured into several chapters for clarity and coherence. It begins with an
Introduction, outlining the problem statement and objectives.
The Literature Review explores existing research. The Methodology explains the system
architecture, backend structure, and key technologies used.
Implementation details the development of the web application and integration of real-
time collaboration features.
Results and Discussion analyze platform performance and usability, followed by
Conclusion and Future Work, summarizing contributions and improvements.

14
 CHAPTER 2: SURVEY OF TECHNOLOGIES

Technologies Used
To implement [Link] – Web-Based Product Management and Collaboration Platform, the
following technologies will be used:

Frontend:

• [Link] 14 (React framework) – Provides a fast, scalable, and interactive user interface.
• Tailwind CSS – Used for responsive and modern UI styling.
• shadcn/ui – Pre-built UI components for improved design and usability.

Backend:

• [Link] – Server-side runtime for handling requests efficiently.

• Convex – Real-time backend and database for managing data synchronization.

Authentication:

• Kinde Auth – Secure authentication and user session management.

Collaaboration and File Sharing:

• EditorJS – Rich-text editing for document creation.

• Excalidraw – Interactive whiteboard for real-time diagramming.

Hosting & Deployment :

• Vercel – For seamless [Link] deployment.

• Convex Hosting – For backend and real-time database hosting.

Html 2.1
HTML (Hypertext Markup Language) is the standard language used to create web pages, describing
their structure and content. It works alongside CSS for styling and JavaScript for interactivity.
HTML uses elements, defined by tags (e.g., <img />, <p>), to structure text, images, forms, and
other content. These tags help browsers interpret and render the page, although the tags themselves
are not displayed. HTML also provides semantic meaning for document text, such as headings,
15
paragraphs, and links.

Css 2.2

Cascading Style Sheets (CSS) is a language used to define the presentation of web
documents written in HTML or XML. It separates content from design,
controlling elements like layout, colors, and fonts. This separation improves
accessibility, flexibility, and reduces redundancy by allowing multiple web pages
to share a single CSS file. Additionally, CSS files can be cached to speed up page
loading across shared pages.

TailwindCss 2.3
Tailwind CSS is a popular open-source utility-first CSS framework used for designing modern and
responsive web applications. Unlike traditional frameworks like Bootstrap, Tailwind provides low-level
utility classes that allow developers to style elements directly within HTML, enabling greater flexibility and
customization.

Tailwind’s approach eliminates the need for pre-designed components, allowing for a more consistent and
scalable design system.

Its responsive utility classes make it easy to build layouts that adapt to different screen sizes. Additionally,
Tailwind supports customization through configuration files, optimizing performance by purging unused
styles. Due to its flexibility, efficiency, and lightweight nature, Tailwind CSS is widely used for building
scalable and highly customized UI designs.

16
 React 2.4
[Link] is a popular open-source JavaScript library for building dynamic and interactive user interfaces,
primarily for web applications. Developed by Facebook, React follows a component-based architecture,
enabling developers to create reusable UI elements that enhance maintainability and scalability.

Unlike traditional frameworks, React uses a virtual DOM to optimize rendering performance,
ensuring efficient updates to the user interface. With features like hooks and context API, React
simplifies state management, making it easier to handle complex application logic.

When paired with [Link], React enables server-side rendering (SSR) and static site generation (SSG),
improving performance and SEO. Additionally, React integrates seamlessly with Tailwind CSS,
providing utility-first styling for responsive and customizable UI designs.

.. Next Js 2.5

[Link] is a powerful, open-source React framework used for building modern web applications.
It provides a robust architecture for server-side rendering (SSR), static site generation (SSG),
and client-side rendering (CSR), making it highly efficient for performance and SEO.
17
Unlike traditional React applications, [Link] includes built-in routing, API handling, and automatic code
splitting, reducing the need for additional configurations. It offers middleware support, image
optimization, and incremental static regeneration (ISR), allowing dynamic content updates without
rebuilding the entire application.

[Link] seamlessly integrates with Tailwind CSS for utility-first styling and can connect with databases and
authentication providers through built-in API routes. It is commonly used for developing high-
performance web applications, e-commerce platforms, dashboards, and SaaS products. Its
combination of flexibility, scalability, and developer experience makes [Link] a go-to choice for modern
full-stack web development.

Convex 2.6

Convex is a modern backend-as-a-service platform designed for real-time data storage, queries,
and application logic. Unlike traditional databases that require manual API setup, Convex provides
serverless functions and reactive data fetching, making it an ideal choice for building dynamic
web applications with [Link].

Convex simplifies backend development by removing the need for REST or GraphQL APIs,
allowing developers to interact with the database directly using JavaScript/TypeScript functions. It
ensures strong data consistency, automatic indexing, and real-time updates without complex
configurations

Kinde 2.7
18
Kinde Auth is a modern authentication and authorization platform designed to simplify user
identity management for web applications. It provides secure login, role-based access control
(RBAC), and user session management with minimal configuration.

Kinde Auth seamlessly integrates with frameworks like [Link], enabling developers to implement OAuth,
Single Sign-On (SSO), and social logins (Google, GitHub, etc.) effortlessly. It eliminates the need for
building custom authentication logic by handling JWT-based authentication, user permissions, and
multi-tenant support.

Gemini 2.8

Google Gemini AI is an advanced artificial intelligence model developed by Google, designed for
diverse applications such as natural language understanding, code generation, and multimodal
tasks. It integrates seamlessly with various platforms, offering real-time assistance for text, image,
and data processing.

Gemini AI excels in generating human-like responses, assisting in research, brainstorming, and automating
complex workflows. It enhances productivity in software development, content creation, and problem-
solving. With deep learning capabilities, it supports multiple languages, making it a powerful tool for AI-
driven applications. Its adaptability and contextual awareness make it a valuable asset in modern AI-
powered solutions.

19
 CHAPTER 3: REQUIREMENT & ANALYSIS

3.1 Problem Definition

1. Fragmented Project Management: Teams often struggle with disorganized

workflows, making it difficult to track tasks, documents, and project progress
efficiently.

2. Lack of Real-Time Collaboration: Traditional project management tools do not offer

seamless, real-time editing for documents and diagrams, leading to delays in decision-making.

3. Complex User Interfaces: Many existing platforms have cluttered or overly complex
interfaces, reducing productivity and making adoption difficult for new users.

4. Limited AI-Powered Assistance: Most project management tools lack AI-driven automation
for document structuring, task suggestions, and intelligent insights.

5. Inefficient File Organization: Managing multiple files across different teams and
workspaces becomes cumbersome without a hierarchical system and intuitive search
functionality.

Proposed Solution:

1) AI-Assisted Content Generation: The system will analyze user inputs and project data
to generate structured documents and diagrams, improving workflow efficiency.

2) Real-Time Collaboration: Utilizing Convex for backend operations, the platform enables
instant updates and multi-user editing for seamless teamwork.

3) Web-Based Implementation: A [Link]-based web application will provide an intuitive

interface for project management, document creation, and file organization.

4) Enhanced Productivity Tools: Features like AI-powered suggestions, hierarchical file

organization, and interactive diagrams will streamline project workflows.

5) Impact: This project aims to enhance team collaboration, reduce manual effort, and optimize
project management for businesses, freelancers, and teams working remotely.

20
 3.2 Requirement Specification

❖ External Interfaces

User Interfaces:
• The platform will feature a graphical user interface (GUI) optimized for seamless navigation.

• Each page will provide clear instructions to guide users through document creation, editing,
and collaboration.
• The UI will be designed using [Link], Tailwind CSS, and shadcn/ui components for a modern
and responsive experience.
• Essential instructions and messages will be displayed in designated areas to enhance user clarity.

Hardware Interfaces:
• Accessible on various devices, including laptops, tablets, and desktop monitors for an
optimal viewing experience.
• Supports both touchscreen interactions and traditional keyboard/mouse inputs for flexibility.

• Designed to function efficiently across devices with continuous power backup support.

Software Interfaces:
• Compatible with Windows, macOS, and Linux operating systems.

• Built using [Link] for a dynamic and interactive user experience.

• Integrated with Convex for real-time database operations and Kinde for authentication.

• Requires a modern web browser (Google Chrome, Mozilla Firefox, Microsoft Edge) for
smooth operation.

21
 ❖ Performance Requirements:
Security:
• [Link] ensures that only authenticated users can access the platform using Kinde Auth for
secure login and role-based access control.
• User authentication is required for creating, editing, and collaborating on documents and diagrams.
• Data integrity is maintained with Convex's real-time database, ensuring secure storage and
access control.

Reliability:
• The platform guarantees high reliability, with real-time updates and consistent
document management.
• All changes are automatically saved and synchronized across users, ensuring no data loss.

Availability:

• The application is accessible from any device with an internet connection, allowing users
to collaborate remotely.
• Cloud-based deployment ensures high uptime and availability for seamless access.

Maintainability:
• The modular architecture, using [Link] components, ensures that new features and updates can
be easily integrated.
• Future enhancements, such as AI-powered suggestions or additional diagramming tools, can be
incorporated with minimal disruption.

Portability:
• [Link] is platform-independent and accessible via any modern web browser (Chrome,
Firefox, Edge).
• It does not require installation and is fully responsive for desktop.

❖ Functional Requirements:

➢ User Input & Data Processing

• Users can enter text, diagrams, and files into the workspace.
• Data validation ensures proper formatting and structure.

➢ AI Integration & Processing

• Uses Google Gemini AI for content generation and enhancement.

• Supports text-to-diagram conversions and auto-suggestions for document structuring.

➢ Real-Time Collaboration

Uses Convex for real-time updates, allowing multiple users to work together.
Changes are instantly reflected across all devices.

22
 ➢ Web Application Interface

• [Link]-based frontend with an intuitive, dark-themed UI.

• Interactive editor using EditorJS and Excalidraw for diagrams.

➢ Data Storage & Management

• Hierarchical file organization for efficient retrieval.

• Convex database ensures scalability and security.

➢ Performance & Scalability

• Optimized serverless architecture for high efficiency.

• Handles multiple simultaneous users without lag.

➢ Security & Access Control

• Kinde Auth for authentication & role-based access control.

• Secure storage of user-generated content.

➢ Deployment & Accessibility

• Fully cloud-based, accessible from any browser.

• Optimized for desktop and mobile devices.

Non-Functional Requirements for [Link]

➢ Fast and Smooth

• The platform should load quickly and provide a seamless user experience with
minimal lag.
➢ Safe and Secure

• Uses Kinde Auth for authentication and Convex for secure data storage.
• Implements data encryption, role-based access control, and regular backups.
➢ Always Available

• The system should maintain high uptime with serverless architecture for reliability.
➢ Adaptable

• The platform should scale dynamically based on user activity and team collaboration needs.
➢ Data Safe and Sound

• Ensures data integrity and real-time syncing with Convex.

• Provides version history and undo/redo functionality.

23
3.3 : Planning and scheduling:

➢ Planning
• Identifies all core features and deliverables for the platform, including
document collaboration, diagramming, and file management.
• Defines key infrastructure such as database architecture (Convex), authentication
(Kinde Auth), and frontend framework ([Link]).

➢ Requirement Specification

• Begins with user needs assessment, focusing on real-time collaboration, accessibility,

and security.
• Ensures intuitive UI/UX design for ease of use.

➢ Resource Allocation

• Prioritizes high-impact features such as file versioning, real-time editing, and

team management.
• Balances server costs, performance optimization, and scalability to ensure efficient
deployment.

➢ Development Constraints

• Limited development time and resources require strategic planning for feature
rollouts and testing phases.
• Trade-offs between feature complexity, performance, and user experience must be
analyzed.

➢ Uncertainty and Risk Management

• Accounts for potential changes in user needs, scalability issues, and backend
integration challenges.
• Ensures robust testing to handle real-time collaboration scenarios and high-
concurrency usage.

➢ Requirement Gathering and Cost Estimation

• Clear user stories and feature specifications help streamline development.

• Balances costs for hosting, data storage, and API integrations with project scalability.

24
 ❖ GANTT Chart:

A Gantt chart may be a sort of chart that illustrates a project schedule. This chart
lists the tasks to be performed on the vertical axis, and time intervals on the horizontal axis.
The width of the horizontal bars within the graph shows the duration of every activity.

Gantt charts illustrate the beginning and finish dates of the terminal elements and summary
elements of a project. Terminal elements and summary elements constitute the work
breakdown structure of the project.

Months
July AugustSeptOct Nov Dec Jan Feb March
Phases
Research &
Analysis

Requirement
Gathering

Planning

Design

Coding

Testing

Documentations

• Estimated Time:

• Actual completion Time:

25
T ask Name Start Date Duration (Days) End Date
Research & 16/07/2024 28 Days 13/08/2024
Analysis
Requirement 09/08/2024 32 Days 10/09/2024
Gathering
Planning 25/08/2024 33 Days 27/09/2024
Design 21/09/2024 32 Days 23/10/2024
Coding 10/10/2024 124 Days 11/02/2025
Testing 14/11/2024 90 Days 12/02/2025
Documentation 13/02/2025 25 Days 09/03/2025
Submission - - /03/2025

3.4 Software and Hardware Requirements:

1) Software Requirements-
➢ Operating System: Windows 10 or Higher / macOS / Linux
➢ Frontend: [Link], React, Tailwind CSS, ShadCN/UI
➢ Backend: [Link], Convex (real-time database & backend)
➢ Authentication: Kinde Auth
➢ State Management: Context API
➢ Database: Convex (serverless real-time storage)
➢ AI Integration: Google Gemini AI
➢ Libraries & Frameworks:
• Frontend: Framer Motion (animations), Lucide React (icons)
• Backend: Convex Database
• Collaboration: EditorJS (rich text editing), Excalidraw (diagramming)

2) Hardware Requirements-

➢ Hard disk-40gb minimum

➢ Ram-4gb or higher
➢ Device - Laptop with 13 processor or more.

26
 3.5 Preliminary Product Description:

[Link] is a web-based product management and collaboration platform designed to

enhance team productivity. It allows users to create, edit, and manage documents,
diagrams, and projects in real time. The platform integrates rich text editing, diagramming
tools, and file organization features to streamline workflows.

Developed using [Link], React, Convex, and Tailwind CSS, [Link] provides an intuitive
user interface that supports live collaboration. It leverages Convex for real-time database
updates and Kinde Auth for secure authentication. The application enables team-based
document creation, real-time updates, and structured file management with priority settings.

[Link] aims to assist teams, startups, and enterprises in efficiently managing projects and
workflows. It is scalable, secure, and cloud-based, ensuring seamless access across multiple
devices. Future enhancements may include AI-powered assistance using Google Gemini,
deeper integration with third-party tools, and mobile app development for broader
accessibility.

27
 3.6 Conceptual Models:

❖ ACTIVITY DIAGRAM

An Activity UML Diagram represents the flow of control or data in a system, illustrating dynamic
aspects like workflows, processes, and algorithms. It consists of elements like actions, decisions,
swimlanes, start and end nodes, and control flows. Widely used in business process modeling
and software development, it helps visualize sequential and parallel processes. Activity
diagrams are essential in use case modeling, workflow analysis, and system behavior
representation.

28
❖ Class Diagram

A class diagram in the Unified Modeling Language (UML) is a type of

static structure diagram that describes the structure of a system by
showing the system’s classes, their attributes, operations (or methods),
and the relationships among objects.

29
❖ Component Diagram

Component diagrams are used in modeling the physical aspects of object-oriented

systems that are used for visualizing, specifying, and documenting component-based
systems and for constructing executable systems through forward and reverse
engineering. Component diagrams are essentially class diagrams that focus on a
system’s components that often used to model the static implementation view of a
system.

30
 ❖ Use Case Diagram

A use case diagram is like a picture that shows how a system works and who uses it. In the
picture, you have actors (like people or other systems) and actions they can do, called use
cases (like playing music or making a playlist). It’s like a simple map that helps you see
what the system does and who interacts with it. For example, if you think about a music
player app, you are the actor, and the things you can do, like playing a song or making a
playlist, are the use cases. The diagram uses circles for actions and stick figures for users,
showing lines to connect them and how they work together. It’s an easy way to understand
the main features of a system without getting into complicated details.

31
❖ SEQUENCE DIAGRAM

A Sequence UML Diagram models the interaction between objects in a system over time,
focusing on message exchange and order of execution. It consists of lifelines, messages,
activations, and arrows to represent communication between components. Widely used in
software design, use case modeling, and system behavior analysis, it helps visualize request-
response flows, method calls, and event sequences. Sequence diagrams are essential for
understanding system dynamics, debugging interactions, and optimizing process workflows.

32
 CHAPTER 4: SYSTEM DESIGN

4.1 Basic Module

➢ Document & Diagram Management Module

• Enables users to create, edit, and manage documents using EditorJS.

• Supports diagramming with Excalidraw for real-time whiteboard
collaboration.
• Implements real-time updates using ConvexDB.

➢ Real-Time Collaboration Module

• Supports team-based file sharing and real-time editing.

• Uses Convex for data synchronization and collaboration features.
• Implements role-based access control to manage file permissions.

➢ AI Assistance Module
• Integrates Google Gemini AI to assist with content
generation and suggestions.
• Provides AI-powered document enhancements and diagram insights.

➢ Web Application Module

• Frontend: Built with [Link] 14, Tailwind CSS, and

shadcn/ui for an interactive and modern UI.
• Backend: Uses Convex for database and serverless backend
functionality.
• Authentication: Implements Kinde Auth for secure user
authentication.

➢ File Management & Organization Module

• Supports hierarchical file structures with metadata such as creation

date, last edited date, and priority.
• Allows file sharing, renaming, deletion, and organization within teams.
• Provides search and filtering features for efficient file retrieval.

➢ Deployment & Security Module

• Deploys the system using modern cloud-based hosting.

• Ensures data security and encryption for user data and files.
• Implements authentication and authorization to restrict access to sensitive
33
data.

34
4.2 Security Issues

1. Data Privacy – User-created documents, diagrams , and projects files must be protected to
prevent unauthorized acces ore misuse .

2. Data Encryption – Lack of encryption during data transmission could lead to security breaches.
End-to-end encryption (E2EE) should be implemented to protect user data during storage
and transfer.

3. Authentication & Authorization – Weak or missing authentication mechanisms may allow

unauthorized access. Kinde Auth ensures secure authentication and role-based authorization
to control access levels.

4. Web Security Vulnerabilities (XSS & Injection Attacks) – The application must sanitize user
inputs to prevent Cross-Site Scripting (XSS) and SQL/NoSQL Injection attacks that could
compromise user data.

5. Model Security – If AI features (like content generation) are integrated, they must be protected from
adversarial inputs that could generate misleading or harmful content.

6. Server & Network Security – Convex and [Link] APIs should have proper security
configurations, including rate limiting, API authentication, and secure headers to prevent
unauthorized API access.

7. Data Storage Risks – User-generated files and metadata should be encrypted at rest and
stored securely with access control mechanisms to prevent data leaks.

8. DDoS Attacks – The system should implement rate-limiting and cloud-based security
solutions to mitigate Distributed Denial-of-Service (DDoS) attacks, ensuring continuous
availability.

9. Session Security – Secure cookie storage, HTTP-only and SameSite flags, and token
expiration policies should be enforced to prevent session hijacking and unauthorized access.

10. Compliance with Regulations – The system should adhere to data protection laws like
GDPR and CCPA, ensuring that user data is stored, processed, and deleted in compliance with
privacy regulations.

35
 4.3 Test Case Design
• In software engineering, a test case is a specification of the inputs, execution
conditions, testing procedure, and expected results that define a single test to
be executed to achieve a particular software testing objective, such as to
exercise a particular program path or to verify compliance with a specific
requirement. Test cases underlie testing that is methodical rather than
haphazard.

• A battery of test cases can be built to produce the desired coverage of the
software being tested. Formally defined test cases allow the same tests to be run
repeatedly against successive versions of the software, allowing for effective
and consistent regression testing.

Test Case Status

Test Scenario Test Steps Expected Output
ID (Pass/Fail)
Check website Website loads
TC_01 Open [Link] in a browser Pass
accessibility successfully
Log in using valid User is authenticated
TC_02 User Login credentials (via Kinde Auth)and redirected to the Pass
dashboard
Regitered using valid User is Registered and
User Registration credentials (via Kinde redirected to the
TC_03 pass
Auth) dashboard
Error message
Invalid input Attempt login with
TC_03 displayed, login Pass
handling incorrect credentials
prevented
Click "New Document" andDocument is created and
TC_04 Document creation Pass
enter a title opens in the editor
Real-time Open the same document inChanges sync in real time
TC_05 Pass
collaboration two different browsers without delay
Open Excalidraw, draw a Diagram updates and
TC_06 Diagram editing Pass
shape, and save persists successfully
File upload Upload a file within the File is uploaded and
TC_07 Pass
functionality workspace accessible
Shared user can view/edit
Share a document with
TC_08 File access control based on Pass
another user
permissions
Open [Link] on Layout adjusts
TC_09 UI responsiveness different screen sizes correctly, no broken UI Pass
(mobile, tablet) elements
API response Send a request to the ConvexAPI returns expected
TC_10 Pass
validation backend API JSON response format
AI assistant Enter a query for AI- based AI responds with relevant
TC_11 Pass
functionality content generation content

36
Test Status
Test Scenario Test Steps Expected Output
Case ID (Pass/Fail)
Perform multiple
System responds within
TC_12 Performance check operations (create, edit, acceptable time limits Pass
delete) quickly

Each test case ensures the application functions correctly, securely, and efficiently.

37
 CHAPTER 5: IMPLEMENTATION AND TESTING
[Link]

"use client"
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-
nextjs"; import Header from "./_components/Header";
import Hero from
"./_components/Hero"; import {
useEffect } from "react";

export default function

Home() { const
user=useKindeBrowserClient();
useEffect(()=>{
[Link]("--",user)
})
return (
<div>
<Header></Header>
<Hero></Hero>
</div>
);
}

[Link]

import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-

nextjs'; import Image from 'next/image';
import React, { useState } from 'react';

function Header() {
const { user }: any =
useKindeBrowserClient(); const
[searchQuery, setSearchQuery] =
useState('');

// Handle the search input change

const handleSearchChange = (e: [Link]<HTMLInputElement>) => {
setSearchQuery([Link]);
};

// Optional: Define a function to trigger search

action const handleSearch = () => {
[Link]('Searching for:', searchQuery);
// Add your search logic here, like filtering data or calling an API
};

return (
38
<div className="flex justify-between w-full gap-4 items-center bg-gray-900 p-3">
{/* Search Input */}
{/* You can uncomment and add search logic here */}
{/* <div className="flex gap-2 items-center border border-gray-600 rounded-md
p-1 bg-

39
gray-800 text-gray-300">
<Search className="h-4 w-4 text-gray-400" />
<input
type="te
xt"
placeholder="Search"
value={searchQuery}
onChange={handleSearchChang
e}
onKeyDown={(e) => [Link] === 'Enter' && handleSearch()} // Trigger search
on Enter key press
className="bg-transparent focus:outline-none focus:ring-2 focus:ring-yellow-500
text-sm placeholder-gray-400"
/>
</div> */}

{/* User Info */}

<div className="flex items-center gap-2">
<div>
<Image
src="/[Link]" // Replace with dynamic user image if
needed alt="user"
width={30}
height={30}
className="rounded-full border border-gray-500"
/>
</div>

{/* User Name with Tooltip */}

<div className="relative group">
<span className="text-white mr-2 cursor-pointer">
{user?.name || 'Madara Uchiha'}
</span>
<div className="absolute left-0 bg-gray-700 text-white text-sm rounded p-2
opacity-0 group-hover:opacity-100 transition-opacity duration-300">
{user?.email}
</div>
</div>
</div>

{/* Invite Button Removed */}

</div>
);
}

export default Header;

40
[Link]

import React, { useContext, useEffect, useState } from "react";

import { FileListContext } from "@/app/_context/FilesListContext";
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
import { Archive, File, MoreHorizontal } from "lucide-react";
import moment from "moment";

import Image from "next/image";

import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useRouter } from
"next/navigation"; import Cookies from "js-
cookie";
import { useMutation } from "convex/react";

export interface FILE {

archive: boolean;
createdBy: string;
document: string;
fileName: string;
teamId: string;
whiteboard: string;
_id: string;
_creationTime: number;
_lastEditedTime: number;
_proirity: string;
}

const COOKIE_KEY = "priorityMapping";

function FileList() {
const { fileList_, setFileList_ } = useContext(FileListContext);
const [fileList, setFileList] = useState<FILE[]>();
const { user }: any = useKindeBrowserClient();
const router = useRouter();

// Convex mutation for deleting a file

// const deleteFile = useMutation([Link]);

// On mount or when fileList_ updates, merge cookie mapping into the file list.
useEffect(() => {
if (fileList_) {
41
let newList = fileList_;

42
 // Get the cookie mapping for priorities (structured by teamId and fileName)
let mapping: Record<string, Record<string, string>> = {};
const cookieData = [Link](COOKIE_KEY);
if (cookieData) {
try {
mapping = [Link](cookieData);
} catch (error) {
[Link]("Error parsing cookie mapping:", error);
}
}
// For each file, use the mapping if available; otherwise, set a default value ("Unassigned")
newList = [Link](
(file: { teamId: string | number; fileName: string | number }) => {
if (!mapping[[Link]]) {
mapping[[Link]] = {};
}
if (!mapping[[Link]][[Link]]) {
// Set default if not present mapping[[Link]]
[[Link]] = "Unassigned";
}
return { ...file, _proirity: mapping[[Link]][[Link]] };
}
);
// Update the cookie with any new default mappings (expires in 30 days)
[Link](COOKIE_KEY, [Link](mapping), {
expires: 30,
path: "/",
});
setFileList(newList);
}
}, [fileList_]);

// Handle changing priority and update both state and cookie mapping.
const handlePriorityChange = (id: string, priority: string) => {
// Update local state and context.
const updatedList = fileList?.map((file) =>
file._id === id ? { ...file, _proirity: priority } : file
);
setFileList(updatedList);
setFileList_?.(updatedList);

// Get the existing mapping from the cookie.

let mapping: Record<string, Record<string, string>> = {};
const cookieData = [Link](COOKIE_KEY);
if (cookieData) {
try {
mapping = [Link](cookieData);
} catch (error) {
43
 [Link]("Error parsing cookie mapping:", error);
}
}
// Find the file to update (to access its teamId and fileName).
const fileToUpdate = fileList?.find((file) => file._id ===
id); if (fileToUpdate) {
if (!mapping[[Link]]) {
mapping[[Link]] = {};
}
mapping[[Link]][[Link]] = priority;
// Persist the updated mapping.
[Link](COOKIE_KEY, [Link](mapping), {
expires: 30,
path: "/",
});
}
};

// Handle file deletion using Convex backend.

const handleDelete = async (fileId: string) => {
try {
// Call the Convex mutation to delete the file from the backend.
// await deleteFile(fileId);
// Remove file from the list locally.
const updatedList = fileList?.filter((file) => file._id !== fileId);
setFileList(updatedList);
setFileList_?.(updatedList);
[Link](`Deleted file with ID: ${fileId}`);
} catch (error) {
[Link]("Error deleting file:", error);
}
};

const priorityFill: Record<string, string> = {

High: "bg-red-500",
Medium: "bg-yellow-500",
Low: "bg-green-500",
Unassigned: "bg-gray-500",
};

const priorityTextColor: Record<string, string> = {

High: "text-red-400",
Medium: "text-yellow-400",
Low: "text-green-400",
Unassigned: "text-gray-400",
};

return (
44
<div className="bg-gray-900 min-h-screen">
<div className="mt-10 p-4">
<div className="overflow-x-auto bg-gray-800 text-white rounded-lg shadow-lg">
<table className="min-w-full divide-y-2 divide-gray-700">
<thead className="text-left">
<tr>
<td className="whitespace-nowrap px-4 py-2 font-medium">
File Name
</td>
<td className="whitespace-nowrap px-4 py-2 font-medium">
Created At
</td>
<td className="whitespace-nowrap px-4 py-2 font-medium">
Priority
</td>
<td className="whitespace-nowrap px-4 py-2 font-medium"></td>
</tr>
</thead>
<tbody className="divide-y divide-gray-700">
{fileList &&
[Link]((file: FILE, index: number) => (
<tr
key={index}
className="odd:bg-gray-700 cursor-pointer"
onClick={() => [Link](`/workspace/${file._id}`)}
>
<td className="whitespace-nowrap px-4 py-2">
{[Link]}
</td>
<td className="whitespace-nowrap px-4 py-2">
{moment(file._creationTime).format("DD MMM YYYY, h:mm A")}
</td>
<td
className="whitespace-nowrap px-4 py-2"
onClick={(event) => [Link]()}
>
<DropdownMenu>
<DropdownMenuTrigger>
<div className="flex items-center gap-2 cursor-pointer">
<div
className={`h-4 w-4 rounded-full ${priorityFill[file._proirity]}`}
></div>
<span
className={`text-sm font-medium ${priorityTextColor[file._proirity]}`}
>
{file._proirity || "Unassigned"}
</span>
</div>
45
 </DropdownMenuTrigger>
<DropdownMenuContent>
{["High", "Medium", "Low", "Unassigned"].map(
(priority) => (
<DropdownMenuItem
key={priority}
onClick={(event) => {
[Link]();
handlePriorityChange(file._id, priority);
}}
className="flex items-center gap-2 cursor-pointer"
>
<div
className={`h-4 w-4 rounded-full ${priorityFill[priority]}`}
></div>
<span
className={`text-sm font-medium ${priorityTextColor[priority]}`}
>
{priority}
</span>
</DropdownMenuItem>
)
)}
</DropdownMenuContent>
</DropdownMenu>
</td>
<td className="whitespace-nowrap px-4 py-2">
{user && (
<Image
src="/[Link]"
alt="user"
width={30}
height={30}
className="rounded-full"
/>
)}
</td>
<td className="whitespace-nowrap px-4 py-2">
<DropdownMenu>
<DropdownMenuTrigger>
<MoreHorizontal className="h-4 w-4" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
onClick={(event) => {
[Link]();
[Link](`/workspace/${file._id}`);
}}
46
 className="flex items-center gap-3"
>
<File className="h-4 w-4" /> Open
</DropdownMenuItem>
<DropdownMenuItem
onClick={(event) => {
[Link]();
// Call the delete functionality using Convex
handleDelete(file._id);
}}
className="flex items-center gap-3"
>
<Archive className="h-4 w-4" /> Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
);
}

export default FileList;

[Link]

"use client"
import { Button } from
'@/components/ui/button' import { Input }
from '@/components/ui/input' import { api
} from '@/convex/_generated/api'
import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-
nextjs' import { useMutation } from 'convex/react'
import Image from 'next/image'
import { useRouter } from
'next/navigation' import React, {
useState } from 'react' import { toast
} from 'sonner'

47
function CreateTeam() {

48
 const [teamName, setTeamName] = useState('');
const createTeam =
useMutation([Link]); const { user
}: any = useKindeBrowserClient();
const router = useRouter();

const createNewTeam = () => {

createTeam({
teamName: teamName,
createdBy: user?.email
}).then(resp
=> {
[Link](resp)
; if (resp) {
[Link]('/dashboard');
toast('Team created
successfully!!!');
}
});
};

return (
<div className='bg-black text-white flex justify-center items-
center min-h-screen'>
<div className='px-6 md:px-16'>
<div className="flex items-center space-x-2">

{/* [Link] Text */}

<div className='flex items-center'>
<Image
src='/logo_rotated.p
ng' alt='logo'
width={180}
height={60}
/>
<h1 className="gradient-text-teams text-5xl font-bold ml-
5">[Link]</h1>

</div>
49
</div>
<div className='flex flex-col items-center mt-8'>
<h2 className='font-bold text-[40px] py-3 text-white'>

50
 What should we call your team?
</h2>
<h2 className='text-gray-400'>
Remember project name is
permanent !.
</h2>
<div className='mt-7 w-[40%]'>
<label className='text-gray-
400'> Team Name
</label>
<Input
placeholder='Team Name'
white className='mt-3 bg-gray-800 border border-gray-600
' text-

onChange={(e) => setTeamName([Link])}

/>
</div>
<Button
className='bg-amber-300 mt-9 w-[30%] hover:bg-orange-
600' disabled={!(teamName && [Link] > 0)}
onClick={createNewTeam}
>
Create Team
</Button>
</div>
</div>
</div>
);
}

export default CreateTeam;

[Link]

[Link]
"use client"
import { Button } from
51
'@/components/ui/button' import { api }
from '@/convex/_generated/api'
import { LogoutLink, useKindeBrowserClient } from
'@kinde-oss/kinde-

52
auth-nextjs'
import { useConvex, useMutation, useQuery } from
'convex/react' import React, { useEffect } from 'react'
import Header from
'./_components/Header' import FileList
from './_components/FileList'
// import AdBanner from './../../_components/AdBanner'
function Dashboard() {

const convex=useConvex();
const {user}:any=useKindeBrowserClient();

const createUser=useMutation([Link]);
useEffect(()=>{
if(user)
{
checkUser()
}
},[user])

const checkUser=async()=>{
const result=await [Link]([Link],
{email:user?.email}
); if(!
result?.length)
{
createUser({ name:user
.given_name,
email:[Link],
image:[Link]
}).then((resp)=>{ con
[Link](resp)
})
}

}
return (
<div className='p-8'>
<Header/>
53
<FileList/>

54
 </div>

)
}

export default Dashboard

[Link]

"use client"
import { api } from '@/convex/_generated/api';
import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs';
import { useConvex } from 'convex/react';
import { useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react'
import SideNav from './_components/SideNav';
import { FileListContext } from '@/app/_context/FilesListContext';

function DashboardLayout(
{
children,
}: Readonly<{
children: [Link];
}>
){
const convex=useConvex();
const {user}:any=useKindeBrowserClient();
const [fileList_,setFileList_]=useState();
const router=useRouter();
useEffect(()=>{ user&&checkTea
m();
},[user])

55
 const checkTeam=async()=>{
const result=await [Link]([Link],
{email:user?.email});

if(!result?.length)
{
[Link]('teams/create')
}
}

return (
<div>
<[Link] value={{fileList_,setFileList_}}>
<div className='grid grid-cols-4'>
<div className='bg-gray-800 h-screen w-72 fixed'>
<SideNav/>
</div>
<div className='col-span-4 ml-72 relative'>
{children}
</div>
</div>
</[Link]>

</div>
)
}

export default DashboardLayout

56
[Link]

import React, { useContext, useEffect, useState } from "react";

import { FileListContext } from "@/app/_context/FilesListContext";
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
import { Archive, File, MoreHorizontal } from "lucide-react";
import moment from "moment";

import Image from "next/image";

import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useRouter } from
"next/navigation"; import Cookies from "js-
cookie";
import { useMutation } from "convex/react";

export interface FILE {

archive: boolean;
createdBy: string;
document: string;
fileName: string;
teamId: string;
whiteboard: string;
_id: string;
_creationTime: number;
_lastEditedTime: number;
_proirity: string;
}

const COOKIE_KEY = "priorityMapping";

57
function FileList() {
const { fileList_, setFileList_ } = useContext(FileListContext);
const [fileList, setFileList] = useState<FILE[]>();
const { user }: any = useKindeBrowserClient();
const router = useRouter();

// Convex mutation for deleting a file

// const deleteFile = useMutation([Link]);

// On mount or when fileList_ updates, merge cookie mapping into the file list.
useEffect(() => {
if (fileList_) {
let newList = fileList_;
// Get the cookie mapping for priorities (structured by teamId and fileName)
let mapping: Record<string, Record<string, string>> = {};
const cookieData = [Link](COOKIE_KEY);
if (cookieData) {
try {
mapping = [Link](cookieData);
} catch (error) {
[Link]("Error parsing cookie mapping:", error);
}
}
// For each file, use the mapping if available; otherwise, set a default value
("Unassigned")
newList = [Link](
(file: { teamId: string | number; fileName: string | number }) => {
if (!mapping[[Link]]) {
mapping[[Link]] = {};
}
if (!mapping[[Link]][[Link]]) {
// Set default if not present mapping[[Link]]
[[Link]] = "Unassigned";
}
return { ...file, _proirity: mapping[[Link]][[Link]] };
58
 }
);
// Update the cookie with any new default mappings (expires in 30 days)
[Link](COOKIE_KEY, [Link](mapping), {
expires: 30,
path: "/",
});
setFileList(newList);
}
}, [fileList_]);

// Handle changing priority and update both state and cookie mapping.
const handlePriorityChange = (id: string, priority: string) => {
// Update local state and context.
const updatedList = fileList?.map((file) =>
file._id === id ? { ...file, _proirity: priority } : file
);
setFileList(updatedList); setFileList_?.
(updatedList);

// Get the existing mapping from the cookie.

let mapping: Record<string, Record<string, string>> = {};
const cookieData = [Link](COOKIE_KEY);
if (cookieData) {
try {
mapping = [Link](cookieData);
} catch (error) {
[Link]("Error parsing cookie mapping:", error);
}
}
// Find the file to update (to access its teamId and fileName).
const fileToUpdate = fileList?.find((file) => file._id ===
id); if (fileToUpdate) {
if (!mapping[[Link]]) {

59
 mapping[[Link]] = {};
}
mapping[[Link]][[Link]] = priority;
// Persist the updated mapping.
[Link](COOKIE_KEY, [Link](mapping), {
expires: 30,
path: "/",
});
}
};

// Handle file deletion using Convex backend.

const handleDelete = async (fileId: string) => {
try {
// Call the Convex mutation to delete the file from the backend.
// await deleteFile(fileId);
// Remove file from the list locally.
const updatedList = fileList?.filter((file) => file._id !== fileId);
setFileList(updatedList);
setFileList_?.(updatedList);
[Link](`Deleted file with ID: ${fileId}`);
} catch (error) {
[Link]("Error deleting file:", error);
}
};

const priorityFill: Record<string, string> = {

High: "bg-red-500",
Medium: "bg-yellow-500",
Low: "bg-green-500",
Unassigned: "bg-gray-500",
};

const priorityTextColor: Record<string, string> = {

60
 High: "text-red-400",
Medium: "text-yellow-400",
Low: "text-green-400",
Unassigned: "text-gray-400",
};

return (
<div className="bg-gray-900 min-h-screen">
<div className="mt-10 p-4">
<div className="overflow-x-auto bg-gray-800 text-white rounded-
lg shadow-lg">
<table className="min-w-full divide-y-2 divide-gray-700">
<thead className="text-left">
<tr>
<td className="whitespace-nowrap px-4 py-2 font-medium">
File Name
</td>
<td className="whitespace-nowrap px-4 py-2 font-medium">
Created At
</td>
<td className="whitespace-nowrap px-4 py-2 font-medium">
Priority
</td>
<td className="whitespace-nowrap px-4 py-2 font-medium"></td>
</tr>
</thead>
<tbody className="divide-y divide-gray-700">
{fileList &&
[Link]((file: FILE, index: number) => (
<tr
key={index}
className="odd:bg-gray-700 cursor-pointer"
onClick={() => [Link](`/workspace/${file._id}`)}
>
<td className="whitespace-nowrap px-4 py-2">
61
 {[Link]}
</td>
<td className="whitespace-nowrap px-4 py-2">
{moment(file._creationTime).format("DD MMM YYYY, h:mm
A")}
</td>
<td
className="whitespace-nowrap px-4 py-2"
onClick={(event) => [Link]()}
>
<DropdownMenu>
<DropdownMenuTrigger>
<div className="flex items-center gap-2 cursor-pointer">
<div
className={`h-4 w-4 rounded-full $
{priorityFill[file._proirity]}`}
></div>
<span
className={`text-sm font-medium $
{priorityTextColor[file._proirity]}`}
>
{file._proirity || "Unassigned"}
</span>
</div>
</DropdownMenuTrigger>
<DropdownMenuContent>
{["High", "Medium", "Low", "Unassigned"].map(
(priority) => (
<DropdownMenuItem
key={priority}
onClick={(event) => {
[Link]();
handlePriorityChange(file._id, priority);
}}
className="flex items-center gap-2 cursor-pointer"
62
 >
<div
className={`h-4 w-4 rounded-full ${priorityFill[priority]}`}
></div>
<span
className={`text-sm font-medium $
{priorityTextColor[priority]}`}
>
{priority}
</span>
</DropdownMenuItem>
)
)}
</DropdownMenuContent>
</DropdownMenu>
</td>
<td className="whitespace-nowrap px-4 py-2">
{user && (
<Image
src="/[Link]"
alt="user"
width={30}
height={30}
className="rounded-full"
/>
)}
</td>
<td className="whitespace-nowrap px-4 py-2">
<DropdownMenu>
<DropdownMenuTrigger>
<MoreHorizontal className="h-4 w-4" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
onClick={(event) => {
63
 [Link](); [Link](`/workspace/$
{file._id}`);
}}
className="flex items-center gap-3"
>
<File className="h-4 w-4" /> Open
</DropdownMenuItem>
<DropdownMenuItem
onClick={(event) => {
[Link]();
// Call the delete functionality using Convex
handleDelete(file._id);
}}
className="flex items-center gap-3"
>
<Archive className="h-4 w-4" /> Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
);
}

export default FileList;

64
WorkSpace Files

[Link]

import React, { useEffect, useState } from 'react';

import { Excalidraw, MainMenu, WelcomeScreen } from '@excalidraw/excalidraw';
import { FILE } from '../../dashboard/_components/FileList';
import { useMutation } from 'convex/react';
import { api } from '@/convex/_generated/api';
const imageUploadPath="public/images/IMG";
function Canvas({ onSaveTrigger, fileId, fileData, imageUploadPath }: { onSaveTrigger:
any; fileId: any; fileData: FILE; imageUploadPath: string }) {
const [whiteBoardData, setWhiteBoardData] = useState<any>();
const [localImages, setLocalImages] = useState<any[]>([]);
const updateWhiteboard = useMutation([Link]);

useEffect(() => {
onSaveTrigger && saveWhiteboard();
}, [onSaveTrigger]);

const saveWhiteboard = () => {

updateWhiteboard({
_id: fileId,
whiteboard: [Link](whiteBoardData)
}).then(resp => [Link](resp));
};

return (
<div className="flex flex-col h-full">
{fileData && (
<Excalidraw
theme="dark"
initialData={{
65
 elements: fileData?.whiteboard && [Link](fileData?.whiteboard),
}}
onChange={(excalidrawElements, appState, files) =>
setWhiteBoardData(excalidrawElements)
}
>
<MainMenu position="top-left">
<[Link] />
<[Link] />z
<[Link] />
</MainMenu>

<WelcomeScreen position="center">
<[Link] />
<[Link] />
<div className="absolute top-0 right-0 p-4">
<[Link] />
</div>
</WelcomeScreen>
</Excalidraw>
)}

<div>
{[Link]((image, index) => (
<img key={index} src={image} alt={`Local Image ${index}`}
style={{ maxWidth: '100px', margin: '10px' }} />
))}
</div>
</div>
);
}

export default Canvas;

66
 [Link]
import { Button } from '@/components/ui/button';
import { ArrowLeft, Save, Share, Clipboard } from 'lucide-react';
import { FaWhatsapp, FaFacebook, FaLinkedin } from
"react-icons/fa"; import Image from 'next/image';
import React, { useState, useEffect, useRef } from 'react';
import { useRouter } from 'next/navigation';
import { api } from '@/convex/_generated/api';
import { useMutation } from 'convex/react';
import { Id } from '@/convex/_generated/dataModel';

interface WorkspaceHeaderProps {
onSave: () => void;
fileName: string;
_id: Id<"files">;
}

function WorkspaceHeader({ onSave, fileName, _id }: WorkspaceHeaderProps) {

const [isVisible, setIsVisible] = useState(true);
const [isEditing, setIsEditing] = useState(false);
const [newFileName, setNewFileName] = useState(fileName);
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement | null>(null);
const router = useRouter();

const url = typeof window !== "undefined" ? [Link] : "";

const shareOptions = [
{
name: 'WhatsApp',
url: `[Link] this out: ${url}`,
icon: <FaWhatsapp className="text-green-500 w-5 h-5" />,
},
{

67
 name: 'Facebook',
url: `[Link]
icon: <FaFacebook className="text-blue-600 w-5 h-5" />,
},
{
name: 'LinkedIn',
url: `[Link]
icon: <FaLinkedin className="text-blue-500 w-5 h-5" />,
},
{
name: 'Copy to Clipboard',
action: () => {
[Link](url);
alert('URL copied to clipboard.');
},
icon: <Clipboard className="text-gray-300 w-5 h-5" />,
},
];

const renameFile = useMutation([Link]);

const handleMouseMove = (e: MouseEvent) => {

setIsVisible([Link] < 20);
};

useEffect(() => {
[Link]('mousemove', handleMouseMove);
[Link]('click', handleClickOutside);
return () => {
[Link]('mousemove', handleMouseMove);
[Link]('click', handleClickOutside);
};
}, []);

68
 const handleClickOutside = (event: MouseEvent) => {
if ([Link] && ![Link]([Link] as
Node)) {
setIsDropdownOpen(false);
}
};

const handleRename = async () => {

if (newFileName !== fileName) {
try {
await renameFile({ _id, newFileName });
} catch (error) {
[Link]("Failed to rename file", error);
}
}
setIsEditing(false);
};

const handleShareClick = () => {

setTimeout(() => {
setIsDropdownOpen(true);
}, 300);
};

return (
<div
className={`p-3 flex justify-between items-center fixed top-0 left-1/2
transform -translate-x-1/2 z-50 transition-transform duration-300 ${
isVisible ? 'translate-y-0' : '-translate-y-full'
}`}
style={{
backgroundColor: 'rgba(34, 34, 34, 0.95)',
color: '#e0e0e0',
width: '80%',
borderRadius: '8px',
69
 boxShadow: '0 4px 8px rgba(0, 0, 0, 0.5)',
}}
>
<div className="flex gap-2 items-center">
<Image
src="/[Link]"
alt="user"
width={30}
height={30}
className="rounded-full border border-gray-600"
/>
{!isEditing ? (
<h1
className="h-8 text-[16px] text-white font-bold px-2 flex items-
center cursor-pointer"
onDoubleClick={() => setIsEditing(true)}
>
<strong>{fileName || "Untitled File"}</strong>
</h1>
):(
<input
className="text-[18px] bg-[#2a2a2a] text-white px-2 py-1 rounded
border border-gray-600"
value={newFileName}
onChange={(e) => setNewFileName([Link])}
onBlur={handleRename}
autoFocus
/>
)}
</div>

<div className="flex items-center gap-4 relative">

<Button
className="h-8 text-[12px] gap-2 bg-gray-700 hover:bg-gray-600"
onClick={() => [Link]()}
70
 >
<ArrowLeft className="h-4 w-4" /> Go Back
</Button>

<Button
className="h-8 text-[12px] gap-2 bg-blue-600 hover:bg-blue-700"
onClick={onSave}
>
<Save className="h-4 w-4" /> Save
</Button>

{/* Share Button */}

<div className="relative">
<Button
className="h-8 text-[12px] gap-2 bg-amber-400 hover:bg-amber-700"
onClick={handleShareClick}
>
<Share className="h-4 w-4" /> Share
</Button>

{isDropdownOpen && (
<div
ref={dropdownRef}
className="absolute right-0 mt-2 w-56 bg-gray-800 border border-gray-
700 rounded-lg shadow-lg"
onMouseEnter={() => setIsDropdownOpen(true)}
onMouseLeave={() => setTimeout(() => setIsDropdownOpen(false),
500)}
>
{[Link]((option, index) => (
<a
key={index}
href={[Link] || '#'}
onClick={(e) => {
if ([Link]) {
71
 [Link]();
[Link]();
}
}}
target={[Link] ? '_blank' : undefined}
rel="noopener noreferrer"
className="flex items-center gap-3 px-4 py-2 text-white
hover:bg- gray-700 cursor-pointer"
>
{[Link]}
{[Link]}
</a>
))}
</div>
)}
</div>
</div>
</div>
);
}

export default WorkspaceHeader;

[Link]

"use client";
import { Text, ListTodo, MessageSquareQuote, Link } from 'lucide-
react';
import React, { useEffect, useRef, useState } from 'react';
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';
import Checklist from '@editorjs/checklist';

72
import Paragraph from '@editorjs/paragraph';
import Warning from '@editorjs/warning';
import Quote from '@editorjs/quote';
import Embed from '@editorjs/embed';
import Code from '@editorjs/code';
import LinkTool from '@editorjs/link';
import Table from '@editorjs/table';
import Delimiter from '@editorjs/delimiter';
import Marker from '@editorjs/marker';
import InlineCode from '@editorjs/inline-code';
import { useMutation } from 'convex/react';
import { api } from '@/convex/_generated/api';
import { toast } from 'sonner';
import { FILE } from '../../dashboard/_components/FileList';
import { WandSparkles } from "lucide-react";

const rawDocument = {
"time": 1550476186479,
"blocks": [
{
data: {
text: '',
level: 1
},
id: "1234",
type: 'header'
},
{
data: {
text: '',
level: 3
73
 },
id: "1236",
type: 'paragraph'
},
],
"version": "2.8.1"
};

function formatResponseToEditorJS(response: string): { blocks: any[] }

{
try {
if (typeof response === "string") {
return {
blocks: [
{
type: "paragraph",
data: { text: response
}, id: "response-1",
},
],
};
}

return {
blocks: [
{
type: "paragraph",
data: { text: "Unexpected response format." },
id: "response-error",
},
],
74
 };
} catch (error) {
[Link]("Failed to format response:", error);
return {
blocks: [
{ type: "paragraph", data: { text: "Error: Unable to process the
response." } },
],
};
}
}

function Editor({ onSaveTrigger, fileId, fileData }: { onSaveTrigger:

any, fileId: any, fileData: FILE }) {

const ref = useRef<EditorJS | null>(null);

const updateDocument = useMutation([Link]);
const [isPromptVisible, setIsPromptVisible] = useState(false);
const [userPrompt, setUserPrompt] = useState("");
const [charCount, setCharCount] = useState(0);
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
const [isDragging, setIsDragging] = useState(false);
const MAX_PROMPT_LENGTH = 200;
const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
fileData && initEditor();
}, [fileData]);

useEffect(() => {
onSaveTrigger && onSaveDocument();
75
}, [onSaveTrigger]);

const initEditor = () => {

const editor = new EditorJS({
tools: {
header: {
class: Header,
shortcut: 'CMD+SHIFT+H',
inlineToolbar: true,
config: {
placeholder: 'Enter a Header',
levels: [1, 2, 3, 4, 5, 6],
}
},
list: {
class: List,
inlineToolbar: true,
config: {
defaultStyle: 'unordered'
}
},
checklist: {
class:
Checklist,
inlineToolbar: true,
},
paragraph: {
class:
Paragraph,
inlineToolbar: true,
config: {
76
 placeholder: 'One word leads to paragraph, paragraph leads to
sentence and sentences lead to pages'

77
 }
},
warning: Warning,
quote: Quote,
embed: Embed,
code: Code,
linkTool: {
class: LinkTool,
config: {
endpoint: '[Link]
}
},
table: Table,
delimiter: Delimiter,
marker: Marker,
inlineCode: InlineCode,
},
holder: 'editorjs',
data: fileData?.document ? [Link]([Link]) :
rawDocument
});
[Link] = editor;
};

const onSaveDocument = () => {

if ([Link]) {
[Link]().then((outputData) => {
updateDocument({
_id: fileId,
document: [Link](outputData)
})
78
 .then(() => {
toast('Document
Updated!');
})
.catch((error) => {
[Link]('Saving failed: ', error);
toast("Server Error!");
});
}).catch((error) => {
[Link]('Saving failed: ', error);
});
}
};

const addHeader = () => {

[Link]?.[Link]("header", { text: "New Header"
});
};
const addList = () => {
[Link]?.[Link]("list", { items: ["Item 1", "Item 2", "Item
3"] });
};
const addQuote = () => {
[Link]?.[Link]("quote", { text: "This is a quote" });
};
const addEmbed = () => {
[Link]?.[Link]("code", {}); // Assuming code block for
embed
};
const buttonStyle = {
padding: "6px 12px",
79
backgroundColor: "#4b4b4b",
color: "#fff",

80
 border: "none",
borderRadius: "6px",
cursor: "pointer",
transition: "all 0.3s ease",
boxShadow: "0 2px 6px rgba(0, 0, 0, 0.2)",
fontSize: "14px",
display: "flex",
alignItems: "center",
justifyContent: "center",
};
const handleButtonClick = (e: [Link]) => {
if (isDragging) {
[Link]();
[Link]();
} else {
setIsPromptVisible(true);
}
};
const handlePromptSubmit = async () => {
setIsLoading(true);
try {
const { GoogleGenerativeAI } = require("@google/generative-ai");
const apiKey = "AIzaSyDm7a1Vw4-
Gp8h2GMsjHlFg438PDc2x574";
const genAI = new GoogleGenerativeAI(apiKey);
const model = [Link]({
model: "gemini-2.0-flash-exp",
});
const chatSession = [Link]({
generationConfig: {
temperature: 1,
81
 topP: 0.95,
topK: 40,
maxOutputTokens: 8192,
responseMimeType: "text/plain",
},
history: [],
});
const result = await [Link](userPrompt);
const response = await [Link]();
[Link]("Response from Gemini:", response);

const formattedData = formatResponseForEditorJS(response);

if ([Link]) {
[Link]();
[Link]("header", { text: userPrompt });
[Link]((block) =>
[Link]([Link], [Link])
);
}

setIsPromptVisible(false);
} catch (error) {
[Link]("Error during Gemini interaction:", error);
} finally {
setIsLoading(false);
}
};
// Helper function to format response
function formatResponseForEditorJS(response: string): { blocks: any[]
}{
82
 const blocks: any[] = [];
const lines = [Link]("\n");

[Link]((line) => {
const trimmedLine = [Link]();

if ([Link]("- ") || [Link]("* ")) {

// It's a bullet point
const lastBlock = blocks[[Link] - 1];
if (lastBlock && [Link] === "list")
{
// Add to existing list
[Link]([Link](2));
} else {
// Create a new
list [Link]({
type: "list",
data: { items: [[Link](2)] },
});
}
} else if (trimmedLine) {
// It's a paragraph
[Link]({
type: "paragraph",
data: { text: trimmedLine },
});
}
});

return { blocks };
}
83
return (

84
 <div
style={{
display: 'flex',
flexDirection: 'column',
height: '100vh',
backgroundColor: '#1a202c',
color: '#e2e2e2',
padding: 0,
margin: 0,
}}
>
{/* Toolbar Wrapper */}
<div
style={{
position: 'sticky',
top: 0,
zIndex: 10,
backgroundColor: '#3b3b3b',
padding: '5px 10px',
borderRadius: '10px 10px 0 0',
boxShadow: '0 4px 10px rgba(0, 0, 0, 0.3)',
height: '40px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
{/* Toolbar Buttons */}
<button className="toolbar-button hover:bg-gray-300 rounded
border inline-flex items-center h-8 px-3 text-sm"
onClick={addHeader}>
85
 <Text size={18} />
<span style={{ marginLeft: '5px' }}>Header</span>
</button>
<button className="toolbar-button hover:bg-gray-300 rounded
border inline-flex items-center h-8 px-3 text-sm" onClick={addList}>
<ListTodo size={20} />
<span style={{ marginLeft: '5px' }}>List</span>
</button>
<button className="toolbar-button hover:bg-gray-300 rounded
border inline-flex items-center h-8 px-3 text-sm"
onClick={addQuote}>
<MessageSquareQuote size={20} />
<span style={{ marginLeft: '5px' }}>Quote</span>
</button>
<button className="toolbar-button hover:bg-gray-300 rounded
border inline-flex items-center h-8 px-3 text-sm"
onClick={addEmbed}>
<Link size={20} />
<span style={{ marginLeft: '5px' }}>Embed</span>
</button>

{/* AI Button */}

<button
onClick={handleButtonClick}
style={{
...buttonStyle,
width: 'auto',
height: '40px',
borderRadius: '20px',
padding: '0 10px',
display: 'flex',

86
 alignItems: 'center',
justifyContent: 'center',
gap: '5px',
}}
className="ai-button hover:bg-gradient-to-r hover:from-amber-
500 hover:to-yellow-400"
>
<WandSparkles size={18} />
<span>AI</span>
</button>
</div>

{/* Draggable Container */}

<div
style={{
flex: 1,
padding: '20px',
backgroundColor: '#2a2a2a',
borderRadius: '0 0 10px 10px',
border: '1px solid #444',
overflowY: 'auto',
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)',
maxHeight: 'calc(100vh - 40px)',
}}
>
{/* Editor */}
<div id="editorjs"></div>
</div>

{/* Prompt Modal */}

{isPromptVisible && (
87
 <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-
center items-center z-50 backdrop-blur-md">
<div className="bg-gray-900 p-6 rounded-lg shadow-xl w-
full sm:w-96">
<textarea
ref={textareaRef}
value={userPrompt}
onChange={(e) => {
const prompt = [Link];
setCharCount([Link]);
if ([Link] <= MAX_PROMPT_LENGTH)
setUserPrompt(prompt);
}}
placeholder="Enter your prompt"
maxLength={MAX_PROMPT_LENGTH}
className="p-3 border border-amber-500 rounded-md w-
full mb-4 text-gray-900 focus:ring-2 focus:ring-amber-500 resize-
none overflow-hidden"
/>
<div className="flex justify-between items-center">
<span className="text-xs text-gray-500">
{charCount}/{MAX_PROMPT_LENGTH}
</span>
<div className="flex space-x-2">
<button
onClick={handlePromptSubmit}
className="w-full bg-gradient-to-r from-yellow-400 to-
amber-500 text-white px-4 py-2 rounded-md transition-colors
hover:bg- gradient-to-r hover:from-amber-500 hover:to-yellow-400
active:bg- yellow-600"
>
Submit
88
 </button>
<button
onClick={() => setIsPromptVisible(false)}
className="w-full bg-gray-700 text-white px-4 py-
2
rounded-md transition-colors hover:bg-gray-600 active:bg-gray-500"
>
Cancel
</button>
</div>
</div>
</div>
</div>
)}

{/* Loading Screen */}

{isLoading && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex justify-
center items-center z-50 backdrop-blur-md">
<div className="bg-gray-900 p-6 rounded-lg shadow-xl w-
full sm:w-96">
<div className="flex justify-center items-center">
<svg className="animate-spin h-5 w-5 text-white"
xmlns="[Link] fill="none" viewBox="0 0 24
24">
<circle className="opacity-25" cx="12" cy="12" r="10"
fill="currentColor" />
<path className="opacity-75" fill="currentColor" d="M4
12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0
014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
</svg>
<span className="text-white ml-3">Loading...</span>
89
</div>

90
 </div>
</div>
)}
</div>
);
}
export default Editor;

91
CHAPTER 6: RESULTS AND DISCUSSION
Output Screens

◆ Home Page

◆ About Page

92
◆ Register Page

◆ Login Page

93
◆ Teams Page

◆ New Tam named Test is Created

94
◆ Creating New File

❖ New File named untitled added

95
 ◆ Setting Priority

◆ Opening File in WorkSpace

96
 ◆ Editing the Canvas Container

◆ Editing the Editor Container

97
 ◆ Saving The Document

◆ Using the Ai For Text Generation

98
 ◆ Ai Response Added

◆ Exporting the Diagram

99
◆ Exported Diagram

10
0
 CHAPTER 7: CONCLUSION AND
REFRENCES

The "[Link] – Web-Based Product Management and Collaboration

Platform" successfully showcases the transformative power of real-time
collaboration tools in modern team-based workflows. By integrating document
editing, diagramming, and AI-assisted content generation, the platform enhances
productivity, improves efficiency, and fosters seamless teamwork across various
industries.

The system is built using [Link] 14 for a fast and scalable frontend experience, while
Convex provides a real-time database and backend infrastructure, ensuring instant
updates and synchronization across users. The integration of Google Gemini AI
enhances the user experience by offering intelligent suggestions, automated content
generation, and contextual assistance, making tasks more intuitive and efficient. Kinde
Auth ensures a secure authentication system, safeguarding user data and managing
access control effectively.

A key strength of the project lies in its real-time updates, hierarchical file
management, and AI-powered assistance, making it an ideal solution for remote
teams, product managers, developers, and creative professionals who require an
efficient and organized workspace. The platform allows users to collaborate on
documents, create structured workflows, visualize ideas through diagramming, and
manage files systematically.

10
1
References:

Websites:

1. [Link] Official Documentation - [Link]

2. Convex Database Documentation - [Link]

3. Excalidraw - [Link]

4. [Link] - [Link]

5. Google Gemini AI - [Link]

6. Tailwind CSS Documentation - [Link]

7. Kinde Auth Documentation - [Link]

10
2