Public
LikecounterTown
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Viewing readonly version of main branch: v79View latest version
A real-time web analytics tracker and dashboard hosted on Val Town.
┌─────────────────────────────────────────────────────────────────┐
│ Server Side │
├─────────────────────────────────────────────────────────────────┤
│ counterTown.tsx Main HTTP server/router + tracking │
│ counterTownDb.tsx SQLite database layer (sites, views) │
└─────────────────────────────────────────────────────────────────┘
↓ SSE stream
┌─────────────────────────────────────────────────────────────────┐
│ Client Side │
├─────────────────────────────────────────────────────────────────┤
│ counterTownClient.tsx React app entry point + routing │
│ AnalyticsContext.tsx State management via SSE connection │
│ Dashboard.tsx Main dashboard orchestrator │
└─────────────────────────────────────────────────────────────────┘
Main entry point that handles:
- HTTP routing for the dashboard, tracking endpoints, and SSE stream
CounterTownclass for tracking logic and origin validation- Generates the tracking script that sites embed
- Serves the dashboard HTML with Tailwind CSS configuration
SQLite database layer with three tables:
sites- Tracked sites with total view countspath_analytics- Per-path stats (views, referrers, browsers, OS, etc.)view_timestamps- Individual view timestamps for time-series data
Exports: initAnalytics(), trackPageView(), getAnalytics(), cleanupOldData()
React application entry point:
- React Router setup with routes for
/and/:sitename - Theme provider for dark/light mode
- Error boundary and loading states
- Renders the main
Appcomponent
Central state management:
- SSE connection to
/streamendpoint for real-time updates - Data processing and aggregation (browsers, OS, screen sizes, countries)
- Calculates day/week/month view percentages
- Provides
useAnalytics()hook for components
Main dashboard orchestrator that composes all section components based on the current site selection.
| Component | Purpose |
|---|---|
OverallStatsSection.tsx | Total views, visitors, paths summary |
statCard.tsx | Reusable stat display card |
SitesSection.tsx | List of all tracked sites |
TopPathsSection.tsx | Most visited paths table |
TopReferrersSection.tsx | Top referrer sources |
VisitorOriginsSection.tsx | Country-based visitor breakdown |
visitorGlobe.tsx | Globe visualization for visitor origins |
ChartsSection.tsx | Browser/OS/device charts container |
chartCard.tsx | Reusable chart card component |
Navigation.tsx | Site navigation/breadcrumbs |
ConnectionStatus.tsx | SSE connection status indicator |
| File | Purpose |
|---|---|
formatSiteName.tsx | URL formatting (strips protocol, www) |
personalData.tsx | Personal configuration data |
valTownAnalytics.tsx | Val Town specific analytics helpers |
- Tracking: Sites embed a script from
/trackingScriptthat sends page views to/trackPageView - Storage:
counterTownDb.tsxstores views in SQLite with JSON aggregations - Streaming: Dashboard connects to
/streamSSE endpoint - Display:
AnalyticsContextprocesses data and components render via React