🚨 FraudGuard Elite - Real-Time Fraud Detection System

📌 Overview

FraudGuard Elite is a production-grade, full-stack fraud detection platform designed to simulate, monitor, and investigate financial transactions in real-time. Unlike static analysis tools, this system leverages WebSockets to stream live transaction data, visualizing potential threats on an interactive dashboard with geospatial intelligence.

It demonstrates advanced full-stack engineering skills, combining a high-performance Node.js backend with a modern, glassmorphism-styled React frontend.

🎯 Objectives

• Real-Time Monitoring: Detect and display transactions the instant they occur using Socket.io.
• Analyst Experience: Provide a professional "Investigation Mode" for deep-diving into suspicious activities.
• Data Visualization: Render complex transaction flows using dynamic charts and geospatial indicators.
• Simulation: Generate realistic transaction patterns (legitimate vs. fraudulent) to test detection workflows.

🛠️ Technologies Used

Frontend (Client)

• Framework: React 18 (Vite)
• Language: TypeScript
• Styling: Tailwind CSS, Framer Motion (Animations)
• Visualization: Recharts, Lucide Icons
• State Management: Zustand

Backend (Server)

• Runtime: Node.js
• API: Express.js
• Real-Time: Socket.io (WebSockets)
• Simulation Engine: Custom TypeScript algorithms for geolocation and fraud probability distribution.

📊 Features

• 🚀 Live Transaction Feed: WebSocket-powered stream of transactions with instant "Fraud/Safe" classification.
• 🌍 Geospatial Intelligence: Visualizes transaction origins relative to user home locations to detect "Impossible Travel" fraud.
• 📈 Interactive Analytics: Real-time charts showing risk distribution and transaction volume.
• 🛡️ Analyst Dashboard: Detailed view for investigating specific transaction metadata (IP, device ID, merchant category).
• ✨ Premium UI/UX: "Glassmorphism" design language with fluid animations for a modern enterprise feel.

📸 Screenshots

🏠 Home Page

The landing page featuring a high-conversion hero section and glassmorphism design. ![Home Page]

🔐 Login Page

Secure authentication portal with Google integration. ![Login Page]

📝 Registration (Agent Signup)

Onboarding flow for new fraud analysts. ![Signup Page]

📊 Dashboard & Investigation Mode

Real-time command center showing live transaction streams, risk charts, and geospatial data. ![Dashboard]

📁 Project Structure

fraud-detection-system/
│
├── api/                    # Backend & Simulation Engine
│   ├── routes/             # API Endpoints
│   ├── services/           # Logic for Fraud Simulation
│   ├── app.ts              # Express App Setup
│   └── index.ts            # Socket.io Entry Point
│
├── src/                    # Frontend Application
│   ├── components/         # Reusable UI Components
│   │   └── dashboard/      # Analyst Dashboard Widgets
│   ├── pages/              # Route Pages (Login, Home, Dashboard)
│   ├── lib/                # Utilities & Helpers
│   └── App.tsx             # Main Component
│
├── public/                 # Static Assets
├── package.json            # Dependencies & Scripts
└── README.md               # Documentation

▶️ How to Run the Project

1. Clone the repository

   git clone https://github.com/AgreementMudau05/fraud-detection-system.git
   cd fraud-detection-system

2. Install Dependencies

   npm install

3. Start the Development Suite (Frontend + Backend)

   npm run dev

   This command runs both the React client (Port 5173) and the Node.js server (Port 3001) concurrently.

4. Access the Application

   • Open http://localhost:5173 in your browser.
   • Login with the demo credentials pre-filled in the login page.

🚀 Future Improvements

• Machine Learning Integration: Connect the Node.js backend to a Python Flask/FastAPI service running a trained Random Forest model for higher-accuracy predictions.
• Database Persistence: Migrate from in-memory simulation to PostgreSQL/TimescaleDB for historical analysis.
• Docker Support: Containerize the application for easy deployment to AWS/GCP.
• Mobile App: Develop a React Native companion app for alerts.

---

Author: Agreement Mudau Role: Full Stack Engineer & Data Specialist