Gradient

Gradient is a project management tool built with React, Vite, and Supabase. It allows teams to assign work, discuss tasks in dedicated threads, preview documents directly in the browser, and manage access across administrators, managers, and employees.

---

Table of Contents

1. Overview
2. Key Features
3. User Roles and Permissions
4. System Architecture
5. Real-Time and Concurrency Handling
6. Security and Session Isolation
7. Tech Stack
8. Getting Started
9. Environment Configuration
10. Default Test Accounts
11. License

---

Overview

Gradient simplifies workflow coordination between management and team members. The platform removes the need for separate chat apps and file-sharing links by keeping discussions, reference files, submission links, and status tracking inside each task item.

---

Key Features

Task Management

• Create, update, reassign, and track tasks across different project stages.
• Assign single tasks to multiple team members simultaneously.
• Set task priorities, deadlines, and delivery requirements.

Real-Time Chat and Notifications

• Dedicated discussion thread bound to each task record.
• Instant unread message badges and notification bell updates powered by PostgreSQL change streams.
• Live status changes reflect across all connected clients without page reloads.

File Sharing and In-App Document Preview

• Direct file uploads for project briefs, assets, and final deliverables.
• Built-in sandboxed viewer for images (PNG, JPG, SVG, WebP) and PDF documents to prevent forced local downloads.
• Automatic file-type fallback handling for unsupported formats.

Clean Data Management

• Database-level cascade constraints ensure that deleting a task automatically removes its related comments, attachments, and assignments.

---

User Roles and Permissions

Role	Access Level	Responsibilities
Superadmin	Global System Access	Manage user accounts, monitor system health, and map manager-to-employee reporting lines.
Manager	Management Console	Create and delegate tasks, assign team members, review deliverable submissions, and track progress.
Employee	Contributor Dashboard	View active tasks, submit work (links and files), participate in task discussions, and track completed work.

---

System Architecture

+------------------------------------------------------------------+
|                         Frontend Client                          |
|             React 18 (Vite) + Vanilla CSS + Geist Sans           |
|         Tab-Scoped Auth State (sessionStorage) + Context API     |
+---------------------------------+--------------------------------+
                                  |
                                  | HTTPS REST / WebSocket Streams
                                  v
+------------------------------------------------------------------+
|                         Supabase Cloud                           |
+--------------------+---------------------+-----------------------+
|   PostgreSQL DB    |     GoTrue Auth     |     Object Storage    |
| (RLS & Triggers)   | (JWT Token Handling)|   (Chat & Task Files) |
+--------------------+---------------------+-----------------------+

---

Real-Time and Concurrency Handling

• Database Subscriptions: Gradient uses Supabase Realtime (WebSocket channels) to listen for INSERT, UPDATE, and DELETE events on the task and chat tables.
• Optimistic UI Updates: Interface counters and badge states update instantly during client interactions before confirmation responses arrive from the database.
• Conflict Prevention: Task status transitions and assignments are guarded by database Row-Level Security (RLS) policies to prevent unauthorized overwrites.

---

Security and Session Isolation

• Tab-Isolated Authentication: Session tokens are held in sessionStorage rather than shared localStorage. This allows developers and managers to test different roles (e.g., Admin, Manager, and Employee) in separate browser tabs side by side.
• Route Guards: Client-side route components verify the user's role before rendering views, redirecting unauthorized traffic to the appropriate landing view.
• Data Protection: Access to storage buckets and relational tables is restricted via Supabase RLS policies matching the authenticated user ID and assigned role.

---

Tech Stack

• Frontend: React 18, Vite
• Styling: Plain CSS, Glassmorphic components, Geist Sans typography
• Icons: Google Material Symbols
• Backend: Supabase
  • PostgreSQL database
  • GoTrue Authentication
  • Realtime WebSocket engine
  • Storage buckets for media and attachments

---

Getting Started

Prerequisites

• Node.js (v18.0.0 or higher)
• npm or yarn package manager
• A configured Supabase project

Installation

1. Clone the repository:

   git clone https://github.com/Girisha1908/Gradient.git
   cd Gradient

2. Install dependencies:

   npm install

3. Set up your local environment file:

   cp .env.example .env

4. Run the development server:

   npm run dev

5. Build for production:

   npm run build

---

Environment Configuration

Create a .env file in the root directory and provide your Supabase connection parameters:

VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key

---

Default Test Accounts

Use these pre-configured accounts for testing different permission levels locally:

Role	Email	Use Case
Superadmin	anamalageetika@gmail.com	System configuration and user mapping
Manager	anamalagirisha@gmail.com	Task creation, delegation, and review
Employee	tanmayee_chanda@srmap.edu.in	Task submissions, chat, and file uploads

---

License

This project is licensed under the MIT License.