ChemLabWizard — Chemical Equipment Parameter Visualizer

FOSSEE Web-Hybrid Application | Internship Submission

A hybrid application featuring independent Web (React) and Desktop (PyQt5) frontends integrated with a Django REST API backend for visualization and analysis of chemical equipment operational data.

---

📋 Table of Contents

• Overview
• Screenshots
• Features
• Technology Stack
• Installation
• Project Structure
• API Endpoints
• Database Configuration
• Troubleshooting
• Author
• License

---

🎯 Overview

ChemLabWizard is a data analysis platform for chemical equipment parameter visualization and reporting. Users upload CSV files containing equipment operational data (flowrate, pressure, temperature) and receive:

• Real-time visualization via interactive charts (Bar & Pie)
• Statistical analysis with automated calculations
• Historical data management with per-user isolation (last 5 datasets)
• PDF reports with embedded visualizations
• Multi-platform access (Web and Desktop)
• Secure token-based authentication

---

📸 Screenshots

Platform	Screenshot
Web Application
Web Login
Desktop Application
Desktop Login

---

✨ Features

• ✅ CSV file upload with drag-and-drop (Web)
• ✅ Bar and Pie chart visualizations
• ✅ Statistical analysis (count, average flowrate, average pressure, type distribution)
• ✅ User registration and token-based authentication
• ✅ Per-user data isolation
• ✅ Upload history (last 5 datasets per user with auto-delete)
• ✅ PDF report generation with embedded charts
• ✅ Cross-platform (Web React + Desktop PyQt5)
• ✅ Sample data included (sample_equipment_data.csv)

---

🛠️ Technology Stack

🌐 Frontend Technologies

Technology	Version	Description	Official Link
	19.2.0	UI framework for web application	React Docs →
	7.2.4	Fast build tool and dev server	Vite Docs →
	4.5.1	Data visualization library	Chart.js Docs →
	4.1.18	Utility-first CSS framework	Tailwind Docs →
	1.13.2	Promise-based HTTP client	Axios Docs →
	5.15.11	Cross-platform GUI framework (Desktop)	PyQt5 Docs →

🔧 Backend Technologies

Technology	Version	Description	Official Link
	6.0.1	High-level Python web framework	Django Docs →
	3.16.1	Powerful REST API toolkit	DRF Docs →
	3.0.0	Data manipulation and analysis	Pandas Docs →
	2.4.1	Numerical computing library	NumPy Docs →
	3.10.8	Plotting and visualization	Matplotlib Docs →
	4.4.9	PDF generation toolkit	ReportLab Docs →
	4.9.0	Cross-Origin Resource Sharing	CORS Docs →

🗄️ Database & Tools

Technology	Version	Description	Official Link
	3.0+	Embedded SQL database (default)	SQLite Docs →
	12+	Advanced relational database (optional)	PostgreSQL Docs →
	3.10+	Core programming language	Python Docs →
	2.32.3	HTTP library for Python	Requests Docs →
	12.1.0	Python Imaging Library	Pillow Docs →

---

🚀 Installation

Prerequisites

• Python 3.10 or higher
• Node.js 18+ and npm/pnpm (for web frontend)
• Git (for cloning repository)

🪟 Windows Installation

Step 1: Install Prerequisites

# Install Python 3.10+ from https://www.python.org/downloads/
# Install Node.js 18+ from https://nodejs.org/

# Verify installations
python --version
node --version
npm --version

Step 2: Clone Repository

git clone https://github.com/smitpatil06/FOSSEE-Hybrid_Web_Application.git
cd FOSSEE-Hybrid_Web_Application

Step 3: Backend Setup

cd chemical_project

# Create and activate virtual environment
python -m venv venv
.\venv\Scripts\Activate.ps1

# Install dependencies
pip install django==6.0.1 djangorestframework==3.16.1 django-cors-headers==4.9.0 pandas==3.0.0 matplotlib==3.10.8 reportlab==4.4.9 pillow==12.1.0 requests==2.32.3

# Setup database (SQLite by default)
$env:USE_SQLITE = 'True'

# Run migrations
python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser

# Start backend server
python manage.py runserver

Backend runs at: http://localhost:8000

Step 4: Web Frontend Setup

Open a new PowerShell terminal

cd frontend-web

# Install dependencies (using npm or pnpm)
npm install
# OR
pnpm install

# Start development server
npm run dev
# OR
pnpm run dev

Web app runs at: http://localhost:5173

Step 5: Desktop Frontend Setup

Open a new PowerShell terminal

cd frontend-desktop

# Activate backend virtual environment
..\chemical_project\venv\Scripts\Activate.ps1

# Install dependencies
pip install PyQt5==5.15.11 matplotlib==3.10.8 requests==2.32.3

# Run desktop application
python desktop_app.py

---

🐧 Ubuntu/Linux Installation

Step 1: Install Prerequisites

# Update package list
sudo apt update

# Install Python 3.10+
sudo apt install python3 python3-pip python3-venv

# Install Node.js 18+ (via NodeSource)
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

# Install Git
sudo apt install git

# Verify installations
python3 --version
node --version
npm --version

Step 2: Clone Repository

git clone https://github.com/smitpatil06/FOSSEE-Hybrid_Web_Application.git
cd FOSSEE-Hybrid_Web_Application

Step 3: Backend Setup

cd chemical_project

# Create and activate virtual environment
python3 -m venv venv
source venv/bin/activate

# Install dependencies
pip install django==6.0.1 djangorestframework==3.16.1 django-cors-headers==4.9.0 pandas==3.0.0 matplotlib==3.10.8 reportlab==4.4.9 pillow==12.1.0 requests==2.32.3

# Setup database (SQLite by default)
export USE_SQLITE=True

# Run migrations
python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser

# Start backend server
python manage.py runserver

Backend runs at: http://localhost:8000

Step 4: Web Frontend Setup

Open a new terminal

cd frontend-web

# Install dependencies (using npm or pnpm)
npm install
# OR
pnpm install

# Start development server
npm run dev
# OR
pnpm run dev

Web app runs at: http://localhost:5173

Step 5: Desktop Frontend Setup

Open a new terminal

cd frontend-desktop

# Activate backend virtual environment
source ../chemical_project/venv/bin/activate

# Install dependencies
pip install PyQt5==5.15.11 matplotlib==3.10.8 requests==2.32.3

# Run desktop application
python desktop_app.py

---

Optional: PostgreSQL Setup

If you prefer PostgreSQL over SQLite:

Ubuntu/Linux:

# Install PostgreSQL
sudo apt-get install postgresql postgresql-contrib

# Install Python adapter
pip install psycopg2-binary

# Run setup script
cd chemical_project
chmod +x setup_postgres.sh
./setup_postgres.sh

# Configure and migrate
export USE_POSTGRESQL=True
python manage.py migrate

Windows:

# Download and install PostgreSQL from https://www.postgresql.org/download/windows/

# Install Python adapter
pip install psycopg2-binary

# Configure and migrate
$env:USE_POSTGRESQL = 'True'
python manage.py migrate

---

📁 Project Structure

ChemLabWizard/
├── chemical_project/          # Django REST Backend
│   ├── api/
│   │   ├── models.py         # Database models (UploadBatch, EquipmentData)
│   │   ├── serializers.py    # DRF serializers
│   │   ├── views.py          # REST API views (upload, stats, PDF)
│   │   ├── auth_views.py     # Authentication endpoints
│   │   └── urls.py           # API routing
│   ├── chemical_project/
│   │   ├── settings.py       # Django configuration
│   │   └── urls.py           # Main URL routing
│   ├── manage.py
│   └── db.sqlite3            # SQLite database
│
├── frontend-web/             # React Web Client
│   ├── src/
│   │   ├── pages/
│   │   │   ├── Login.jsx     # Authentication page
│   │   │   └── Upload.jsx    # Data upload & visualization
│   │   ├── components/
│   │   │   ├── Charts.jsx    # Bar & Pie charts
│   │   │   └── History.jsx   # Upload history
│   │   ├── api.js            # Axios HTTP client
│   │   └── App.jsx           # Main component
│   ├── package.json
│   └── vite.config.js
│
├── frontend-desktop/         # PyQt5 Desktop Client
│   ├── desktop_app.py        # Entry point
│   ├── core/
│   │   └── api_client.py     # HTTP client
│   └── ui/
│       ├── views/
│       │   ├── login_window.py
│       │   └── upload_window.py
│       └── components/
│           └── history_widget.py
│
└── sample_equipment_data.csv # Test dataset

---

🔗 API Endpoints

Authentication

• POST /api/auth/register/ - Register new user
• POST /api/auth/login/ - Login and receive token
• POST /api/auth/logout/ - Logout
• GET /api/auth/profile/ - Get user profile

Data Operations

• POST /api/upload/ - Upload CSV file
• GET /api/history/ - Get user's upload history
• GET /api/summary/<batch_id>/ - Get statistics for a dataset
• GET /api/report/<batch_id>/ - Download PDF report

---

💾 Database Configuration

SQLite (Default)

Zero configuration required. Database file created at chemical_project/db.sqlite3.

export USE_SQLITE=True
python manage.py migrate

PostgreSQL (Optional)

For production or multi-user scenarios:

# Install PostgreSQL
sudo apt-get install postgresql postgresql-contrib  # Linux

# Install Python adapter
pip install psycopg2-binary

# Run setup script
cd chemical_project
chmod +x setup_postgres.sh
./setup_postgres.sh

# Configure and migrate
export USE_POSTGRESQL=True
python manage.py migrate

---

🔧 Troubleshooting

Module not found errors:

pip install django djangorestframework django-cors-headers pandas matplotlib reportlab pillow

Database errors:

export USE_SQLITE=True
python manage.py migrate

CORS errors:

• Ensure backend runs at http://localhost:8000
• Verify CORS settings in chemical_project/chemical_project/settings.py

Desktop app not starting:

pip install PyQt5 matplotlib requests

Port already in use:

# Backend (port 8000)
python manage.py runserver 8001

# Web frontend (port 5173)
npm run dev -- --port 5174

---

👨‍💻 Author

Smit Patil

• 🐙 GitHub: @smitpatil06
• 💼 LinkedIn: 04-smit-patil
• 🐦 Twitter/X: @smit_patil06

---

📄 License

Submitted as part of FOSSEE internship application.

---

🙏 Acknowledgments

Built for FOSSEE (Free/Libre and Open Source Software for Education)