π¬ Demo video created for FOSSEE Internship Screening Task
Real-time monitoring and analysis of chemical equipment data across web and desktop platforms
Features β’ Architecture β’ Quick Start β’ Documentation β’ API Reference
| Component | URL | Status |
|---|---|---|
| Frontend (Web App) | https://chem-data-visualizer.vercel.app/ | |
| Backend (API) | https://chemdata-visualizer.onrender.com/ |
Note: The backend is hosted on Render's free tier and may take ~50 seconds to spin up if it has been inactive. Please be patient on the first request!
ChemData Visualizer is a comprehensive, enterprise-grade full-stack application designed for real-time monitoring, analysis, and visualization of chemical equipment data. The platform provides:
- π Modern Web Dashboard - React-based responsive web application with real-time analytics
- π₯οΈ Native Desktop Application - PyQt5-powered desktop app for local analysis and monitoring
- π RESTful API Backend - Django REST Framework with robust data processing
- π Advanced Analytics - Statistical analysis, trend visualization, and correlation studies
- π Professional Reporting - Automated PDF report generation with charts and branding
- π Secure Authentication - JWT tokens and Google OAuth2 integration (Future Feature)
- π³ Docker Support - Containerized deployment for production environments
The platform enables chemical engineers and operators to monitor equipment performance, analyze trends, detect anomalies, and generate comprehensive reports with just a few clicks.
graph TB
subgraph "Client Layer"
WEB[π Web Application<br/>React + Vite + TailwindCSS]
DESKTOP[π₯οΈ Desktop Application<br/>PyQt5 + Matplotlib]
end
subgraph "API Gateway"
NGINX[β‘ Nginx / Load Balancer]
end
subgraph "Application Layer"
DJANGO[π§ Django 5.0<br/>REST Framework]
AUTH[π Authentication Service<br/>JWT + OAuth2]
ANALYTICS[π Analytics Engine<br/>Pandas + NumPy]
PDF[π PDF Generator<br/>ReportLab]
end
subgraph "Data Layer"
DB[(πΎ Database<br/>SQLite/PostgreSQL)]
MEDIA[π Media Storage<br/>CSV Files + PDFs]
CACHE[β‘ Cache Layer<br/>Optional Redis]
end
WEB -->|HTTPS/JSON| NGINX
DESKTOP -->|HTTPS/JSON| NGINX
NGINX -->|Proxy| DJANGO
DJANGO --> AUTH
DJANGO --> ANALYTICS
DJANGO --> PDF
DJANGO -->|ORM Queries| DB
DJANGO -->|File I/O| MEDIA
ANALYTICS -->|Read/Write| DB
PDF -->|Generate| MEDIA
style WEB fill:#2196F3,stroke:#1565C0,stroke-width:3px,color:#fff
style DESKTOP fill:#4CAF50,stroke:#2E7D32,stroke-width:3px,color:#fff
style DJANGO fill:#FF9800,stroke:#E65100,stroke-width:3px,color:#fff
style AUTH fill:#9C27B0,stroke:#6A1B9A,stroke-width:3px,color:#fff
style DB fill:#607D8B,stroke:#37474F,stroke-width:3px,color:#fff
style ANALYTICS fill:#F44336,stroke:#C62828,stroke-width:3px,color:#fff
sequenceDiagram
participant User
participant Client as Web/Desktop Client
participant API as Django REST API
participant Parser as Pandas Parser
participant DB as Database
participant PDF as ReportLab Engine
User->>Client: Upload CSV File
Client->>API: POST /api/upload/
API->>MEDIA: Save CSV to Media Storage
API->>Parser: Parse CSV with Pandas
Parser->>Parser: Validate & Transform Data
Parser->>DB: Bulk Create EquipmentRecords
DB-->>API: Insert Success
API-->>Client: 201 Created (Dataset ID)
Client-->>User: Upload Confirmation
User->>Client: Request Analytics
Client->>API: GET /api/datasets/{id}/stats/
API->>DB: Aggregate Queries<br/>(AVG, COUNT, GROUP BY)
DB-->>API: Statistical Results
API-->>Client: JSON Response
Client->>Client: Render Charts & KPIs
Client-->>User: Display Dashboard
User->>Client: Request PDF Report
Client->>API: GET /api/datasets/{id}/pdf/
API->>DB: Fetch Dataset Records
DB-->>API: Raw Data
API->>PDF: Generate Report<br/>(Charts, Tables, Branding)
PDF->>MEDIA: Save PDF File
PDF-->>API: File Path
API-->>Client: Download PDF
Client-->>User: Save Report
graph TB
subgraph "Docker Network: chemdata-network"
subgraph "Frontend Container"
REACT[React App<br/>Port 5173]
end
subgraph "Backend Container"
GUNICORN[Gunicorn WSGI<br/>Port 8000]
DJANGO_APP[Django Application]
end
subgraph "Data Volumes"
DB_VOL[Database Volume<br/>db.sqlite3]
MEDIA_VOL[Media Volume<br/>uploads/]
end
end
EXTERNAL[External Access] -->|Port 5173| REACT
EXTERNAL -->|Port 8000| GUNICORN
REACT -->|API Calls| GUNICORN
GUNICORN --> DJANGO_APP
DJANGO_APP --> DB_VOL
DJANGO_APP --> MEDIA_VOL
style REACT fill:#61DAFB,stroke:#1565C0,stroke-width:2px,color:#000
style GUNICORN fill:#FF9800,stroke:#E65100,stroke-width:2px,color:#fff
style DB_VOL fill:#607D8B,stroke:#37474F,stroke-width:2px,color:#fff
| Feature | Web App | Desktop App |
|---|---|---|
| JWT Token Authentication | β | β |
| Google OAuth2 | β (Future) | β |
| Session Management | β | β |
| Secure Password Hashing | β | β |
- Interactive Charts - Chart.js powered visualizations
- π Bar Charts - Average metrics by equipment type
- π Line Charts - Trend analysis over time
- π© Donut Charts - Equipment distribution
- π Scatter Plots - Correlation analysis
- Real-time KPI Cards - Total records, averages, equipment counts
- Responsive Grid Layout - Mobile-friendly design
- Skeleton Loading States - Smooth UX during data fetch
- Dark/Light Theme - User preference support
- Native Matplotlib Charts - High-quality static and interactive plots
- Metric Switchers - Dynamic dropdown selectors for different parameters
- Correlation Explorer - Customizable X/Y axis scatter plots
- Export Capabilities - Save charts as PNG/SVG
- Tabbed Interface - Analytics Dashboard + Data Logs
- Branded Theme - Consistent teal (#0d9488) and slate colors
| Feature | Description |
|---|---|
| CSV Upload | Drag-and-drop file upload with validation |
| Auto-Parsing | Pandas-powered CSV parsing and validation |
| User Isolation | Personal vs. Global dataset history |
| Bulk Operations | Efficient batch data insertion |
| File Storage | Secure media file management |
| History Tracking | Upload timestamps and metadata |
- PDF Generation - Professional reports with ReportLab
- Custom Branding - Company logo and styling
- Data Tables - Formatted equipment records
- Statistical Charts - Embedded visualizations
- Header Analysis - CSV structure documentation
- One-Click Export - Instant report download
- Unified Design System - Consistent teal and slate theme across platforms
- Responsive Layouts - Works on desktop, tablet, and mobile
- Loading Indicators - Smooth transitions and feedback
- Error Handling - User-friendly error messages
- Empty States - Helpful guidance when no data present
- Interactive Filters - Dynamic data exploration
| Technology | Version | Purpose |
|---|---|---|
| Python | 3.10+ | Programming language |
| Django | 5.0 | Web framework |
| Django REST Framework | 3.14+ | RESTful API toolkit |
| Pandas | Latest | Data manipulation and analysis |
| ReportLab | Latest | PDF generation |
| Matplotlib | 3.5+ | Chart generation (backend) |
| django-cors-headers | Latest | CORS support |
| django-allauth | Latest | Social authentication (Future) |
| dj-rest-auth | Latest | REST authentication |
| PyJWT | Latest | JSON Web Tokens |
| python-dotenv | Latest | Environment variable management |
| Gunicorn | Latest | WSGI HTTP Server (production) |
| Technology | Version | Purpose |
|---|---|---|
| React | 19.2.0 | UI library |
| Vite | 7.2.4 | Build tool and dev server |
| TailwindCSS | 3.4.17 | Utility-first CSS framework |
| Chart.js | 4.5.1 | Data visualization |
| react-chartjs-2 | 5.3.1 | React wrapper for Chart.js |
| Axios | 1.13.3 | HTTP client |
| @react-oauth/google | 0.13.4 | Google OAuth integration (Future) |
| Technology | Version | Purpose |
|---|---|---|
| PyQt5 | 5.x | Desktop GUI framework |
| Matplotlib | 3.5+ | Plotting library |
| Requests | Latest | HTTP client |
| Pandas | Latest | Data processing |
| Tool | Purpose |
|---|---|
| Docker | Containerization |
| docker-compose | Multi-container orchestration |
| Git | Version control |
| ESLint | JavaScript linting |
ChemData-Visualizer/
βββ π backend/ # Django REST API Server
β βββ π api/ # API Application
β β βββ π migrations/ # Database migrations
β β βββ π __init__.py
β β βββ π admin.py # Django admin config
β β βββ π models.py # Data models (Dataset, EquipmentRecord)
β β βββ π serializers.py # DRF serializers
β β βββ π urls.py # API URL routing
β β βββ π views.py # API views and business logic
β βββ π core/ # Project Settings
β β βββ π __init__.py
β β βββ π asgi.py # ASGI config
β β βββ π settings.py # Django settings
β β βββ π urls.py # Root URL config
β β βββ π wsgi.py # WSGI config
β βββ π media/ # User uploads (CSV, PDF)
β βββ π venv/ # Virtual environment
β βββ π .env # Environment variables
β βββ π .env.example # Environment template
β βββ π db.sqlite3 # SQLite database
β βββ π Dockerfile # Docker image definition
β βββ π manage.py # Django CLI
β βββ π requirements.txt # Python dependencies
β βββ π create_user.py # Admin user creation script
β βββ π reset_pass.py # Password reset utility
β βββ π README.md # Backend documentation
β
βββ π web-frontend/ # React Web Application
β βββ π src/ # Source code
β β βββ π assets/ # Images, icons
β β βββ π components/ # React components
β β βββ π pages/ # Page components
β β βββ π services/ # API service layer
β β βββ π utils/ # Utility functions
β β βββ π App.jsx # Root component
β β βββ π main.jsx # Entry point
β β βββ π index.css # Global styles
β βββ π public/ # Static assets
β βββ π .dockerignore # Docker ignore rules
β βββ π Dockerfile # Docker image definition
β βββ π package.json # npm dependencies
β βββ π vite.config.js # Vite configuration
β βββ π tailwind.config.js # Tailwind configuration
β βββ π postcss.config.js # PostCSS configuration
β βββ π eslint.config.mjs # ESLint rules
β
βββ π desktop-frontend/ # PyQt5 Desktop Application
β βββ π ui/ # UI modules
β β βββ π __init__.py
β β βββ π auth.py # Login/Signup windows
β β βββ π dashboard.py # Main dashboard UI
β β βββ π styles.py # QSS stylesheets
β βββ π assets/ # Desktop assets
β βββ π config.py # Configuration
β βββ π main.py # Application entry point
β βββ π requirements.txt # Python dependencies
β βββ π README.md # Desktop app documentation
β
βββ π docs/ # Additional documentation
βββ π docker-compose.yml # Docker Compose config
βββ π .gitignore # Git ignore rules
βββ π .env # Root environment variables
βββ π .env.example # Environment template
βββ π sample_equipment_data.csv # Sample dataset
βββ π large_equipment_data.csv # Large test dataset
βββ π DEPLOYMENT_GUIDE.md # Deployment instructions
βββ π README.md # This file
Ensure you have the following installed:
| Tool | Version | Download |
|---|---|---|
| Python | 3.10 or higher | python.org |
| Node.js | 18.x or higher | nodejs.org |
| npm | 9.x or higher | Included with Node.js |
| Git | Latest | git-scm.com |
| Docker Desktop | Latest (Optional) | docker.com |
The fastest way to get the entire stack running.
-
Clone the Repository
git clone <repository-url> cd ChemData-Visualizer
-
Start All Services
docker-compose up --build
-
Access the Applications
- Web App: http://localhost:5173
- API: http://localhost:8000
- API Admin: http://localhost:8000/admin
-
Create Superuser (Optional - for Django Admin)
docker-compose exec backend python manage.py createsuperuser
Tip
To stop all services: docker-compose down
To rebuild after changes: docker-compose up --build
For individual component development and debugging.
# Navigate to backend
cd backend
# Create virtual environment
python -m venv venv
# Activate environment
# Windows:
venv\Scripts\activate
# Mac/Linux:
source venv/bin/activate
# Install dependencies
pip install -r requirements.txt
# Setup environment variables
cp .env.example .env
# Edit .env with your settings
# Run migrations
python manage.py migrate
# Create superuser (optional)
python manage.py createsuperuser
# Start development server
python manage.py runserverBackend will run on: http://127.0.0.1:8000
# Navigate to web frontend
cd web-frontend
# Install dependencies
npm install
# Start development server
npm run devWeb app will run on: http://localhost:5173
# Navigate to desktop frontend
cd desktop-frontend
# Install dependencies
pip install -r requirements.txt
# Run application
python main.pyCreate a .env file in the backend/ directory:
| Variable | Description | Example | Required |
|---|---|---|---|
SECRET_KEY |
Django secret key | your-secret-key-here |
β |
DEBUG |
Debug mode | True (dev), False (prod) |
β |
ALLOWED_HOSTS |
Allowed host domains | localhost,127.0.0.1 |
β |
GOOGLE_CLIENT_ID |
Google OAuth client ID | your-client-id (Optional - Commented out) |
β |
GOOGLE_CLIENT_SECRET |
Google OAuth secret | your-client-secret (Optional - Commented out) |
β |
DATABASE_URL |
PostgreSQL connection (optional) | postgresql://user:pass@localhost/dbname |
β |
Example .env file:
SECRET_KEY=django-insecure-your-secret-key-here-change-in-production
DEBUG=True
ALLOWED_HOSTS=localhost,127.0.0.1
# GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
# GOOGLE_CLIENT_SECRET=your-google-client-secretCaution
Never commit your .env file to version control. Always use .env.example as a template.
Modify desktop-frontend/config.py to point to your API:
API_URL = "http://127.0.0.1:8000/api/"For production, update to your deployed API URL:
API_URL = "https://api.yourcompany.com/api/"http://127.0.0.1:8000/api/
| Method | Endpoint | Description | Authentication |
|---|---|---|---|
POST |
/api/auth/registration/ |
Register new user account | Public |
POST |
/api/api-token-auth/ |
Login and get JWT token | Public |
POST |
/accounts/google/login/ |
Google OAuth2 authentication (Future) | Public |
POST |
/api/auth/logout/ |
Logout and invalidate token | Required |
Registration Example:
POST /api/auth/registration/
{
"username": "john_doe",
"email": "john@example.com",
"password": "securepassword123"
}Login Example:
POST /api/api-token-auth/
{
"username": "john_doe",
"password": "securepassword123"
}
Response:
{
"token": "9944b09199c62bcf9418ad846dd0e4bbdfc6ee4b"
}| Method | Endpoint | Description | Authentication |
|---|---|---|---|
GET |
/api/datasets/ |
List user's datasets | Required |
POST |
/api/upload/ |
Upload new CSV dataset | Required |
GET |
/api/datasets/{id}/ |
Get dataset details | Required |
DELETE |
/api/datasets/{id}/ |
Delete dataset | Required |
GET |
/api/datasets/global/ |
List all datasets (admin) | Required |
Upload Dataset Example:
curl -X POST http://127.0.0.1:8000/api/upload/ \
-H "Authorization: Token your-auth-token" \
-F "file=@sample_equipment_data.csv" \
-F "name=Equipment_Test_Jan2024"Response:
{
"id": 1,
"name": "Equipment_Test_Jan2024",
"file": "/media/uploads/Equipment_Test_Jan2024.csv",
"uploaded_at": "2024-01-20T10:30:00Z",
"record_count": 150
}| Method | Endpoint | Description | Authentication |
|---|---|---|---|
GET |
/api/datasets/{id}/stats/ |
Get statistical analysis | Required |
GET |
/api/datasets/{id}/data/ |
Get raw equipment records | Required |
GET |
/api/datasets/{id}/pdf/ |
Download PDF report | Required |
Statistics Example:
GET /api/datasets/1/stats/
Response:
{
"total_records": 150,
"average_flowrate": 45.6,
"average_pressure": 120.4,
"average_temperature": 75.2,
"equipment_distribution": {
"Pump": 50,
"Valve": 30,
"Tank": 40,
"Reactor": 30
},
"equipment_stats": [
{
"equipment_type": "Pump",
"avg_flowrate": 52.3,
"avg_pressure": 135.7,
"avg_temperature": 72.1
}
]
}erDiagram
User ||--o{ Dataset : owns
Dataset ||--o{ EquipmentRecord : contains
User {
int id PK
string username UK
string email UK
string password_hash
datetime date_joined
boolean is_active
boolean is_staff
}
Dataset {
int id PK
int user_id FK
string name
string file_path
datetime uploaded_at
int record_count
}
EquipmentRecord {
int id PK
int dataset_id FK
string equipment_name
string equipment_type
float flowrate
float pressure
float temperature
datetime timestamp
}
Extended Django authentication model.
| Field | Type | Description |
|---|---|---|
id |
Integer | Primary key |
username |
String(150) | Unique username |
email |
User email address | |
password |
String | Hashed password |
is_active |
Boolean | Account status |
date_joined |
DateTime | Registration timestamp |
Represents uploaded CSV files.
| Field | Type | Description |
|---|---|---|
id |
Integer | Primary key |
user |
ForeignKey | Owner (User model) |
name |
String(255) | Dataset name |
file |
FileField | Path to CSV file |
uploaded_at |
DateTime | Upload timestamp |
Individual equipment measurements.
| Field | Type | Description |
|---|---|---|
id |
Integer | Primary key |
dataset |
ForeignKey | Parent dataset |
equipment_name |
String(100) | Equipment identifier |
equipment_type |
String(50) | Type (Pump/Valve/Tank/Reactor) |
flowrate |
Float | Flow rate measurement |
pressure |
Float | Pressure measurement |
temperature |
Float | Temperature measurement |
timestamp |
DateTime | Measurement time |
| Color | Hex | Usage |
|---|---|---|
| Primary Teal | #0d9488 |
Buttons, accents, highlights |
| Slate 900 | #0f172a |
Headers, dark backgrounds |
| Slate 800 | #1e293b |
Secondary backgrounds |
| Slate 700 | #334155 |
Borders, dividers |
| White | #ffffff |
Text on dark, card backgrounds |
| Success Green | #10b981 |
Success messages, positive metrics |
| Warning Amber | #f59e0b |
Warnings, alerts |
| Error Red | #ef4444 |
Errors, critical alerts |
- Typography: System fonts (San Francisco, Segoe UI, Roboto)
- Spacing: 4px grid system (4, 8, 12, 16, 24, 32, 48, 64px)
- Border Radius: Consistent 8px for cards, 4px for buttons
- Shadows: Subtle elevation for depth (box-shadow)
- Transitions: 150-300ms ease-in-out for smooth interactions
The project includes sample CSV files for testing:
Small dataset with basic equipment records.
Larger dataset (1000+ records) for performance testing.
Equipment Name,Equipment Type,Flowrate (mΒ³/h),Pressure (bar),Temperature (Β°C)
Pump_001,Pump,45.6,120.4,75.2
Valve_002,Valve,0.0,85.3,68.9
Tank_003,Tank,0.0,10.2,25.4cd backend
# Run tests
python manage.py test api
# Create migrations
python manage.py makemigrations
# Apply migrations
python manage.py migrate
# Create superuser
python manage.py createsuperuser
# Open Django shell
python manage.py shell
# Collect static files (production)
python manage.py collectstaticcd web-frontend
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Run linter
npm run lintcd desktop-frontend
# Install dependencies
pip install -r requirements.txt
# Run application
python main.py
# Build executable (PyInstaller)
pip install pyinstaller
pyinstaller --noconsole --onefile main.py# Build and start all services
docker-compose up --build
# Run in detached mode
docker-compose up -d
# View logs
docker-compose logs -f
# Stop services
docker-compose down
# Remove volumes (caution: deletes data)
docker-compose down -vUpdate docker-compose.yml for production:
services:
backend:
environment:
- DEBUG=False
- SECRET_KEY=${SECRET_KEY}
- ALLOWED_HOSTS=yourdomain.comFor detailed API documentation, see:
- Backend README - Complete API reference
- Postman Collection - Import into Postman
cd backend
python manage.py test api -v 2cd web-frontend
npm testSee DEPLOYMENT_GUIDE.md for detailed deployment instructions including:
- Production server setup
- PostgreSQL database configuration
- Nginx reverse proxy
- SSL/TLS certificates
- Environment variable management
- Continuous deployment
| Issue | Solution |
|---|---|
| Port 8000 already in use | Change backend port or kill existing process |
| CORS errors | Verify CORS_ALLOWED_ORIGINS in backend settings |
| Docker build fails | Clear Docker cache: docker system prune |
| Upload fails | Check MEDIA_ROOT permissions in backend |
| Desktop app won't connect | Verify API_URL in config.py points to running backend |
| Database locked | Close other connections to SQLite |
Enable verbose logging:
Backend:
# settings.py
LOGGING = {
'version': 1,
'disable_existing_loggers': False,
'handlers': {
'console': {'class': 'logging.StreamHandler'},
},
'root': {'handlers': ['console'], 'level': 'DEBUG'},
}Frontend:
// Enable React DevTools
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ =
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ || {};Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Python: Follow PEP 8, use Black formatter
- JavaScript: Follow Airbnb style guide, use ESLint
- Commits: Use conventional commits format
This project is licensed under the MIT License - see the LICENSE file for details.
Mausam Kar
- Portfolio: mausam04.vercel.app
- GitHub: @Mausam5055
Built with β€οΈ using Django, React, and PyQt5
- Django and DRF communities
- React and Vite teams
- PyQt5 and Riverbank Computing
- Chart.js contributors
- All open-source library maintainers
Made with passion for chemical engineering and data science

















