Chemical Equipment Parameter Visualizer

A full-stack application for visualizing and analyzing chemical equipment parameters. Upload CSV data, view interactive charts, manage datasets, and generate PDF reports.

Quick Setup

Prerequisites

• Node.js v24+
• Bun v1.3.5+
• Python 3.14+
• uv (Python package manager)

Installation

# Clone the repository
git clone https://github.com/tutankhAman/FOSSEE-IST.git
cd FOSSEE-IST

# Install JavaScript dependencies
bun install

# Configure the API environment
cp apps/api/.env.example apps/api/.env

Running the Application

Web Application (API + Frontend):

bun run web

This starts both the Django API (port 8001) and Vite dev server (port 5173).

Desktop Application (API + Native):

bun run native

This starts the Django API and the PyQt5 desktop client.

API Server Only:

bun run api

Create Admin User

bun run admin

Available Scripts

Script	Description
bun run web	Start web app (API + frontend)
bun run native	Start desktop app (API + PyQt5)
bun run api	Start API server only
bun run dev	Start frontend dev server only
bun run desktop	Start desktop client only
bun run migrate	Run database migrations
bun run admin	Create Django superuser
bun run check	Run linters (Biome + Ruff)
bun run biome	Lint/format frontend code
bun run ruff	Lint/format Python code

Features

CSV Data Upload

• Drag-and-drop file upload
• File validation (CSV format, required columns)
• Upload progress indicator
• Auto-switch to Dashboard on success

Data Visualization

• Bar Chart: Equipment count by type
• Pie Chart: Equipment type distribution
• Line Chart: Temperature/Pressure trends
• Scatter Plot: Flowrate vs Pressure correlation

Data Table

• Sortable columns
• Pagination with configurable page size
• Search and filter functionality
• Column visibility toggle

Summary Statistics

• Total equipment count
• Average flowrate, pressure, temperature
• Equipment type distribution
• Min/Max values per parameter

History Management

• View last 5 uploaded datasets
• Load historical data as active dataset
• Delete historical entries

PDF Report Generation

• Generate summary reports
• Include charts and statistics
• Download functionality

Authentication

• JWT-based authentication
• User registration and login
• Session management with token refresh

Architecture

┌─────────────────────────────────────────────────────────────┐
│                     FRONTEND (React SPA)                    │
├─────────────────────────────────────────────────────────────┤
│  App Shell: Header | Tabs Container | Content Area         │
├─────────────────────────────────────────────────────────────┤
│  Tabs: Dashboard | Upload | Data | History | Reports        │
├─────────────────────────────────────────────────────────────┤
│  Components: DataTable | Charts | FileUpload | Summary      │
├─────────────────────────────────────────────────────────────┤
│  Services: API Client | Auth Context                        │
└────────────────────────────┬────────────────────────────────┘
                             │ REST API
                             ▼
┌─────────────────────────────────────────────────────────────┐
│                      BACKEND (Django DRF)                   │
├─────────────────────────────────────────────────────────────┤
│  Endpoints: /api/upload | /api/data | /api/summary | /auth  │
├─────────────────────────────────────────────────────────────┤
│  Services: CSV Parser | Analytics | PDF Generator | Auth    │
├─────────────────────────────────────────────────────────────┤
│  Database: SQLite (Last 5 datasets)                         │
└─────────────────────────────────────────────────────────────┘

Tech Stack

Web Frontend

Technology	Purpose
React 19 + TypeScript	UI Framework
Vite (Rolldown)	Build tool
Tailwind CSS v4	Styling
shadcn/ui	UI Components
Chart.js + react-chartjs-2	Data visualization
Axios	HTTP client
React Hook Form + Zod	Form validation
Sonner	Toast notifications

Desktop Client

Technology	Purpose
PyQt5	Desktop UI framework
Matplotlib	Charts and visualization
Pandas	Data processing
NumPy	Numerical computations
Requests	API communication
Cryptography	Secure token storage

Backend API

Technology	Purpose
Django 6	Web framework
Django REST Framework	API layer
SimpleJWT	Authentication
Pandas	CSV parsing
ReportLab	PDF generation
SQLite	Database

Project Structure

FOSSEE-IST/
├── apps/
│   ├── web/                    # React web frontend
│   │   ├── src/
│   │   │   ├── components/     # UI components
│   │   │   │   ├── auth/       # Authentication forms
│   │   │   │   ├── charts/     # Chart components
│   │   │   │   ├── data-table/ # Data table components
│   │   │   │   ├── layout/     # Layout components
│   │   │   │   ├── tabs/       # Tab panels
│   │   │   │   └── ui/         # shadcn/ui components
│   │   │   ├── context/        # React context providers
│   │   │   ├── hooks/          # Custom hooks
│   │   │   ├── lib/            # Utility functions
│   │   │   ├── services/       # API client
│   │   │   └── types/          # TypeScript definitions
│   │   └── public/             # Static assets
│   │
│   ├── api/                    # Django backend
│   │   ├── config/             # Django settings
│   │   ├── core/               # Main application
│   │   │   ├── management/     # Custom management commands
│   │   │   ├── migrations/     # Database migrations
│   │   │   ├── views.py        # API endpoints
│   │   │   ├── serializers.py  # Data serialization
│   │   │   ├── models.py       # Database models
│   │   │   ├── urls.py         # URL routing
│   │   │   └── pdf_generator.py
│   │   └── manage.py
│   │
│   └── native/                 # PyQt5 desktop client
│       ├── ui/
│       │   ├── auth/           # Authentication forms
│       │   ├── charts/         # Chart components
│       │   ├── components/     # Reusable UI components
│       │   ├── layout/         # Layout components
│       │   ├── tabs/           # Tab panels
│       │   └── widgets/        # Widget definitions
│       ├── icons/              # Application icons
│       ├── api.py              # API client
│       ├── models.py           # Data models
│       ├── styles.py           # Application styling
│       ├── token_storage.py    # Token management
│       └── main.py             # Entry point
│
└── package.json                # Workspace configuration

API Endpoints

Method	Endpoint	Description
GET	/api/health/	Health check endpoint
POST	/api/auth/login/	User login
POST	/api/auth/register/	User registration
POST	/api/auth/refresh/	Refresh access token
POST	/api/auth/logout/	Logout (blacklist token)
GET	/api/auth/user/	Get current user
POST	/api/datasets/upload	Upload CSV file
GET	/api/datasets/	List datasets (last 5)
GET	/api/datasets/{id}/	Get dataset details
DELETE	/api/datasets/{id}/	Delete dataset
GET	/api/datasets/{id}/data/	Get equipment data
GET	/api/datasets/{id}/summary/	Get summary statistics
GET	/api/datasets/{id}/report/	Download PDF report

For detailed API documentation, see apps/web/.context/API_SPEC.md.

CSV Format

Upload CSV files with the following columns:

Equipment Name,Type,Flowrate,Pressure,Temperature
Pump-001,Pump,150.5,45.2,85.0
Reactor-001,Reactor,0,120.5,250.0
HeatExchanger-001,Heat Exchanger,200.0,35.0,180.0

A sample file is available at apps/web/public/sample_equipment_data.csv.

Environment Variables

API (apps/api/.env)

SECRET_KEY=your-secret-key
DEBUG=True
ALLOWED_HOSTS=localhost,127.0.0.1
CORS_ALLOWED_ORIGINS=http://localhost:5173,http://localhost:3000
CSRF_TRUSTED_ORIGINS=http://localhost:5173,http://localhost:3000

# Optional: S3 Storage
AWS_ACCESS_KEY_ID=your-access-key-id
AWS_SECRET_ACCESS_KEY=your-secret-access-key
AWS_STORAGE_BUCKET_NAME=your-bucket-name
AWS_S3_REGION_NAME=ap-south-1

Development

Code Quality

# Run all linters
bun run check

# Frontend only (Biome)
bun run biome

# Python only (Ruff)
bun run ruff

# Sync Python dependencies
bun run iuv

Git Workflow

1. Create feature branches from main
2. Branch naming: feature/, fix/, docs/
3. Use conventional commit messages
4. Create pull requests for merging

License

MIT