🛡️ ShieldVision — AI-Powered Debit Card Fraud Detection

Real-time fraud detection for debit card transactions using Machine Learning, IBM Cloud, Node.js, and a modern TypeScript frontend.

🌐 Live: Frontend on Vercel · Backend on Railway
📁 Repo: github.com/23e46pratham-lab/ShieldVision_Working
📁 backend repo: https://github.com/23e46pratham-lab/backend

---

📌 Overview

Financial fraud is rapidly increasing with the growth of digital banking — especially in loan processing and debit card transactions. Traditional rule-based systems used in Indian banking fail to catch sophisticated fraud patterns.

ShieldVision is an end-to-end AI-powered fraud detection system that classifies debit card transactions as Fraudulent or Legitimate in real time using a Snap Random Forest Classifier hosted on IBM Cloud.

---

✨ Features

• ⚡ Real-time single transaction prediction
• 📂 CSV batch detection
• 📊 Live dashboard with fraud analytics
• 🥧 Pie chart fraud/legitimate ratio
• 🔔 Latest fraud alerts panel
• 📋 Full transaction history logs
• ☁️ Cloud-deployed ML model (IBM Watson)
• 🔐 Secure environment-based configuration
• 🚫 No mock data — fully connected to live backend

---

🛠 Tech Stack

Layer	Technology	Hosting
🧠 ML Model	Snap Random Forest Classifier	IBM Cloud (Watson ML)
🔧 Backend	Node.js + Express	Railway.app
💻 Frontend	TypeScript, HTML, JS	Vercel
📊 Charts	Recharts	—

---

🔍 How It Works

User Input (Form / CSV)
        ↓
Node.js Backend
  → Validates & formats transaction fields
  → Sends payload to IBM Cloud ML endpoint
        ↓
IBM Watson ML
  → Snap Random Forest Classifier
  → Returns: { "prediction": "Fraud", "confidence": 0.92 }
        ↓
Backend formats & logs result
        ↓
Frontend Dashboard
  → Live prediction result
  → Updated analytics & charts

Transaction Fields Used

type · amount · nameOrig · oldbalanceOrg · newbalanceOrig
nameDest · oldbalanceDest · newbalanceDest

---

📁 Project Structure

ShieldVision_Working/
├── frontend/
│   ├── src/
│   │   ├── pages/
│   │   ├── components/
│   │   ├── services/api.ts
│   │   └── types.ts
│   └── vite.config.ts
│
└── backend/
    ├── server.js
    ├── routes/
    └── .env

---

🚀 Running Locally

1. Clone the repo

git clone https://github.com/23e46pratham-lab/ShieldVision_Working.git
cd ShieldVision_Working

2. Start the backend

cd backend
npm install
npm start

3. Start the frontend

cd frontend
npm install
npm run dev

4. Environment Variables

Backend .env

IBM_API_KEY=your-ibm-api-key
IBM_URL=your-ibm-ml-endpoint
PORT=5000

Frontend .env

VITE_BACKEND_URL=https://your-backend.railway.app/api

---

📊 Dashboard

• Live fraud vs legitimate pie chart
• Real-time prediction panel
• Transaction history table
• Latest fraud alerts
• CSV batch result preview
• Accuracy metrics

---

🔮 Future Enhancements

• User authentication
• Database integration (MongoDB / PostgreSQL)
• Model monitoring dashboard
• Advanced anomaly detection
• Multi-card fraud correlation

---

🎓 Context

Developed as part of the CLPBL Initiative at St. Joseph Engineering College, Mangaluru — addressing a real problem in India's rapidly expanding digital banking ecosystem.