I just launched (https://pure-metrics.app/) - a privacy-first web analytics platform that respects users while giving developers the insights they need. After weeks of building, iterating and learning, I'm excited to share the technical journey and architectural decisions that made this possible.
The Problem: Analytics Shouldn't Compromise Privacy
Modern web analytics faces a fundamental conflict: businesses need insights, but users deserve privacy. Most traditional analytics platforms collect excessive personal data, slow down websites with heavy tracking scripts, require intrusive cookie banners and create compliance headaches with GDPR, CCPA and other privacy regulations.
Meanwhile, privacy-focused alternatives often fall short - they're either prohibitively expensive for indie developers and small businesses or they lack essential features that teams actually need.
I wanted to build something different:
- Respects user privacy - no cookies, no personal data collection, GDPR-compliant by default
- Loads instantly - sub-1KB tracking script that won't impact page performance
- Works everywhere - Progressive Web App that works offline on mobile, tablet and desktop
- Actually affordable - costs less than a coffee per day
The Tech Stack
Frontend Layer
- React 18 + TypeScript - Type safety throughout the application prevents runtime errors and improves developer experience
- Vite - Lightning-fast dev server and optimized production builds
- Tailwind CSS - Utility-first CSS for rapid UI development without bloat
- Lucide React - Beautiful, consistent icon system
Backend & Database
- Supabase - Complete backend solution with PostgreSQL database, built-in authentication and Edge Functions
- Row Level Security (RLS) - Database-level security policies that can't be bypassed
- Deno Edge Functions - Serverless functions running at the edge for minimal latency
Progressive Web App Features
- Service Workers - Offline support and intelligent caching strategies
- Web App Manifest - Installable on any platform with native app feel
- Push Notifications - Real-time alerts for traffic spikes and important events
Key Architecture Decisions
1. Privacy-First Geolocation Without External APIs
The biggest architectural challenge was implementing geographic insights without compromising privacy. Traditional analytics platforms send IP addresses to third-party geolocation services, creating privacy risks and compliance issues.
My solution leverages Cloudflare's edge network, which provides a pre-computed country code header with every request. This header contains only the two-letter country code - no IP addresses, no coordinates, no city-level data. It's privacy-friendly by design since Cloudflare already handles the anonymization at the edge and no external API calls are needed.
For local development where Cloudflare headers aren't available, I implemented a fallback that assigns random test countries, ensuring the development experience mirrors production behavior without requiring complex local setup.
2. Ultra-Lightweight Tracking That Respects Performance
Page speed matters for both user experience and SEO. The tracking script is under 1KB minified - roughly 100x smaller than traditional analytics scripts. It captures everything you need while loading instantly:
- Pageviews and custom events
- Scroll depth and time on page
- Device, browser and OS information parsed client-side
- Page load performance metrics using the Navigation Timing API
- Revenue events for e-commerce tracking
Instead of cookies, visitor identification uses localStorage. This persists across sessions on the same device but doesn't follow users across different websites, maintaining privacy while providing accurate unique visitor counts.
3. Database-Level Aggregation for Real-Time Insights
Rather than aggregating analytics data in the application layer, I pushed all heavy computation to PostgreSQL using database functions. PostgreSQL excels at processing large datasets and by writing custom SQL functions, I get:
- Real-time statistics without caching complexity
- Automatic query optimization by the database engine
- Reduced application server load
- Type-safe results that integrate seamlessly with TypeScript
The dashboard queries statistics like total pageviews, unique visitors, average time on page, bounce rates and engagement metrics directly from optimized PostgreSQL functions. This approach scales elegantly as data grows.
4. Progressive Web App for Anywhere Access
Making Pure Metrics work offline was crucial for agencies and freelancers who need to check client metrics on the go. The PWA implementation includes:
- Service worker caching - Core app assets load instantly, even offline
- Background sync - Data updates automatically when connection returns
- Installable experience - Users can add Pure Metrics to their home screen or dock
- Push notifications - Opt-in alerts for traffic spikes and milestones
The result is an analytics platform that feels like a native app on any device, with instant loading and offline capabilities that traditional web analytics platforms can't match.
5. Revenue Tracking That Maintains Privacy
E-commerce sites need revenue analytics, but that doesn't require collecting customer data. Pure Metrics tracks transaction amounts, currencies, product categories and names - all aggregated data that provides business insights without storing any personally identifiable information.
No email addresses, no names, no shipping addresses, no payment details. Just clean revenue data segmented by country, product and time period.
Database Design: Security-First from Day One
One of my favorite architectural decisions was designing the database schema with Row Level Security policies from the beginning. Instead of writing authorization checks in application code (which can have bugs), security happens at the database level.
Every table in Pure Metrics has RLS enabled. Users can only query data for websites they own. Even if someone finds a way to bypass application-level checks, the database itself enforces access control. This defense-in-depth approach means security isn't dependent on perfect application code.
Supabase makes this elegant by integrating authentication directly into the database. The authenticated user's ID is available in SQL policies, making it simple to write rules like "users can only see pageviews for their own websites."
Subscription Management with Stripe Integration
Monetization was built into the architecture from the start using Stripe for payment processing. Supabase Edge Functions handle:
- Creating checkout sessions with proper metadata
- Processing webhook events for subscription updates
- Syncing subscription status to the database
- Enforcing plan limits at the database level
The beautiful part is that plan limits are enforced by RLS policies in the database. When a user tries to create more websites than their plan allows, the database rejects the transaction automatically. No application-level checks needed.
Lessons Learned Building Pure Metrics
1. Row Level Security Policies Are Non-Negotiable
Security should never be an afterthought. By implementing RLS policies from day one, I built a system where unauthorized data access is literally impossible. Users cannot see each other's analytics data, even if the application layer has bugs. This architectural decision provides peace of mind that no amount of application-level authorization code can match.
2. Edge Functions Are Superior to Traditional Backends
Supabase Edge Functions eliminated the need for traditional server infrastructure. The tracking endpoint, webhook processing and alert checking all run as serverless functions at the edge. Benefits include zero server management, automatic scaling and minimal latency since functions run close to users.
3. TypeScript Prevents Entire Categories of Bugs
Using TypeScript throughout the stack - frontend, edge functions and database queries - caught countless bugs during development. Supabase generates TypeScript types directly from the database schema, so the entire data flow is type-safe from database to UI component.
4. Security Must Be Built In, Not Bolted On
I implemented authentication, RLS policies, input validation and secure webhooks from the beginning. Adding security after building features is dramatically harder and inevitably leaves gaps. Starting secure means every feature is built on a solid foundation.
5. Progressive Web Apps Dramatically Increase Engagement
Making Pure Metrics installable as a PWA had an unexpected benefit: users treat it like a native app. They add it to their home screen, check it regularly throughout the day and appreciate the offline functionality. PWA features are significantly underutilized in web development.
Performance Benchmarks
The technical implementation delivers impressive performance metrics:
- Tracking script size: 0.9KB minified - negligible impact on page load
- Page load impact: Less than 10ms added to total page load time
- Time to interactive: 1.2 seconds even on slower 3G connections
- Database queries: Heavily optimized with strategic indexes and materialized views
- Edge function cold start: Sub-50ms response times globally
Try Pure Metrics
Live at pure-metrics.app with a 14-day free trial that doesn't require a credit card.
Pricing starts at €9/month for 1 website and 50,000 monthly pageviews - designed for indie hackers, freelancers and small businesses. The Pro plan at €29/month supports 10 websites and 200,000 pageviews, while the Agency plan at €149/month handles 50 websites and 5 million pageviews.
Core Features Available Today
- Privacy-first architecture - No cookies, GDPR-compliant by default, no personal data collection
- Real-time analytics dashboard - Watch traffic as it happens
- Geographic insights - Country-level data via Cloudflare edge headers
- Device intelligence - Comprehensive device, browser and operating system breakdowns
- Custom event tracking - Track button clicks, form submissions, downloads and any user interaction
- Revenue analytics - E-commerce transaction tracking with multi-currency support
- Smart alerts - Configurable notifications for traffic spikes, goal completions and anomalies
- Progressive Web App - Install on any device, works offline, native app experience
- Visitor segmentation - Filter analytics by device type, browser, OS and visitor type
Open Questions for the Community
I'd love to hear from other developers and website owners:
- What analytics features do you actually use versus what your current platform offers?
- How do you balance the need for user insights with privacy concerns?
- What would make you consider switching analytics platforms?
- For agency developers, how do you manage analytics across multiple client sites?
Drop your thoughts in the comments. I'm genuinely interested in understanding how different teams approach analytics.
The Tech Philosophy
Building pure-metrics.app reinforced some core beliefs about modern web development:
Privacy and analytics aren't mutually exclusive. You can gather actionable business insights without collecting personal data. Aggregate statistics, trend analysis and conversion tracking work perfectly well without knowing who individual users are.
Database-first architecture scales better. Pushing computation to PostgreSQL instead of handling it in application code results in simpler, faster, more maintainable systems. Databases are built for data processing - leverage that.
Security must be foundational. Row Level Security, input validation and authentication need to be part of the initial architecture, not added later. Every feature built on secure foundations is automatically more secure.
TypeScript prevents production bugs. End-to-end type safety from database to UI catches errors at compile time instead of runtime. The initial development might feel slower, but deployment confidence is dramatically higher.
Progressive Web Apps are underrated. The web platform has evolved to support native-like experiences. Service workers, installability and offline support make web apps competitive with native apps for many use cases.
Resources and References
- (https://pure-metrics.app/) - Try the live platform with a free trial
- Supabase Documentation - Comprehensive guides for building with Supabase
- React Simple Maps - Library used for country visualization
- Cloudflare Request Headers - Documentation on privacy-friendly geolocation headers
Closing Thoughts
The web development community faces an important choice: we can continue building analytics platforms that treat users as data sources to be maximized or we can prove that respecting privacy and gathering insights aren't contradictory goals.
pure-metrics.app is my contribution to that conversation. It demonstrates that modern web technologies - particularly Supabase's backend-as-a-service platform, React's component architecture and PostgreSQL's analytical capabilities - enable building sophisticated analytics while maintaining strong privacy principles.
For developers building similar projects, my recommendations:
- Choose Supabase or similar platforms that provide authentication, database and serverless functions integrated out of the box
- Implement Row Level Security policies for every table from day one
- Push analytical workloads to PostgreSQL using custom functions and materialized views
- Keep frontend tracking lightweight - every kilobyte of JavaScript impacts page performance
- Build Progressive Web Apps for better engagement and offline capabilities
The future of web analytics is privacy-respecting, performance-conscious and user-centric. What tools and techniques are you using to balance analytics needs with privacy principles?
Built with React, Supabase and TypeScript by AdriByte Studio - a software development studio focused on privacy-respecting web applications.
Top comments (0)