Chemical Equipment Parameter Visualizer (Hybrid Web + Desktop App)

Intern Screening Task by FOSSEE

A hybrid Web + Desktop application for data visualization and analytics of chemical equipment parameters. Built with Django REST API backend, React.js web frontend, and PyQt5 desktop frontend.

 
 Screenshots 
     
Structure 
     
 Architecture 
     
 Commands 
     
 Instructions 
 

---

Deployed URLs

Note

This application is deployed and accessible at the following URLs, hosted on Oracle Cloud and will be available till the end of the intern screening period

Service	URL
Web App	https://fossee-wast.singularityworks.xyz
API	https://fwbasli-api.singularityworks.xyz/api/

Tip

For web app or native desktop app you can use the following test user credentials OR you can register a new user via the login page on web or the native desktop app.

Credentials	Value
Username:	fossee
Password:	fosseewba

---

Tech Stack

This project is built using the following technologies as mentioned in the requirements document:

Layer	Technology	Purpose
Backend	Django + REST Framework	REST API, Authentication, Data Processing
Frontend (Web)	React + TypeScript + Vite + Chart.js	Web Interface
Frontend (Desktop)	PyQt5 + Matplotlib	Native Desktop Interface
Data Processing	Pandas	CSV parsing and analytics
Database	SQLite	Persistent storage
Authentication	JWT (SimpleJWT)	Secure token-based auth
PDF Generation	ReportLab	Export reports
Storage	Local (dev) / AWS S3 (prod)	File storage
Package Manager	Bun + UV	JS/TS and Python dependencies
Monorepo	Turborepo + Bun Workspaces	Build orchestration

Note

The architecture slightly differs between development (local) and production deployments as detailed below.

---

Monorepo Structure

This project is a monorepo managed with Bun workspaces and Turborepo also managed with UV for Python dependencies.:

fossee-wast/
├── apps/
│   ├── api/          # Django REST API (Python/UV)
│   ├── web/          # React + Vite Frontend (TypeScript/Bun)
│   └── native/       # PyQt5 Desktop App (Python/UV)
├── packages/         # Shared packages (if any)
├── package.json      # Root workspace config & scripts
├── turbo.json        # Turborepo configuration
└── bun.lock          # Bun lockfile

Workspace Packages

The monorepo contains the following packages bundled together:

Package	Path	Manager	Description
api	apps/api	UV (Python)	Django REST API backend
web	apps/web	Bun (JS/TS)	React web frontend
native	apps/native	UV (Python)	PyQt5 desktop application

---

Architecture

Development Architecture

For the local development setup, the architecture is as follows, where both web and desktop clients communicate with the Django REST API backend which uses SQLite for data storage and local file system for media files.

flowchart TB
    subgraph Clients["Client Applications"]
        WEB["Web Frontend<br/>(React + Vite)<br/>localhost:5173"]
        DESKTOP["Desktop App<br/>(PyQt5 + Matplotlib)"]
    end

    subgraph Backend["Backend Services"]
        API["Django REST API<br/>localhost:8001"]
        DB[(SQLite Database)]
        LOCAL["Local File Storage<br/>(media_local/)"]
    end

    WEB -->|HTTP/REST<br/>JWT Auth| API
    DESKTOP -->|HTTP/REST<br/>JWT Auth| API
    API --> DB
    API --> LOCAL

Loading

Production Architecture

In production, the web frontend is served via Nginx as a static SPA, while the API is hosted with Gunicorn. Media files are stored in an AWS S3 bucket, and the database remains SQLite with a persistent volume.

flowchart TB
    subgraph Internet["Internet"]
        USER["Users"]
    end

    subgraph CloudInfra["Cloud Infrastructure"]
        subgraph WebTier["Web Tier"]
            NGINX["Nginx<br/>(Static Files + SPA)"]
            WEBURL["fossee-wast.singularityworks.xyz"]
        end

        subgraph APITier["API Tier"]
            GUNICORN["Gunicorn<br/>(2 Workers)"]
            DJANGO["Django REST API"]
            APIURL["fwbasli-api.singularityworks.xyz"]
        end

        subgraph Storage["Storage Layer"]
            DB[(SQLite Database<br/>/app/data/)]
            S3["AWS S3 Bucket<br/>(Media Files)"]
        end
    end

    USER --> WEBURL
    WEBURL --> NGINX
    NGINX -->|Static Assets| USER
    USER --> APIURL
    APIURL --> GUNICORN
    GUNICORN --> DJANGO
    DJANGO --> DB
    DJANGO -->|File Storage| S3

Loading

---

Prerequisites

Warning

Ensure you have the following tools installed on your system before proceeding with the setup.

Tool	Version	Installation
Node.js	>= 24	node
Bun	>= 1.3.5	bun
Python	>= 3.14	python
UV	Latest	uv

---

Setup Instructions

# 1. Clone the Repository
git clone https://github.com/yourusername/FOSSEE-WAST.git
cd FOSSEE-WAST
# 2. Install Dependencies
# Install root JS dependencies (includes Bun workspaces)
bun install
# Install Python dependencies for both API and Native apps
bun run iuv
# 3. Setup Environment Variables
bun run setup:env
# 3. OR manually copy .env files
cp apps/api/.env.example apps/api/.env
# 4. Run Database Migrations
bun run migrate
# 5. (Optional) Create Admin User
bun run admin

---

Running the Application

Option A: Run Web App (Frontend + API)

bun run web

This starts:

• API server at http://localhost:8001
• Web frontend at http://localhost:5173

Option B: Run Desktop App (Native + API)

bun run native

This starts:

• API server at http://localhost:8001
• PyQt5 desktop application

Option C: Run Components Separately

# Terminal 1: API only
bun run api

# Terminal 2: Web frontend only
bun run dev

# Or: Desktop app only (requires API running)
bun run desktop

---

Screenshots

Upload Interface	Upload History	Data Table View
Sample Data Visualization	Large Dataset View	PDF Reports

---

Available Commands

Command	Description
bun run setup:env	Copy .env.example to .env in API folder
bun run web	Run API + Web frontend concurrently
bun run native	Run API + Desktop app concurrently
bun run dev	Run web frontend only (Vite dev server)
bun run api	Run Django API server only
bun run desktop	Run PyQt5 desktop app only
bun run migrate	Run Django database migrations
bun run admin	Create Django superuser
bun run iuv	Sync UV dependencies for Python apps
bun run check	Run all linters (Biome + Ruff)
bun run biome	Run Biome linter on web app
bun run ruff	Run Ruff linter on Python apps

---

Features

Feature	Description
CSV Upload	Upload equipment data via Web or Desktop interface
Data Visualization	Interactive charts (Bar, Pie, Scatter, Line) using Chart.js (Web) and Matplotlib (Desktop)
Data Table	Paginated, sortable, filterable equipment data view
Summary Statistics	Aggregated metrics (min, max, avg, sum) for flowrate, pressure, temperature
Equipment Type Distribution	Visual breakdown by equipment type
History Management	Stores last 5 uploaded datasets per user
PDF Reports	Generate downloadable equipment analysis reports
JWT Authentication	Secure login with access/refresh token rotation
Rate Limiting	API protection against abuse (100/hr anonymous, 1000/hr authenticated)

---

CSV Format

The application expects CSV files with the following columns:

Column	Type	Description
Equipment Name	String	Unique equipment identifier
Type	String	Equipment category (Pump, Valve, Reactor, etc.)
Flowrate	Float	Flow rate measurement
Pressure	Float	Pressure measurement
Temperature	Float	Temperature measurement

Sample CSV:

Tip

You can use the following sample data in apps/api/samples.

Equipment Name,Type,Flowrate,Pressure,Temperature
Pump-1,Pump,120,5.2,110
Compressor-1,Compressor,95,8.4,95
Valve-1,Valve,60,4.1,105
HeatExchanger-1,HeatExchanger,150,6.2,130
Reactor-1,Reactor,140,7.5,140

---

Production Deployment

Docker Build

API:

cd apps/api
docker build -t fossee-api .
docker run -p 8001:8001 -v data:/app/data fossee-api

Web:

cd apps/web
docker build --build-arg VITE_API_URL=https://fwbasli-api.singularityworks.xyz/api -t fossee-web .
docker run -p 80:80 fossee-web