Skip to content

Mausam5055/ChemData-Visualizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

86 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ§ͺ ChemData Visualizer πŸ“Š

Professional Chemical Equipment Data Monitoring & Analysis Platform

Build Status Version License Docker Vercel Render UptimeRobot

Python Django React Vite PyQt5 TailwindCSS


πŸŽ₯ FOSSEE Internship Demo Video

Watch on YouTube Google Drive

🎬 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


πŸš€ Live Demo

Component URL Status
Frontend (Web App) https://chem-data-visualizer.vercel.app/ Vercel
Backend (API) https://chemdata-visualizer.onrender.com/ Render

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!


πŸ“‹ Overview

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.


πŸ“Έ Application Preview

πŸ–₯️ Desktop Application

1 2

🌐 Web Application Screenshots

1 2
3 4
5 6
7 8
9 10
11 12

πŸ“„ PDF Report Generation

1 2

πŸš€ Deployed Dashboard Previews

Vercel Deployment Render Deployment
Vercel Dashboard Render Dashboard

πŸ—οΈ System Architecture

🎯 High-Level Overview

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
Loading

πŸ”„ Data Processing Pipeline

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
Loading

🐳 Docker Deployment Architecture

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
Loading

✨ Key Features

πŸ” Authentication & Security

Feature Web App Desktop App
JWT Token Authentication βœ… βœ…
Google OAuth2 βœ… (Future) ❌
Session Management βœ… βœ…
Secure Password Hashing βœ… βœ…

πŸ“Š Data Visualization

Web Application Features

  • 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

Desktop Application Features

  • 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

πŸ“‚ Dataset Management

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

πŸ“‘ Professional Reporting

  • 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

🎨 User Experience

  • 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 Stack

Backend Technologies

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)

Frontend Technologies

Web Application

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)

Desktop Application

Technology Version Purpose
PyQt5 5.x Desktop GUI framework
Matplotlib 3.5+ Plotting library
Requests Latest HTTP client
Pandas Latest Data processing

DevOps & Tools

Tool Purpose
Docker Containerization
docker-compose Multi-container orchestration
Git Version control
ESLint JavaScript linting

πŸ“ Project Structure

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

πŸš€ Quick Start

Prerequisites

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

Option 1: 🐳 Quick Start with Docker (Recommended)

The fastest way to get the entire stack running.

  1. Clone the Repository

    git clone <repository-url>
    cd ChemData-Visualizer
  2. Start All Services

    docker-compose up --build
  3. Access the Applications

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


Option 2: πŸ”§ Manual Development Setup

For individual component development and debugging.

Terminal 1: Backend Server

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

Backend will run on: http://127.0.0.1:8000


Terminal 2: Web Frontend

# Navigate to web frontend
cd web-frontend

# Install dependencies
npm install

# Start development server
npm run dev

Web app will run on: http://localhost:5173


Terminal 3: Desktop Application

# Navigate to desktop frontend
cd desktop-frontend

# Install dependencies
pip install -r requirements.txt

# Run application
python main.py

βš™οΈ Configuration

Environment Variables

Backend (.env)

Create 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-secret

Caution

Never commit your .env file to version control. Always use .env.example as a template.

Desktop Application (config.py)

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/"

πŸ“‘ API Endpoints

Base URL

http://127.0.0.1:8000/api/

Authentication Endpoints

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"
}

Dataset Management Endpoints

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
}

Analytics & Statistics Endpoints

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
    }
  ]
}

πŸ—„οΈ Database Schema

Entity Relationship Diagram

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
    }
Loading

Model Descriptions

User Model

Extended Django authentication model.

Field Type Description
id Integer Primary key
username String(150) Unique username
email Email User email address
password String Hashed password
is_active Boolean Account status
date_joined DateTime Registration timestamp

Dataset Model

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

EquipmentRecord Model

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

🎨 UI/UX Design

Color Palette

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

Design System

  • 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

πŸ“Š Sample Data

The project includes sample CSV files for testing:

sample_equipment_data.csv

Small dataset with basic equipment records.

large_equipment_data.csv

Larger dataset (1000+ records) for performance testing.

CSV Format

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

πŸ”§ Development

Backend Development

cd 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 collectstatic

Frontend Development

cd 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 lint

Desktop Development

cd 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

🐳 Docker Deployment

Build and Run

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

Production Configuration

Update docker-compose.yml for production:

services:
  backend:
    environment:
      - DEBUG=False
      - SECRET_KEY=${SECRET_KEY}
      - ALLOWED_HOSTS=yourdomain.com

πŸ“ API Documentation

For detailed API documentation, see:


πŸ§ͺ Testing

Backend Tests

cd backend
python manage.py test api -v 2

Frontend Tests (if configured)

cd web-frontend
npm test

🚒 Deployment

See 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

πŸ› Troubleshooting

Common Issues

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

Debug Mode

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__ || {};

🀝 Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Code Style

  • Python: Follow PEP 8, use Black formatter
  • JavaScript: Follow Airbnb style guide, use ESLint
  • Commits: Use conventional commits format

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.


πŸ‘¨β€πŸ’» Author

Mausam Kar

Built with ❀️ using Django, React, and PyQt5


πŸ™ Acknowledgments

  • Django and DRF communities
  • React and Vite teams
  • PyQt5 and Riverbank Computing
  • Chart.js contributors
  • All open-source library maintainers

⬆ Back to Top

Made with passion for chemical engineering and data science

About

ChemVIZ is a hybrid data analysis and visualization platform that processes chemical equipment CSV data and provides automated statistical summaries, interactive charts, and downloadable reports through both a web application and a desktop application powered by a shared Django backend.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors