Analytics Dashboard UI
Relevant source files
The following files were used as context for generating this wiki page:
The Analytics Dashboard UI is the visual layer of the Glimpse platform, designed to provide real-time visualization of user traffic and event patterns. Built with Next.js and React, the dashboard focuses on "tracking sessions, not people," providing an interface for live mapping and event monitoring without compromising individual user identities.
The UI is optimized for real-time data streaming via WebSockets and features a dark-mode first design using Tailwind CSS. It serves as the primary interface for project owners to monitor active sessions, geographic distribution of users, and specific event triggers like signups or errors.
Sources: PROJECT_OUTLINE.md:5-9, README.md:5-8
Core Tech Stack and Configuration
The dashboard is a modern web application leveraging a specialized stack for performance and real-time visualization.
| Category | Technology | Description |
|---|---|---|
| Framework | Next.js / React | App router-based architecture with React Server Components (RSC) support. |
| Styling | Tailwind CSS | Utilizes CSS variables and OKLCH color spaces for advanced dark mode support. |
| 3D/Mapping | Three.js / React Three Fiber | Used for interactive 3D globe and live mapping visualizations. |
| Components | Radix UI / shadcn/ui | Component library architecture defined in components.json. |
| Database Access | Prisma | Direct ORM access for retrieving session and event history. |
Sources: app/web/package.json:20-30, PROJECT_OUTLINE.md:15-26, app/web/components.json:1-15
Theme and Visual Configuration
The UI utilizes a sophisticated theme system based on CSS variables and OKLCH colors, allowing for precise control over the dark and light modes.
The design system emphasizes a "zinc" and "black" palette, specifically tailored for long-term monitoring on large screens.
Sources: app/web/src/app/globals.css:40-120, app/web/src/app/page.tsx:7-10
UI Architecture and Layout
The application follows the Next.js App Router pattern, isolating global configurations in the root layout and defining view-specific logic in page components.
Layout and Font Optimization
The dashboard implements Geist and Geist Mono fonts for high readability in data-heavy views. The RootLayout ensures that anti-aliasing and theme variables are applied consistently across all analytics views.
Sources: app/web/src/app/layout.tsx:4-35
Component Aliasing
To maintain a clean architecture, the dashboard uses specific path aliases for components and utilities:
@/components: Shared UI elements.@/lib: General utilities.@glimpse/db: Shared database clients (Prisma and Redis).@glimpse/shared: Common Zod schemas and types.
Sources: app/web/components.json:16-25, app/web/tsconfig.json:20-25
Data Models and Visualization Logic
The dashboard UI consumes data structured for high-concurrency analytics. The frontend interacts with several key entities defined in the backend schema to populate charts and maps.
Entity Relationship for Dashboard Views
Note: The ER diagram shows how the UI aggregates raw events into session and page-level analytics for display.
Dashboard Data Components
- Live Map: Utilizes
latandlonfields from theEventmodel to plot real-time activity markers. - Session Monitor: Displays active sessions from the
AnalyticsSessiontable, showinglastSeenAtandeventCount. - Page Analytics: Summarizes traffic per path using the
DailyPageAnalyticsaggregate model.
Sources: packages/db/prisma/schema.prisma:22-38, packages/db/prisma/schema.prisma:73-85
Development and Deployment
The dashboard is integrated into the monorepo structure, allowing it to share logic with the ingestion workers.
Project Scripts
The package.json for the web application defines the standard lifecycle for a Next.js app:
dev: Starts the development server on port 3001.build: Optimizes the application for production.prisma:generate: Updates the local Prisma client based on the shared schema.
Sources: app/web/package.json:5-13, README.md:160-170
Connection to Services
The UI connects directly to the Glimpse backend ecosystem:
- WebSocket: Streams live events for real-time map updates.
- Redis: Fetches active user counts for the "Live" badge.
- PostgreSQL: Queries historical data for the main dashboard trends.
Sources: app/web/src/app/page.tsx:2-3, PROJECT_OUTLINE.md:144-155
Conclusion
The Analytics Dashboard UI provides a real-time, high-performance interface for traffic visualization. By leveraging React Three Fiber for mapping and a robust Prisma-backed data layer, it enables project owners to observe user behavior as it happens without compromising individual privacy through identity tracking.