Collabora8r (Project Management Tool)

A project collaboration tool I built using MERN stack aiming to craft a full stack web application which enhances team collaboration, streamlines task management and assignment, and track project progress efficiently ensuring seamless communication, workflow and improvement in productivity.

This is the client-side of the project, built using React to create a dynamic and responsive user interface along with react supported technologies/ kits.

• The useContext API of react is leveraged for state management across various components, enabling smooth data flow and simplifying the handling of shared state.
• Socket.IO Client is integrated to enable real-time communication, allowing instant notifications and updates for team members. For enhanced animations and smooth transitions.
• Framer Motion is utilized, ensuring a polished and engaging user experience throughout the application.

These technologies combine to create an interactive and seamless interface for effective project collaboration.

---

Project Description

Application Collabor8r is an intuitive and robust project management tool designed to streamline team collaboration, task management, and project tracking. Built using MERN stack (MongoDB, Express, React, and Node.js) this application ensures smooth and productive project workflows for teams of all sizes. Whether you're managing tasks, tracking progress, or collaborating with colleagues, Collabor8r provides a seamless experience to keep everything on track. With a focus on enhancing productivity, Collabor8r provides advanced features and interactive elements to ensure efficient project execution.

---

🤖 Tech Stack

---

• Check out the latest demo of Project Collabor8r-Site.
• Find the Server's Repository of this Project Here Collabor8r-Server.

---

Run Locally

Clone the project using the following command:

   git clone https://github.com/BazilSuhail/Collabora8r-Client.git

Go to the project directory

   cd Collabora8r-Client

Then Run this command in your terminal to install all required dependancies:

   npm install

In the project directory, you can run:

   npm start

Runs the app in the development mode. Open http://localhost:5173 to view it in your browser.

---

Features

Task Management

• Task Creation: Create tasks with detailed descriptions, deadlines, and priority levels.
• Task Assignment: Assign tasks to specific team members, track progress, and set due dates.
• Task Status Updates: Real-time updates on task status (e.g., In Progress, Completed) with visual indicators.

Real Time Notifications

• Project Invitations: Real-time notifications for team members when invited to join a project.
• Manager Invitations: Instant updates for managers when assigned to oversee a project.
• Invitation Status: Live tracking of invitation acceptance or rejection status.

Team Collaboration

• Discussion Boards: Engage in team discussions for each project, share ideas, and resolve issues via comments in a particular task.
• Real-time Notifications: Receive real-time notifications for team/ project invitation or a Project Manager Role.

Project Timelines

• Gantt Charts: Visualize project timelines with interactive Gantt charts.
• Milestone Tracking: Set and track progress to ensure projects stay on schedule.
• Progress Reporting: View progress against individual tasks.

User Profile Management

• View and Edit Profile: Users can view and update their profile information, including full name, email, and role within the team.
• Profile Picture Upload: Upload and update your profile picture for a personalized user experience.

Analytics and Reporting

• Project Analytics: Gain insights into project performance with data-driven analytics.
• Task Completion Reports: View detailed reports on task completion rates, time spent, and team productivity.

Security and Permissions

• Role-Based Access Control: Define roles and permissions to ensure secure and organized access to project data.
• Data Encryption: All sensitive data is encrypted to protect against unauthorized access.