Ben Keirl Portfolio LogoBen Keirl Portfolio Logo

Kardio

Date Published

Kardio banner

Project Overview

Kardio is a high-performance web analytics platform designed to give businesses instant visibility into their website traffic, user behavior, key goals and revenue. Built to process and present data in seconds, Kardio eliminates the frustrating reporting delays common in enterprise analytics tools. It empowers users to track sessions, monitor conversion rates, and catch critical site issues the moment they happen.


The Problem

With the industry-wide transition from Universal Analytics to GA4, many users found themselves waiting hours—or even days—to see essential data. Kardio was built specifically to bridge this gap. It isn't designed to replace GA4's deep historical reporting, but rather to supplement it by serving as the ultimate real-time dashboard for today and the past week. Kardio ensures that decision-makers always have access to fresh, unsampled data to make rapid, informed decisions.


Under the Hood

Kardio was built to be lean, fast, and highly scalable. The platform leverages modern web development frameworks, specifically Next.js, paired with an aggressive Redis caching strategy. Instead of querying a massive database from scratch on every load, Kardio incrementally caches data throughout the day. This means heavy reports are built ahead of time and served in milliseconds, handling extremely large datasets effortlessly without the endless loading spinners. Cron jobs ensure reports are always fresh and cached shortly before a user requests them. This strikes a balance between performance and lightweight, real-time querying.


Key Features

  • Blazing Fast Real-Time Analytics: Website events flow into the dashboard within seconds. Users can instantly track active sessions, revenue, transactions, and goal completions without any data sampling.
  • Automated Outage Detection: Kardio actively monitors the data stream. If tracking suddenly drops, indicating a critical website outage or broken functionality, the system automatically sends an email alert to the team.
  • Core Web Vitals (CWV) Monitoring: The platform periodically runs CWV tests (LCP, INP, CLS etc) across key page templates. It charts historical performance, flags sudden spikes (e.g., a new hero image hurting load times), and offers detailed actionable fixes.
  • Custom Alerts & Notifications: Users can define custom thresholds for any tracked metric. Whether it's a drop in revenue, a spike in bounce rate, or a new user record, Kardio proactively notifies the team.
  • Seamless API Integrations: Kardio plays nicely with the broader ecosystem. It connects directly with GA4 to display historical data alongside real-time metrics, and integrates with Google Ads to pull in ad spend and ROAS data.
  • Scheduled Reporting: Automated daily summary emails keep stakeholders and teams aligned on performance at a glance, without requiring them to log into the platform.


The Full Package

In addition to the web app itself, we also have a slick brochure site and documentation site to help users set up their installation.

Technology Used

NextJS

A React-based web framework that enables server-side rendering and static site generation. Perfect for building fast, production-ready web applications.

React

A JavaScript library for building interactive user interfaces through reusable components. The go-to choice for modern frontend development.

Javascript

The programming language of the web, enabling interactive functionality on websites. Essential for modern web development.

Node JS

A JavaScript runtime for server-side development. Popular for creating RESTful APIs and real-time applications.

Github

A web-based platform for version control and collaboration using Git. The industry standard for code collaboration.

Sass

A CSS preprocessor that extends CSS with variables, nesting, and mixins. Helps write more maintainable stylesheets.

Npm

The default package manager for Node.js with millions of JavaScript packages. Essential for modern JavaScript development workflows.

Tailwind

A utility-first CSS framework for rapid UI development. Highly customizable and optimized for production.

Vercel

A cloud platform for static sites and serverless functions. Provides instant deployments and global CDN.

Google Cloud

A suite of cloud computing services including storage and machine learning APIs. Trusted by enterprises for scalable applications.

Sql

A language for managing and querying relational databases. Essential for backend development and data analysis.

Kardio ensures that decision-makers always have access to fresh, unsampled data to make rapid, informed decisions.