# nazir20/fluxwire architecture

> Architecture diagram of the GitHub repository nazir20/fluxwire, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nazir20/fluxwire
- Repository: https://github.com/nazir20/fluxwire

## Overview

FluxWire captures IP traffic, classifies packets, streams packet events through a Socket.IO gateway, and presents live packet, protocol, rate, and connection views. The dashboard page coordinates its subscriptions and visual components; packet-rate/protocol statistics and flow aggregation are distinct processing stages. The README documents the end-to-end architecture, while the sampled source confirms capture, event handling, and dashboard wiring. The `usePackets` hook and mock data are not shown as part of the active page workflow.

Main entry points: [`frontend/app/page.tsx`](https://github.com/nazir20/fluxwire/blob/main/frontend/app/page.tsx) (Dashboard Page), [`frontend/hooks/useTrafficStats.ts`](https://github.com/nazir20/fluxwire/blob/main/frontend/hooks/useTrafficStats.ts) (Traffic Statistics), [`frontend/hooks/useConnections.ts`](https://github.com/nazir20/fluxwire/blob/main/frontend/hooks/useConnections.ts) (Connection Aggregator), [`analyzer/app/sniffer.py`](https://github.com/nazir20/fluxwire/blob/main/analyzer/app/sniffer.py) (Packet Sniffer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_capture["Packet Capture"]
  node_analyzer_entry["Analyzer Entry<br/>[main.py]"]
  node_sniffer["Packet Sniffer<br/>[sniffer.py]"]
end

subgraph group_stream["Event Gateway"]
  node_gateway["Socket Gateway<br/>[server.js]"]
end

subgraph group_dashboard["Dashboard"]
  node_socket_client["Socket Client<br/>[socket.ts]"]
  node_traffic_stats["Traffic Statistics<br/>[useTrafficStats.ts]"]
  node_connection_aggregator["Connection Aggregator<br/>[useConnections.ts]"]
  node_dashboard_page["Dashboard Page<br/>[page.tsx]"]
  node_packet_type["Packet Type<br/>[packet.ts]"]
  node_connection_type["Connection Type<br/>[connection.ts]"]
end

subgraph group_views["Traffic Views"]
  node_hero["Dashboard Header<br/>[Hero.tsx]"]
  node_stat_card["Statistic Cards<br/>[StatCard.tsx]"]
  node_packet_table["Packet Stream Table<br/>[PacketTable.tsx]"]
  node_protocol_chart["Protocol Chart<br/>[ProtocolChart.tsx]"]
  node_traffic_chart["Traffic Rate Chart<br/>[TrafficChart.tsx]"]
  node_traffic_flow["Connection Flow View<br/>[TrafficFlow.tsx]"]
end

node_network(("Network Interface"))
node_browser(("Dashboard User"))

node_network -->|"captures from"| node_sniffer
node_analyzer_entry -->|"starts"| node_sniffer
node_sniffer -->|"emits packets"| node_gateway
node_gateway -->|"streams events"| node_socket_client
node_browser -->|"views"| node_dashboard_page
node_dashboard_page -->|"subscribes via"| node_traffic_stats
node_dashboard_page -->|"subscribes via"| node_connection_aggregator
node_traffic_stats -->|"listens on"| node_socket_client
node_connection_aggregator -->|"listens on"| node_socket_client
node_traffic_stats -->|"types events"| node_packet_type
node_connection_aggregator -->|"types events"| node_packet_type
node_connection_aggregator -->|"builds flows"| node_connection_type
node_dashboard_page -->|"renders"| node_hero
node_dashboard_page -->|"renders"| node_stat_card
node_dashboard_page -->|"renders packets"| node_packet_table
node_dashboard_page -->|"renders analytics"| node_protocol_chart
node_dashboard_page -->|"renders rates"| node_traffic_chart
node_dashboard_page -->|"renders flows"| node_traffic_flow
node_connection_aggregator -->|"supplies flows"| node_traffic_flow
node_traffic_stats -->|"supplies packets"| node_packet_table
node_traffic_stats -->|"supplies counts"| node_protocol_chart
node_traffic_stats -->|"supplies rates"| node_traffic_chart
node_connection_aggregator -->|"supplies count"| node_stat_card

click node_analyzer_entry "https://github.com/nazir20/fluxwire/blob/main/analyzer/app/main.py"
click node_sniffer "https://github.com/nazir20/fluxwire/blob/main/analyzer/app/sniffer.py"
click node_gateway "https://github.com/nazir20/fluxwire/blob/main/gateway/src/server.js"
click node_socket_client "https://github.com/nazir20/fluxwire/blob/main/frontend/lib/socket.ts"
click node_traffic_stats "https://github.com/nazir20/fluxwire/blob/main/frontend/hooks/useTrafficStats.ts"
click node_connection_aggregator "https://github.com/nazir20/fluxwire/blob/main/frontend/hooks/useConnections.ts"
click node_dashboard_page "https://github.com/nazir20/fluxwire/blob/main/frontend/app/page.tsx"
click node_hero "https://github.com/nazir20/fluxwire/blob/main/frontend/components/Hero.tsx"
click node_stat_card "https://github.com/nazir20/fluxwire/blob/main/frontend/components/StatCard.tsx"
click node_packet_table "https://github.com/nazir20/fluxwire/blob/main/frontend/components/PacketTable.tsx"
click node_protocol_chart "https://github.com/nazir20/fluxwire/blob/main/frontend/components/ProtocolChart.tsx"
click node_traffic_chart "https://github.com/nazir20/fluxwire/blob/main/frontend/components/TrafficChart.tsx"
click node_traffic_flow "https://github.com/nazir20/fluxwire/blob/main/frontend/components/TrafficFlow.tsx"
click node_packet_type "https://github.com/nazir20/fluxwire/blob/main/frontend/types/packet.ts"
click node_connection_type "https://github.com/nazir20/fluxwire/blob/main/frontend/types/connection.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_analyzer_entry,node_sniffer,node_browser toneBlue
class node_gateway toneAmber
class node_socket_client,node_traffic_stats,node_connection_aggregator,node_dashboard_page,node_packet_type,node_connection_type toneMint
class node_hero,node_stat_card,node_packet_table,node_protocol_chart,node_traffic_chart,node_traffic_flow toneRose
class node_network toneIndigo
```

## Components

### Packet Capture

- [Analyzer Entry](https://github.com/nazir20/fluxwire/blob/main/analyzer/app/main.py): `analyzer/app/main.py`
- [Packet Sniffer](https://github.com/nazir20/fluxwire/blob/main/analyzer/app/sniffer.py): `analyzer/app/sniffer.py`

### Event Gateway

- [Socket Gateway](https://github.com/nazir20/fluxwire/blob/main/gateway/src/server.js): `gateway/src/server.js`

### Dashboard

- [Socket Client](https://github.com/nazir20/fluxwire/blob/main/frontend/lib/socket.ts): `frontend/lib/socket.ts`
- [Traffic Statistics](https://github.com/nazir20/fluxwire/blob/main/frontend/hooks/useTrafficStats.ts): `frontend/hooks/useTrafficStats.ts`
- [Connection Aggregator](https://github.com/nazir20/fluxwire/blob/main/frontend/hooks/useConnections.ts): `frontend/hooks/useConnections.ts`
- [Dashboard Page](https://github.com/nazir20/fluxwire/blob/main/frontend/app/page.tsx): `frontend/app/page.tsx`
- [Packet Type](https://github.com/nazir20/fluxwire/blob/main/frontend/types/packet.ts): `frontend/types/packet.ts`
- [Connection Type](https://github.com/nazir20/fluxwire/blob/main/frontend/types/connection.ts): `frontend/types/connection.ts`

### Traffic Views

- [Dashboard Header](https://github.com/nazir20/fluxwire/blob/main/frontend/components/Hero.tsx): `frontend/components/Hero.tsx`
- [Statistic Cards](https://github.com/nazir20/fluxwire/blob/main/frontend/components/StatCard.tsx): `frontend/components/StatCard.tsx`
- [Packet Stream Table](https://github.com/nazir20/fluxwire/blob/main/frontend/components/PacketTable.tsx): `frontend/components/PacketTable.tsx`
- [Protocol Chart](https://github.com/nazir20/fluxwire/blob/main/frontend/components/ProtocolChart.tsx): `frontend/components/ProtocolChart.tsx`
- [Traffic Rate Chart](https://github.com/nazir20/fluxwire/blob/main/frontend/components/TrafficChart.tsx): `frontend/components/TrafficChart.tsx`
- [Connection Flow View](https://github.com/nazir20/fluxwire/blob/main/frontend/components/TrafficFlow.tsx): `frontend/components/TrafficFlow.tsx`

### Other components

- **Network Interface**
- **Dashboard User**

## Connections

- Network Interface → Packet Sniffer: captures from (evidence: `README.md`)
- Analyzer Entry → Packet Sniffer: starts (evidence: `analyzer/app/main.py`)
- Packet Sniffer → Socket Gateway: emits packets (evidence: `analyzer/app/sniffer.py`)
- Socket Gateway → Socket Client: streams events (evidence: `README.md`)
- Dashboard User → Dashboard Page: views (evidence: `README.md`)
- Dashboard Page → Traffic Statistics: subscribes via (evidence: `frontend/app/page.tsx`)
- Dashboard Page → Connection Aggregator: subscribes via (evidence: `frontend/app/page.tsx`)
- Traffic Statistics → Socket Client: listens on (evidence: `frontend/hooks/useTrafficStats.ts`)
- Connection Aggregator → Socket Client: listens on (evidence: `frontend/hooks/useConnections.ts`)
- Traffic Statistics → Packet Type: types events (evidence: `frontend/hooks/useTrafficStats.ts`)
- Connection Aggregator → Packet Type: types events (evidence: `frontend/hooks/useConnections.ts`)
- Connection Aggregator → Connection Type: builds flows (evidence: `frontend/hooks/useConnections.ts`)
- Dashboard Page → Dashboard Header: renders (evidence: `frontend/app/page.tsx`)
- Dashboard Page → Statistic Cards: renders (evidence: `frontend/app/page.tsx`)
- Dashboard Page → Packet Stream Table: renders packets (evidence: `frontend/app/page.tsx`)
- Dashboard Page → Protocol Chart: renders analytics (evidence: `frontend/app/page.tsx`)
- Dashboard Page → Traffic Rate Chart: renders rates (evidence: `frontend/app/page.tsx`)
- Dashboard Page → Connection Flow View: renders flows (evidence: `frontend/app/page.tsx`)
- Connection Aggregator → Connection Flow View: supplies flows
- Traffic Statistics → Packet Stream Table: supplies packets
- Traffic Statistics → Protocol Chart: supplies counts
- Traffic Statistics → Traffic Rate Chart: supplies rates
- Connection Aggregator → Statistic Cards: supplies count