# xvistasss/netspeed architecture

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

- Interactive diagram: https://gitdiagram.com/xvistasss/netspeed
- Repository: https://github.com/xvistasss/netspeed

## Overview

Net Speed Test is a browser-based network diagnostics app. Users start a test in the dashboard; its React state hook runs measurement work in a Web Worker and presents speed, latency, jitter, packet-loss, and quality details. The README documents Cloudflare edge testing and additional diagnostic views. The sampled code confirms worker calculations, location lookup, and dashboard rendering; some API and content wiring is inferred only from documented capabilities and the file tree, so uncertain connections are omitted.

Main entry points: [`src/speed-test/hooks/useSpeedTest.ts`](https://github.com/xvistasss/netspeed/blob/main/src/speed-test/hooks/useSpeedTest.ts) (Test state), [`src/speed-test/components/SpeedTest.tsx`](https://github.com/xvistasss/netspeed/blob/main/src/speed-test/components/SpeedTest.tsx) (Test dashboard), [`src/speed-test/worker/speedtest.worker.ts`](https://github.com/xvistasss/netspeed/blob/main/src/speed-test/worker/speedtest.worker.ts) (Test worker), [`src/pages/index.astro`](https://github.com/xvistasss/netspeed/blob/main/src/pages/index.astro) (Test page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Test experience"]
  node_home["Test page<br/>[index.astro]"]
  node_dashboard["Test dashboard<br/>[SpeedTest.tsx]"]
  node_state["Test state<br/>[useSpeedTest.ts]"]
  node_details["Detailed metrics"]
  node_quality["Quality scores<br/>[QualityScores.tsx]"]
  node_logs["Technical logs<br/>[TechnicalLogs.tsx]"]
  node_terminal["Terminal view"]
end

subgraph group_measurement["Measurement engine"]
  node_worker["Test worker"]
  node_algorithms["Measurement utilities<br/>[speedTestUtils.ts]"]
  node_config["Test configuration<br/>[speedTestConfig.ts]"]
  node_edge_select["Edge selection<br/>[serverSelection.ts]"]
end

subgraph group_location["Location services"]
  node_geo_api["IP geolocation API<br/>[ip-geo.ts]"]
end

subgraph group_site["Site content"]
  node_content_index["Blog index<br/>[index.astro]"]
  node_blog_post["Blog posts<br/>[&#91;...slug&#93;.astro]"]
  node_blog_content["Blog content"]
  node_info_pages["Info pages<br/>[how-it-works.astro]"]
  node_contact_page["Contact page<br/>[contact.astro]"]
  node_contact_api["Contact endpoint<br/>[contact.ts]"]
end

node_visitor(("Visitor"))
node_cloudflare{{"Cloudflare test edge"}}
node_geo_providers{{"IP lookup providers"}}
node_reverse_geo{{"Reverse geocoder"}}

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_dashboard
node_dashboard -->|"starts test"| node_state
node_state -->|"dispatches test"| node_worker
node_worker -->|"measures traffic"| node_cloudflare
node_worker -->|"uses calculations"| node_algorithms
node_state -->|"calculates summaries"| node_algorithms
node_state -->|"selects edge"| node_edge_select
node_state -->|"requests location"| node_geo_api
node_geo_api -->|"looks up IP"| node_geo_providers
node_state -.->|"reverse geocodes"| node_reverse_geo
node_state -->|"updates results"| node_dashboard
node_dashboard -->|"shows metrics"| node_details
node_dashboard -->|"shows grades"| node_quality
node_dashboard -->|"shows logs"| node_logs
node_dashboard -->|"shows terminal"| node_terminal
node_visitor -->|"browses"| node_content_index
node_content_index -->|"opens post"| node_blog_post
node_blog_post -->|"reads posts"| node_blog_content
node_visitor -->|"reads guidance"| node_info_pages
node_visitor -->|"opens"| node_contact_page
node_contact_page -->|"submits message"| node_contact_api

click node_home "https://github.com/xvistasss/netspeed/blob/main/src/pages/index.astro"
click node_dashboard "https://github.com/xvistasss/netspeed/blob/main/src/speed-test/components/SpeedTest.tsx"
click node_state "https://github.com/xvistasss/netspeed/blob/main/src/speed-test/hooks/useSpeedTest.ts"
click node_details "https://github.com/xvistasss/netspeed/blob/main/src/speed-test/components/DetailedMeasurements.tsx"
click node_quality "https://github.com/xvistasss/netspeed/blob/main/src/speed-test/components/QualityScores.tsx"
click node_logs "https://github.com/xvistasss/netspeed/blob/main/src/speed-test/components/TechnicalLogs.tsx"
click node_terminal "https://github.com/xvistasss/netspeed/blob/main/src/speed-test/components/TerminalSimulator.tsx"
click node_worker "https://github.com/xvistasss/netspeed/blob/main/src/speed-test/worker/speedtest.worker.ts"
click node_algorithms "https://github.com/xvistasss/netspeed/blob/main/src/speed-test/utils/speedTestUtils.ts"
click node_config "https://github.com/xvistasss/netspeed/blob/main/src/speed-test/utils/speedTestConfig.ts"
click node_edge_select "https://github.com/xvistasss/netspeed/blob/main/src/speed-test/utils/serverSelection.ts"
click node_geo_api "https://github.com/xvistasss/netspeed/blob/main/src/pages/api/ip-geo.ts"
click node_content_index "https://github.com/xvistasss/netspeed/blob/main/src/pages/blog/index.astro"
click node_blog_post "https://github.com/xvistasss/netspeed/blob/main/src/pages/blog/%5B...slug%5D.astro"
click node_blog_content "https://github.com/xvistasss/netspeed/tree/main/src/content/blog"
click node_info_pages "https://github.com/xvistasss/netspeed/blob/main/src/pages/how-it-works.astro"
click node_contact_page "https://github.com/xvistasss/netspeed/blob/main/src/pages/contact.astro"
click node_contact_api "https://github.com/xvistasss/netspeed/blob/main/src/pages/api/contact.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_home,node_dashboard,node_state,node_details,node_quality,node_logs,node_terminal toneBlue
class node_worker,node_algorithms,node_config,node_edge_select toneAmber
class node_geo_api toneMint
class node_content_index,node_blog_post,node_blog_content,node_info_pages,node_contact_page,node_contact_api toneRose
class node_visitor,node_cloudflare,node_geo_providers,node_reverse_geo toneIndigo
```

## Components

### Test experience

- [Test page](https://github.com/xvistasss/netspeed/blob/main/src/pages/index.astro): `src/pages/index.astro`
- [Test dashboard](https://github.com/xvistasss/netspeed/blob/main/src/speed-test/components/SpeedTest.tsx): `src/speed-test/components/SpeedTest.tsx`
- [Test state](https://github.com/xvistasss/netspeed/blob/main/src/speed-test/hooks/useSpeedTest.ts): `src/speed-test/hooks/useSpeedTest.ts`
- [Detailed metrics](https://github.com/xvistasss/netspeed/blob/main/src/speed-test/components/DetailedMeasurements.tsx): `src/speed-test/components/DetailedMeasurements.tsx`
- [Quality scores](https://github.com/xvistasss/netspeed/blob/main/src/speed-test/components/QualityScores.tsx): `src/speed-test/components/QualityScores.tsx`
- [Technical logs](https://github.com/xvistasss/netspeed/blob/main/src/speed-test/components/TechnicalLogs.tsx): `src/speed-test/components/TechnicalLogs.tsx`
- [Terminal view](https://github.com/xvistasss/netspeed/blob/main/src/speed-test/components/TerminalSimulator.tsx): `src/speed-test/components/TerminalSimulator.tsx`

### Measurement engine

- [Test worker](https://github.com/xvistasss/netspeed/blob/main/src/speed-test/worker/speedtest.worker.ts): `src/speed-test/worker/speedtest.worker.ts`
- [Measurement utilities](https://github.com/xvistasss/netspeed/blob/main/src/speed-test/utils/speedTestUtils.ts): `src/speed-test/utils/speedTestUtils.ts`
- [Test configuration](https://github.com/xvistasss/netspeed/blob/main/src/speed-test/utils/speedTestConfig.ts): `src/speed-test/utils/speedTestConfig.ts`
- [Edge selection](https://github.com/xvistasss/netspeed/blob/main/src/speed-test/utils/serverSelection.ts): `src/speed-test/utils/serverSelection.ts`

### Location services

- [IP geolocation API](https://github.com/xvistasss/netspeed/blob/main/src/pages/api/ip-geo.ts): `src/pages/api/ip-geo.ts`

### Site content

- [Blog index](https://github.com/xvistasss/netspeed/blob/main/src/pages/blog/index.astro): `src/pages/blog/index.astro`
- [Blog posts](https://github.com/xvistasss/netspeed/blob/main/src/pages/blog/%5B...slug%5D.astro): `src/pages/blog/[...slug].astro`
- [Blog content](https://github.com/xvistasss/netspeed/tree/main/src/content/blog): `src/content/blog`
- [Info pages](https://github.com/xvistasss/netspeed/blob/main/src/pages/how-it-works.astro): `src/pages/how-it-works.astro`
- [Contact page](https://github.com/xvistasss/netspeed/blob/main/src/pages/contact.astro): `src/pages/contact.astro`
- [Contact endpoint](https://github.com/xvistasss/netspeed/blob/main/src/pages/api/contact.ts): `src/pages/api/contact.ts`

### Other components

- **Visitor**
- **Cloudflare test edge**
- **IP lookup providers**
- **Reverse geocoder**

## Connections

- Visitor → Test page: opens
- Test page → Test dashboard: renders
- Test dashboard → Test state: starts test
- Test state → Test worker: dispatches test
- Test worker → Cloudflare test edge: measures traffic
- Test worker → Measurement utilities: uses calculations
- Test state → Measurement utilities: calculates summaries
- Test state → Edge selection: selects edge
- Test state → IP geolocation API: requests location
- IP geolocation API → IP lookup providers: looks up IP
- Test state → Reverse geocoder: reverse geocodes
- Test state → Test dashboard: updates results
- Test dashboard → Detailed metrics: shows metrics
- Test dashboard → Quality scores: shows grades
- Test dashboard → Technical logs: shows logs
- Test dashboard → Terminal view: shows terminal
- Visitor → Blog index: browses
- Blog index → Blog posts: opens post
- Blog posts → Blog content: reads posts
- Visitor → Info pages: reads guidance
- Visitor → Contact page: opens
- Contact page → Contact endpoint: submits message