CollabChat

CollabChat is a real-time collaboration and project management platform that streamlines communication, task tracking, and file organization within teams. It’s built for clarity, structure, and scalability for helping owners, managers, and members stay aligned.

Tech Stack

• Frontend - Next.js 15, Tailwind CSS, Lucide React
  
• Backend - Node.js, Socket.io, PostgreSQL (Supabase)
  
• Auth & DB - Supabase Auth & Storage
  
• Hosting - Render, Vercel
  

Technical Problem

• The Problem - Project managers lose significant time manually migrating requirements from group chats into task management software, often leading to missed deadlines and fragmented context.
  
• The Solution - Developed a seamless "Message-to-Task" conversion pipeline using a customized React template system and Socket.io for real-time status synchronization, allowing managers to instantly convert conversation into trackable items.
  

Key Features & Technical Highlights

• Contextual Task Conversion - Custom-built ConvertMsgTaskTemplate to parse chat data directly into the DB with zero manual copy-pasting.
  
• Real-time Synchronization - Implemented Socket.io with room-based isolation to ensure instant message delivery and read-receipt accuracy across teams.
  
• Role-Based Access Control (RBAC) - Strict hierarchical permissions ensuring only Owners and Managers can access administrative task conversion tools.
  
• Performance Optimized - Leveraged Next.js Client/Server component separation to maintain low-latency chat interactions even during heavy DB writes.
  

Project Structure

project-root/
│
├── backend/
│   ├── controllers/        # Handles request logic
│   ├── routes/             # API route definitions
│   ├── services/           # Business logic / external API calls
│   ├── models/             # Database models (e.g., Sequelize, Mongoose)
│   ├── middlewares/        # Authentication, logging, etc.
│   ├── utils/              # Helper functions
│   ├── config/             # Environment configs, DB configs
│   └── server.js           # Entry point (instead of main.py)
│
├── frontend/
│   ├── components/
│   ├── pages/
│   └── utils/
│
├── docs/
│   ├── SRS.md
│   ├── DDR.md
│   └── diagrams/
│
└── README.md

API Testing & Documentation

The API is fully documented and validated via Postman to ensure data integrity across chat and task modules.

• Postman Collection: You can find the raw JSON collection here
• How to test:
• 1. Import the collection into postman.
  2. Set the base_url .
  3. Execute the "Task Conversion Flow" to simulate turning a message into a project task.

Sample API Response (Locking Success)

{
    "status": "success",
    "taskCreation": {
        "status": "success",
        "data": {
            "id": 102,
            "title": "Fix login button",
            "description": "User reported that the login button is unresponsive on mobile.",
            "assigned_to": "user_uuid_here",
            "status": "To Do"
        }
    }
}

RoadMap

[x] Socket.io Room-based Chat.
[x] Role-based Task Conversion logic.
[x] Supabase Database integration.
[ ] Advanced Productivity Analytics.
[ ] File/Image sharing in chat.

Testing

• API Testing: Comprehensive Postman testing for all CRUD operations.
  
• Manual QA: Verified Socket.io connection stability under simulated high-latency network conditions.