System Architecture

Complete technical architecture of the DataXpert platform

Architecture Overview

DataXpert follows a modern three-tier architecture with a clear separation of concerns:

Frontend Layer

Vanilla JavaScript with HTML5/CSS3 for responsive user interface

Backend Layer

Flask REST API with JWT authentication and CORS support

Data Layer

Supabase (PostgreSQL) for scalable data storage

Data Flow Architecture

┌─────────────┐
│   Frontend  │ ← User Interface (HTML/CSS/JS)
│  (Client)   │   • Chart.js for visualizations
└──────┬──────┘   • LocalStorage for auth tokens
       │
       ↓ REST API (HTTP/HTTPS)
       │
┌──────┴──────┐
│   Backend   │ ← Flask Application (Python)
│  (Server)   │   • JWT Authentication
└──────┬──────┘   • Business Logic
       │           • AI Analysis Engine
       ↓
┌──────┴──────┐
│  Database   │ ← Supabase (PostgreSQL)
│  (Storage)  │   • User Data
└─────────────┘   • Business Metrics
                  • Analysis Results

Component Architecture

Frontend Components

Core Modules:

  • auth.js - Handles authentication (email + Google OAuth)
  • config.js - API endpoints and configuration
  • dashboard.js - Dashboard data loading and chart rendering
  • analysis.js - AI chat interface and analysis display
  • theme.js - Dark/light theme management
  • header-profile.js - User profile component

Backend Components

backend/
├── app.py                      # Main Flask application
│   ├── Auth Routes (/api/auth/*)
│   ├── User Routes (/api/user/*)
│   ├── Business Data Routes (/api/business/*)
│   └── AI Analysis Routes (/api/ai/*)
│
├── auth/auth_service.py        # Authentication Service
│   ├── signup()
│   ├── login()
│   ├── google_auth()
│   └── change_password()
│
├── database/supabase_client.py # Database Operations
│   ├── CRUD operations
│   ├── User management
│   └── Business data queries
│
└── ai/                         # AI & Analysis
    ├── analysis_engine.py      # Business analysis
    ├── nlp_processor.py        # Natural language processing
    ├── anomaly_detector.py     # Anomaly detection (Z-score)
    └── data_processor.py       # Data preprocessing

API Architecture

RESTful API with consistent response format:

Response Format

// Success Response
{
  "success": true,
  "data": { ... },
  "message": "Operation successful"
}

// Error Response
{
  "success": false,
  "message": "Error description"
}

Protected Routes

All protected routes use the @token_required decorator:

@app.route('/api/resource', methods=['GET'])
@token_required
def get_resource(current_user):
    # current_user automatically injected
    # Contains: id, name, email, etc.
    return jsonify({'success': True, 'data': result})

Authentication Architecture

Dual Authentication System

Email/Password

Traditional authentication with hashed passwords (SHA-256)

Google OAuth

OAuth 2.0 integration for seamless sign-in

JWT Token Flow

1. User Login/Signup
   ↓
2. Backend validates credentials
   ↓
3. JWT token generated (7-day expiry)
   ↓
4. Token sent to frontend
   ↓
5. Frontend stores in localStorage
   ↓
6. Token included in Authorization header
   ↓
7. Backend validates token on each request

AI Analysis Pipeline

Analysis Workflow:

  1. User Query → Natural language question from chat
  2. NLP Processing → Extract intent and entities
  3. Data Retrieval → Fetch relevant business data
  4. Analysis Engine → Perform calculations and analysis
  5. Anomaly Detection → Check for outliers (Z-score)
  6. Response Generation → Format insights and recommendations
  7. Storage → Save to analysis_results table

Analysis Types

analysis_types = {
    'sales': analyze_sales,
    'profit': analyze_profit,
    'expenses': analyze_expenses,
    'trend': analyze_trends,
    'forecast': forecast_data,
    'comparison': analyze_comparison
}

Security Architecture

Password Security

SHA-256 hashing with salt

JWT Tokens

HS256 algorithm, 7-day expiry

CORS Protection

Configured origins only

SQL Injection

Protected via Supabase ORM

Performance Optimizations

  • Frontend: Lazy loading, code splitting, localStorage caching
  • Backend: Efficient database queries, response compression
  • Database: Indexed columns (email, user_id, dates)
  • API: Batch operations, pagination support

Scalability Considerations

Current Architecture Supports:

  • Horizontal scaling of Flask backend (stateless design)
  • Supabase handles database scaling automatically
  • CDN deployment for static frontend assets
  • Load balancer ready (no session state)