Skip to content

README.md

Latest commit

 

History

History
109 lines (71 loc) · 3.02 KB

README.md

File metadata and controls

109 lines (71 loc) · 3.02 KB
Raw

🌍 NetWatch: Global Live DDoS Tracker

A real-time 3D visualization of global cyber threats using the MERN Stack, Socket.io, and Cloudflare Radar.

Project Screenshot

🚀 Overview

NetWatch is a cybersecurity dashboard that visualizes Layer 3 DDoS attacks as they happen around the world. It fetches aggregated threat intelligence from Cloudflare, processes geospatial data, and renders interactive attack vectors on a high-performance WebGL globe.

Status: 🟢 Live Monitoring | Tech Stack: MERN + Three.js

✨ Features

  • Cyberpunk UI: Fully immersive "Hacker Terminal" aesthetic with scanlines and neon visuals.
  • Real-Time Data: Streams live attack pairs (Origin → Target) using WebSockets.
  • Interactive 3D Globe:
  • Attack Arcs: Visualizes attack trajectories.
  • Impact Ripples: Pulsing rings indicating victim countries.
  • Auto-Zoom: Click a country in the dashboard to fly the camera to that location.
  • Live Analytics: Glass-morphism dashboard calculating "Top Target," "Total Bandwidth," and "Attack Vectors."

🛠️ Tech Stack

  • Frontend: React, Vite, Three.js (react-globe.gl), CSS Modules.
  • Backend: Node.js, Express.
  • Real-Time: Socket.io (WebSockets).
  • Data Source: Cloudflare Radar API.
  • Security: Server-side API Proxy (Env variables).

⚙️ Installation & Setup

Prerequisites

  • Node.js (v18 or higher)
  • A Cloudflare API Token (Read permissions for Radar)

1. Clone the Repository

git clone https://github.com/thegoddo/netwatch.git
cd netwatch

2. Backend Setup

cd server
npm install

Create a .env file in the server folder:



CLOUDFLARE_TOKEN=your_actual_cloudflare_api_token_here

Start the Server:

node index.js
# Output: SERVER RUNNING ON PORT 4000

3. Frontend Setup

Open a new terminal:

cd client
npm install
npm run dev```

Open your browser at http://localhost:5173.
📂 Project Structure

netwatch/
├── server/
│   ├── index.js         # Main Entry point, API Polling, Socket.io
│   ├── countries.js     # ISO Code to GPS Coordinate Mapping
│   └── .env             # API Keys (Not committed to Git)
└── client/
    ├── src/
    │   ├── App.js       # Main React Logic & Globe Renderer
    │   ├── Dashboard.js # Glassmorphism UI & Analytics
    │   └── countries.js # Frontend Coordinate logic for Camera Zoom
    └── vite.config.js   # Build configuration

🐛 Troubleshooting

  • Globe is Black? Ensure Hardware Acceleration is enabled in your browser.

  • No Red Lines? Check the server terminal. If it says Broadcasting..., check your browser console (F12) for WebSocket connection errors.

  • Cloudflare Error 400? Ensure your API Token has Radar: Read permissions.

🔮 Future Improvements

  • Sound Effects: Add audio feedback for massive attack spikes.

  • Historical Mode: Allow users to replay attacks from yesterday.

  • Mobile Support: Optimize controls for touch screens.