Chemical-Equipment-Parameter-Visualizer

Deployed Link: https://chemical-equipment-parameter-visualizer-1-lmh9.onrender.com/

Project Overview

The Chemical Equipment Parameter Visualizer is a hybrid application that provides both web and desktop interfaces for analyzing and visualizing chemical equipment data. Users can upload CSV files and view summary statistics, charts, historical datasets, and optionally generate PDF reports.

The system includes:

• Django REST API backend
• React.js web frontend
• PyQt5 desktop application

The dekstop and web application use the same backend server.

📁File Structure

Backend Directory

backend/
├── api/                           # Django app for API endpoints
│   ├── admin.py                  
│   ├── models.py                
│   ├── serializers.py           
│   ├── views.py                  
│   └── migrations/              
├── backend/                      
│   ├── settings.py               
│   ├── deployment_settings.py    # For deployment               
│   ├── urls.py                   
│   └── wsgi.py                   # WSGI configuration for production
├── csv_files/                    # Directory for uploaded CSV files
├── db.sqlite3                    # SQLite database file
├── Dockerfile                    # Container configuration for backend
├── manage.py                     
└── requirements.txt              # Python dependencies list

Frontend Directory

frontend/
├── src/                          # Source code directory
│   ├── api.tsx                   # API service functions
│   ├── App.tsx                   # Main React application component
│   ├── components/               # Reusable React components
│   │   ├── Charts.tsx            
│   │   ├── ExportPdf.tsx         
│   │   ├── navbar.tsx           
│   │   └── ProtectedRoute.tsx    # Route protection for authentication
│   ├── pages/                    # Page components
│   │   ├── dashboard.tsx         
│   │   ├── home.tsx             
│   │   ├── login.tsx             
│   │   └── register.tsx          
│   ├── store/                    # State management
│   │   ├── authSlice.ts          # Authentication state slice
│   │   └── store.ts              
│   └── types/                    
│       └── index.ts              # Main type definitions
├── package.json                  
├── Dockerfile                    
└── nginx.config                  # Nginx web server configuration

Desktop Directory

desktop/
├── main.py                       # Main PyQt5 application entry point
└── requirements.txt              # Python dependencies for desktop app

Running application

This section describes how to run the complete application stack using Docker Compose on your local device.

Web frontend

1. Prerequisites

• Docker
• Docker Compose
• Git

---

2. Clone the Repository

git clone https://github.com/HarK-github/Chemical-Equipment-Parameter-Visualizer.git
cd Chemical-Equipment-Parameter-Visualizer

---

3. Start the Application

From the project root:

docker compose up --build

Once all containers are running:

• Backend API (direct): http://127.0.0.1:8000/

• Frontend: http://localhost:5173/

---

Note : It might take time for containers to spin up.

4. Development Mode

Access the dev server at:

http://localhost:5173/

---

Desktop application

To run the dekstop application simply type in the root directory:

bash dekstop_script.sh

This will create a virtual environment,spin up the docker ocntainer, run the dekstop app.

---

🛠 Manual Setup

This section explains how to run the backend, web frontend, and desktop application directly on your local machine without using docker container

---

Backend: Django

1. Navigate to the backend directory

cd backend

2. Create a virtual environment

python -m venv venv
source venv/bin/activate       # macOS/Linux
venv\Scripts\activate          # Windows

3. Install dependencies

pip install -r requirements.txt

4. Apply migrations

python manage.py migrate

5. Start the backend server

python manage.py runserver

The backend will be available at:

http://127.0.0.1:8000/

---

Web Frontend: React.js

1. Navigate to the frontend directory

cd ./frontend

2. Install dependencies

npm install

3. Set API endpoint in .env

VITE_API_URL=http://127.0.0.1:8000/

4. Start the development server

npm run dev

Frontend available at:

http://localhost:5731/

---

Desktop Application: PyQt5

Ensure that the backend is runnign

1. Navigate to the desktop folder

cd ./desktop

2. Create and activate a virtual environment

python -m venv venv
source venv/bin/activate

3. Install dependencies

pip install -r requirements.txt

4. Run the desktop application

python main.py

Alternative:

Go to root directory of the project,create and activate a virtual environment

python -m venv venv
source venv/bin/activate

---

Features

• CSV upload
• Summary statistics generation
• Visualization (Chart.js for web, Matplotlib for desktop)
• Storage of last five uploaded datasets
• PDF report generation
• Basic user authentication

---

Project Structure

chemical-equipment-visualizer/
│
├─ backend/                    # Django backend
├─ frontend/                   # React.js frontend
├─ desktop/                    # PyQt5 desktop app
├─ nginx/                      # Nginx config
└─ docker-compose.yml

---

Screenshots

    

License

This project is licensed under the MIT License. Developed by Harshit Kandpal