[[dashboard screenshot]]

Live Demo

You can interact with the live dashboard deployment here:

• Site: tf.saifulalom.com
• Admin Email: [email protected]
• Password: admin-password

Note: Feel free to use the public credentials above to explore the data ingestion panels, site profiles, and performance metrics.

As a developer who obsesses over performance, I wanted a clean slate. I wanted an analytics platform that could capture critical business metrics—total traffic, bounce rates, referral distribution, and geographical data—without introducing tracking cookies or sacrificing speed.

This is the story of how I built TrackFlow: an edge-native, privacy-first web analytics platform built on Astro, and Cloudflare Workers.

🎯 The Problem I Wanted to Solve

Every business owner needs to answer basic questions: How many people visited my site today? Where did they come from? Which pages are popular?

But the market standard tools like Google Analytics are massive compliance and performance nightmares. They load megabytes of JavaScript, track users across the entire web, and process data long after the request has left the user’s browser.

My mission with TrackFlow was to build a system that:

1. Ran completely at the edge for sub-millisecond response times.
2. Maintained zero tracking cookies to remain privacy-first by design.
3. Provided a minimalist, hyper-functional UI dashboard for fast business decisions.

🛠️ The Architecture: Scaling at the Edge

To achieve a 100/100 Lighthouse score on the dashboard while supporting rapid event ingestion, I designed a strict schema-first architecture.

Core Tech Stack

• Framework: Astro (Utilizing Server-Side Rendering & Islands Architecture)
• API Routing: Astro API route (For ultra-lightweight request handling)
• Database: Cloudflare D1 (Replicated SQLite at the Edge)
• ORM: Drizzle ORM (For type-safe queries and seamless edge migrations)

Here is how the project is structured under the hood:

[[add here directory tree or diagram showing src/db, src/pages/api, and src/assets/tracker.js]]

The telemetry flow is simple but incredibly fast. A lightweight embedded tracking script (src/assets/tracker.js) fires a payload containing non-identifiable browser metadata to our edge ingestion API route (src/pages/api/events.ts). The API handles parsing, validation via Zod, and streams the data straight into our Cloudflare D1 database instance.

🛑 The Challenges & Engineering Trade-offs

Building a production-ready analytics pipeline on an edge runtime comes with major constraints. You don’t have access to standard Node.js servers, filesystem operations, or heavy relational databases.

1. Ingestion Speed vs. Relational Integrity

When hundreds of websites hit your tracker simultaneously, database write-locks become a critical bottleneck.

• The Trade-off: I had to choose between massive relational data tables or a flat, schema-first design. I decided on a highly optimized event schema (src/db/schema/event.ts) utilizing structured string lookups rather than heavy multi-table joins. By storing absolute URLs and parsing referrers cleanly in the query layer, the write speed remains completely unblocked.

2. Cookie-less Sessions (The Privacy Paradox)

How do you track unique visits and calculate bounce rates without dropping tracking cookies on the client’s browser?

• The Solution: I engineered a privacy-safe session system. Every time an event hits the ingestion endpoint, we combine the client’s IP range, user agent, and websiteId through a cryptographic hash that rotates every 24 hours. This creates a secure, temporary sessionId that safely tracks user paths without storing any persistent personal identifying information.

🤝 Collaborative Growth & Rigorous Workflows

As the platform grew, the code structure began to feel cluttered. Originally, database aggregation queries like db.select().from(site) were embedded directly into the frontmatter of our Astro page controllers (src/pages/dashboard/sites.astro).

Working closely with peers and technical collaborators, we realized this violated clean-code separation of concerns and would make scaling dashboard panels unmaintainable.

To resolve this, we restructured the system into a clean Service-Oriented Architecture:

export const siteService = {
  /**
   * FIND ALL: Retrieves all site profiles registered in the system
   */
  async findAll(db: D1Instance): Promise<Site[]> {
    return await db.select().from(site).execute() || [];
  }
};

By introducing this service abstraction layer, our Astro frontmatter dropped to just a single clean call, isolating backend changes completely away from visual dashboard interface components.

Furthermore, we established explicit engineering guidelines to scale contributions smoothly. We designed automated GitHub issue workflows and a comprehensive pull request layout to ensure every performance addition—like our platform traffic distribution charts or geographic maps—is peer-reviewed and tested under identical edge environment constraints using Vitest.

[[add here screenshot of github issue templates or PR checklist code]]

📈 What I Learned

Building TrackFlow taught me that software engineering isn’t just about making things work; it’s about anticipating bottlenecks, managing architectural constraints, and treating user privacy as a first-class feature.

By building at the edge with Cloudflare and Astro, TrackFlow provides a masterclass in modern web architecture: showing that web apps can be blindingly fast, visually striking, and entirely privacy-focused all at the same time.