overview.
Spectr provides real-time visitor insights through a stunning dark-themed dashboard without cookies or invasive fingerprinting. Features include SSE-powered live feed, zero-cookie tracking, and high-performance data analytics.
technical implementation.
SSE-Powered Real-Time Engine
Architected a custom Server-Sent Events (SSE) broadcaster to stream visitor activity directly to the dashboard, providing instantaneous live updates without page refreshes.
Privacy-First Tracking Logic
Developed a zero-cookie tracking script that captures essential high-level traffic patterns and geographic data through secure IP-based geolocation while maintaining full GDPR/CCPA compliance.
Aesthetic Glassmorphic UI
Designed a premium dark-mode interface using Framer Motion and Tailwind CSS, featuring smooth spring animations and professional glassmorphism inspired by high-end design trends.
Scalable Data Analytics Layer
Implemented a robust Prisma/PostgreSQL backend with optimized query layers to handle high-frequency tracking events and aggregate historical stats for 7-day and 30-day views.
key features.
- Live Activity Feed: Monitor website visitors in real-time with SSE technology
- Zero Cookie Privacy: Track traffic metrics without cookies or fingerprinting
- One-Line Integration: Deploy tracking in seconds with a single lightweight script tag
- Geographic Insights: Visualize visitor locations with country and city-level intelligence
- Referrer Analysis: Understand exactly where your traffic is coming from
- Secure Multi-Tenant Auth: Enterprise-grade authentication using NextAuth.js
- Beautiful Data Visuals: Professional-grade charts and stats breakdowns
screenshots.
Premium real-time analytics dashboard featuring glassmorphic design and site-wide performance metrics
Dynamic traffic distribution charts showing granular country, city, and referral source data
Simplified developer onboarding with a one-line tracking script and project configuration hub
The Live Feed interface displaying instantaneous visitor events and active sessions via SSE
challenges & solutions.
Challenge: Balancing real-time performance with database load
Solution: Implemented an event broadcaster that bypasses heavy DB polling by streaming live events directly to active dashboard sessions via SSE.
Challenge: Maintaining data accuracy without user cookies
Solution: Engineered a session-hashing strategy that groups traffic into logical visits without storing persistent identifiers on the user's device.
Challenge: Creating a high-end feel in a technical dashboard
Solution: Leveraged Framer Motion's layout animations and a curated zinc-color palette to ensure the dashboard feels responsive and premium.
Challenge: Ensuring secure cross-origin tracking script
Solution: Developed a robust CORS-compliant API layer to allow verified project IDs to transmit data from any external domain securely.