1.1 Overview of the Project

The implementation of “Debugmate” into a web-based platform aims to increase productivity and interactive understanding of projects. The platform integrates an intelligent chatbot designed to streamline project management, role administration, and user interaction.

Users access a centralized dashboard where they can efficiently obtain project-related information. Project management features are restricted through a role management system, ensuring that only authorized users (e.g., Admin or HR) can create, update, or manage projects, while general users can only view or interact with assigned tasks.

A key highlight of the platform is the Chatbot module, designed to improve problem-solving, communication, and feedback collection. The chatbot acts as a virtual assistant for employees, helping them troubleshoot project-related issues, answer queries, and provide guidance in real time. It supports dual chat functionality for task-based and problem-based interactions.

The chatbot also serves as a feedback tool, enabling users to report issues, share concerns, and suggest improvements. This ensures continuous enhancement and system reliability.

The Project module includes a project form for submissions and two display views — table and card view — allowing flexible data visualization. This improves usability and decision-making.

The Role module lets administrators manage user roles, permissions, and send project-related emails to employees.

The Settings module enables users to personalize their profiles and choose between light or dark themes for an improved user experience.

1.2 Problem Statement

In many organizations, employees face difficulties in accessing accurate project information and company knowledge quickly. Searching through multiple documents, databases, or consulting colleagues can be inefficient and time-consuming. This leads to reduced productivity and slower decision-making.

There is a clear need for an intelligent system that can provide instant, role-based, and reliable answers to employee queries, making information access faster and more efficient.

1.3 Objectives of the Project

• Faster Information Access: Employees can quickly get project and company details.
• Role-Based Security: Users only see information relevant to their role, ensuring data safety.
• Improved Productivity: Less time searching for data means more time focusing on work.
• Better Decision-Making: Accurate and timely data supports informed choices.
• Enhanced Collaboration: Teams communicate and share knowledge efficiently using the chatbot.
• Client Requirement Fulfillment: Employees access accurate project details to meet client needs effectively.
• Intelligent Assistance: The chatbot provides accurate, interactive, and context-aware responses.

1.4 The Need of Platform

Managing projects and roles manually leads to inefficiency and lack of proper access control. A centralized digital platform is necessary to securely organize project details and assign responsibilities effectively.

The proposed system offers a dashboard-based platform where project data can be submitted, stored, and viewed in both table and card formats for better analysis and decision-making.

Role management ensures that only authorized users (Admin/HR) manage projects, while general users have limited access.

The platform also provides profile management and theme customization options (light/dark mode), improving user comfort and accessibility.

All data, including project details, roles, and user settings, are securely stored in a Supabase database, ensuring scalability, reliability, and efficient management.

2.1 System Architecture

The system architecture of Debugmate consists of multiple components that interact seamlessly to provide role-based access, efficient project management, and real-time assistance via the chatbot.

Architecture Overview: The platform is built using a web-based architecture that integrates an AI-powered chatbot, a secure role management system, and a user-friendly interface for administrators and general users.

Key components include:

• Frontend (UI): Built with HTML, CSS, and JavaScript for a responsive, user-friendly experience.
• Backend (Flask): Handles requests, processes data, and interfaces with the Supabase database.
• Database (Supabase): Manages user information, project data, and user memory.
• AI/NLP Layer: Integrates LangChain, ChromaDB, and OpenRouter to handle dynamic Q&A and document retrieval.

The system architecture diagram below illustrates the key modules and their interactions.

2.2 Data Flow Diagram (DFD)

The Data Flow Diagram (DFD) describes the flow of information within the Debugmate system. It provides a visual representation of how data moves between various system components.

2.2.1 (i) User DFD Level 1

The User DFD Level 1 outlines how a typical user (employee) interacts with the system. It shows the main processes and data flows for tasks like accessing project information, interacting with the chatbot, and receiving feedback.

2.2.2 (ii) User DFD Level 2

The User DFD Level 2 zooms in to show more granular details of the user's interactions, including specific processes like querying project data, managing role permissions, and interacting with the helpdesk.

2.2.3 (i) Admin DFD Level 1

The Admin DFD Level 1 describes the main processes from the administrator's perspective. It covers tasks like managing user roles, reviewing project data, and overseeing system settings.

2.2.4 (ii) Admin DFD Level 2

The Admin DFD Level 2 provides more detail on administrative interactions, such as managing user data, handling project submissions, and analyzing system performance.

3.1 Technology Stack

The frontend of Debugmate is developed using modern web technologies to ensure a responsive, intuitive, and user-friendly experience.

• HTML5 & CSS3: Structure and styling of all pages.
• JavaScript: Dynamic behavior, interactivity, and smooth navigation.
• React.js (Optional): For building reusable UI components (if required in future expansion).
• Responsive Design: Ensures compatibility across devices and screen sizes.
• CSS Flexbox & Grid: Used for layout design of dashboard, cards, and tables.
• Dark/Light Theme Toggle: Provides personalized user interface experience.

3.2 Features & Functionalities

• Centralized Dashboard for project access.
• Role-based access control for Admin, HR, and Employees.
• Dual Chatbot functionality for troubleshooting and feedback.
• Project module with table and card view for better data analysis.
• Role management and email notifications for project updates.
• User settings for profile management and theme customization.
• Responsive design for all screen sizes.

3.3 UI/UX Design Principles

The platform follows modern UI/UX principles to ensure a seamless experience:

• Consistency: Uniform design and color scheme across the platform.
• Clarity: Clear labeling, icons, and hierarchy to help users navigate easily.
• Accessibility: Light and dark themes, readable font sizes, and color contrast for accessibility.
• Feedback: Users receive clear feedback from actions like form submissions, errors, or chatbot interactions.
• Efficiency: Quick access to project info and chat support for faster task completion.

3.4 Wireframes/Screenshots

The wireframes represent the planned layout of the platform. Screenshots show the current interface design and module arrangement.

3.5 Challenges & Solutions

• Challenge: Role-based UI needed for different types of users.
  Solution: Conditional rendering based on user role; Admin/HR sees full dashboard, employees limited view.
• Challenge: Responsive design for all devices.
  Solution: Used CSS Flexbox and media queries to adjust layouts automatically.
• Challenge: Real-time chatbot integration.
  Solution: Implemented asynchronous JavaScript calls to backend API for smooth experience.
• Challenge: Large project data rendering.
  Solution: Table pagination and card view for efficient visualization.

4.1 Overview of Chatbot

The AI chatbot is an in-house project designed to enhance productivity and provide interactive project understanding. It features role-based access, allowing users to receive information according to their assigned permissions. There are two types: General Chatbot for technical help, code queries, general knowledge, and web search, and Project-Based Chatbot that delivers detailed, role-specific project information.

The system integrates Supabase for database management, LangChain with ChromaDB for document-based RAG, and OpenRouter for LLM responses, ensuring accurate and context-aware answers. Persistent memory and dynamic querying enable the chatbot to provide personalized, human-like interactions while handling both project and general queries efficiently.

4.2 Chatbot Type

4.2.1 General Chatbot

• Purpose: Provides employees with quick, everyday assistance for general questions, technical queries, coding issues, and basic company information.
• How It Works: Users type questions in natural language. The chatbot searches its memory and internal knowledge sources, then falls back to AI (LLM) if needed.
• Technical Details:
  • Data Sources: Supabase database for known facts, RAG system (LangChain + ChromaDB) for internal documents.
  • Fallback: LLM (OpenRouter API – Gemini 2.5 Flash) handles unanswered queries.
  • Memory: Stores user interactions in user_memory for context-aware answers.
• Use Case Examples:
  • "How can we implement Python into a React app?"
  • "Give basic navbar code structure."
  • "Explain Python decorators."
• Benefits: Instant answers, reduced repetitive work, consistent knowledge across the company.

4.2.2 Project-Based Chatbot

• Purpose: Provides detailed, role-aware project information. Answers vary for Admin, HR, or Employee.
• Technical Details:
  • Data Sources: Supabase tables (projects, user_perms, user_memory), RAG system for project documents.
  • Role-Based Access:
    • Admin: Full access to all project data.
    • HR: Access to project memory and employee assignments.
    • Employee: Access only to assigned projects.
  • Memory: Stores project interactions and known facts for future context.
• Use Case Examples:
  • "Who is the leader of Project X?"
  • "What is the deadline for the frontend module?"
  • "List all tasks assigned to me this week."
• Benefits: Single source of truth for project queries, improved collaboration, role-based security.

4.3 AI & NLP Techniques

• Natural Language Processing (NLP): LangChain pipelines + Python regex and cleaning functions for query processing.
• Text Preprocessing: RecursiveCharacterTextSplitter for chunking; normalization using Python string functions and regex.
• Embeddings: SentenceTransformerEmbeddings (Hugging Face) for vector embeddings.
• Semantic Search & Vector Similarity: ChromaDB for storing/retrieving embeddings; cosine similarity for relevance ranking.
• Retrieval-Augmented Generation (RAG): Fetch context from ChromaDB and generate responses via LLM (Gemini 2.5 Flash).
• Chunking & Document Indexing: RecursiveCharacterTextSplitter to split PDFs/text files; embeddings stored in ChromaDB.
• Prompt Engineering & Context Design: Custom LangChain PromptTemplates for role-based access and natural response tone.
• LLMs for Response Generation: Gemini 2.5 Flash via OpenRouter API produces fluent, context-aware answers.
• Role-Based Filtering & Access Control: Supabase user_perms checked before responding to ensure secure access.
• Memory & Session Management: Short-term: Flask-Session; Long-term: Supabase user_memory for persistence.
• Summarization & Answer Shortening: LLM generates concise outputs for long documents or queries.
• Intent Detection & Slot Extraction: Regex + LangChain parsing for precise database queries.
• Evaluation Metrics & Human Review: Logging + developer review to fine-tune retrieval and responses.
• Privacy & Security Practices: Role-based filtering, .env for API keys, no unnecessary sensitive data sent to LLM.

4.4 Integration with Supabase & RAG

• Supabase Integration: Main database for users, projects, roles, and chatbot memory.
  • User Management: employee roles, permissions, login info.
  • Chatbot Memory: user_memory table stores facts for context-aware responses.
  • Project Data Retrieval: projects table queried dynamically by project ID or name.
  • Role-Based Access Control: chatbot filters queries based on user role.
• RAG with ChromaDB:
  • Document Ingestion: PDFs/text files split into chunks.
  • Embeddings: SentenceTransformerEmbeddings for semantic representation.
  • Storage: ChromaDB vector database.
  • Retrieval: Cosine similarity search for relevant chunks.
  • Generation: Chunks + user query sent to LLM for answer generation.
• Combined Workflow: User query → Supabase → ChromaDB (if needed) → LLM → store in Supabase memory.

4.5 Memory Management & Context Handling

• Purpose of Memory: Tracks past conversations, user preferences, project knowledge for natural interactions.
• Types of Memory:
  • Session-based: chat history within active session.
  • Long-term: Supabase user_memory table, persists facts across sessions.
  • Contextual: combines session, Supabase memory, and RAG document chunks.
• How Memory Works:
  • User query checked against Supabase → fetch relevant rows if found.
  • If not found, check ChromaDB → fallback to LLM if still unresolved.
  • Memory Update: store important facts in user_memory.
  • Context Injection: recent session + Supabase memory + RAG documents into LLM prompt.
  • Response Generation: LLM generates answer respecting role-based filters; new facts stored in long-term memory.

5.1 Overview of Backend

Supabase is a powerful open-source Backend-as-a-Service (BaaS), often seen as an alternative to Firebase. It’s built on PostgreSQL, giving developers the reliability of SQL, rich extensions, and strong data portability.

• Postgres Database – Dedicated PostgreSQL database.
• Instant APIs – Auto-generated RESTful APIs for CRUD operations.
• Authentication – Email/password, magic links, OAuth, RLS.
• Storage – S3-compatible object storage.
• Realtime – Real-time data sync for live apps.
• Edge Functions – Serverless backend logic.

5.2 Purpose of the Backend Module

• Data Management – Stores and manages all project-related data securely.
• API Provisioning – Provides endpoints for frontend and modules.
• Security & Access Control – Role-based permissions and RLS policies.
• Integration Facilitation – Bridge between frontend, AI chatbot, and DB.
• Business Logic Execution – Implements project workflows consistently.

5.3 Technology Stack

• Supabase (Database & Backend Services)
• PostgreSQL database for storing users, projects, roles, and interactions
• Authentication & role-based access control
• Realtime updates and secure data management

5.4 Database Schema

• employee_login: Stores employee login information
• feedback: Stores user feedback on chatbot responses
• learned_facts: Knowledge the chatbot has learned
• user_memory: Stores temporary memory or contextual data
• user_perms: Registered user accounts and permissions

5.5 API Endpoints & Workflows

• User Authentication & Management – /auth/signup, /auth/login, /auth/logout
• Employee Login Management – /employee_login, /employee_logout/:id
• Chatbot Knowledge Management – /facts endpoints
• Feedback Management – /feedback endpoints
• User Memory – /memory endpoints
• Integration Workflow – Frontend → Backend → Supabase → AI → Frontend

5.6 Security & Authentication

• Row-Level Security (RLS) Policies – Table-specific access control.
• JWT Authentication – Secure authentication and role-based access.
• Security Workflow – User login, API request validation, RLS enforcement.

5.7 Error Handling & Logging

• Error Handling – Validation errors, auth errors, database errors, unhandled exceptions.
• Structured JSON response for frontend.
• Logging – Request logs, error logs, audit logs for monitoring and debugging.