Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/parazeeknova/fossee-wast

Web Application Screening Task - Chemical Equipment Parameter Visualizer (Hybrid Web + Desktop App)
https://github.com/parazeeknova/fossee-wast

Last synced: 5 months ago
JSON representation

Web Application Screening Task - Chemical Equipment Parameter Visualizer (Hybrid Web + Desktop App)

Awesome Lists containing this project

README 

          
### 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](https://docs.google.com/document/d/1atHkNtWJd-T4Hg7WFsOFPEikQ7QM_rX4/edit) 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.



```mermaid

flowchart TB

    subgraph Clients["Client Applications"]

        WEB["Web Frontend
(React + Vite)
localhost:5173"]

        DESKTOP["Desktop App
(PyQt5 + Matplotlib)"]

    end



    subgraph Backend["Backend Services"]

        API["Django REST API
localhost:8001"]

        DB[(SQLite Database)]

        LOCAL["Local File Storage
(media_local/)"]

    end



    WEB -->|HTTP/REST
JWT Auth| API

    DESKTOP -->|HTTP/REST
JWT Auth| API

    API --> DB

    API --> LOCAL

```



#### 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.



```mermaid

flowchart TB

    subgraph Internet["Internet"]

        USER["Users"]

    end



    subgraph CloudInfra["Cloud Infrastructure"]

        subgraph WebTier["Web Tier"]

            NGINX["Nginx
(Static Files + SPA)"]

            WEBURL["fossee-wast.singularityworks.xyz"]

        end



        subgraph APITier["API Tier"]

            GUNICORN["Gunicorn
(2 Workers)"]

            DJANGO["Django REST API"]

            APIURL["fwbasli-api.singularityworks.xyz"]

        end



        subgraph Storage["Storage Layer"]

            DB[(SQLite Database
/app/data/)]

            S3["AWS S3 Bucket
(Media Files)"]

        end

    end



    USER --> WEBURL

    WEBURL --> NGINX

    NGINX -->|Static Assets| USER

    USER --> APIURL

    APIURL --> GUNICORN

    GUNICORN --> DJANGO

    DJANGO --> DB

    DJANGO -->|File Storage| S3

```



---



### Prerequisites



> [!WARNING]

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



| Tool | Version | Installation |

|------|---------|--------------|

| Node.js | >= 24 | [node](https://nodejs.org/) |

| Bun | >= 1.3.5 | [bun](https://bun.sh/)|

| Python | >= 3.14 | [python](https://www.python.org/) |

| UV | Latest | [uv](https://astral.sh/uv/) |



---



### Setup Instructions



```bash

# 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)



```bash

bun run web

```



This starts:

- API server at `http://localhost:8001`

- Web frontend at `http://localhost:5173`



#### Option B: Run Desktop App (Native + API)



```bash

bun run native

```



This starts:

- API server at `http://localhost:8001`

- PyQt5 desktop application



#### Option C: Run Components Separately



```bash

# 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 Web](assets/upload-web.png) | ![Upload History](assets/upload-history.png) | ![Data Table](assets/data-table.png) |

| Upload Interface | Upload History | Data Table View |

| ![Sample Data](assets/sample-data.png) | ![Data Large](assets/data-large.png) | ![Reports](assets/reports.png) |

| 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`.



```csv

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:**

```bash

cd apps/api

docker build -t fossee-api .

docker run -p 8001:8001 -v data:/app/data fossee-api

```



**Web:**

```bash

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

```