DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on • Originally published at thinkthroo.com

API layer in Umami codebase — Part 1.0

#umami #opensource #api #architecture

Inspired by BulletProof React, I applied its codebase architecture concepts to the Umami codebase.

You might be wondering:

  1. What is Umami?

  2. What is an API layer?

Let’s find out.

Press enter or click to view image in full size

What is Umami?

Umami is an open-source, privacy-focused web analytics tool that serves as an alternative to Google Analytics. It provides essential insights into website traffic, user behavior, and performance, all while prioritizing data privacy.

Unlike many traditional analytics platforms, Umami does not collect or store personal data, avoiding the need for cookies, and is GDPR and PECR compliant.

Designed to be lightweight and easy to set up, Umami can be self-hosted, giving users full control over their data.

A detailed getting started guide can be found at umami.is/docs.

Quickstart

To get Umami up and running you will need to:

  1. Install the application

  2. Log into the application

  3. Add a website

  4. Add the tracking code into your website HTML

I pulled the above information from the Umami docs.

What is an API layer?

In the context of frontend development, API layer is about how you are fetching the data from a server and how you are mutating your data.

Become a member

Checkout Bulletproof react’s definition for API layer.

You could use fetch, axios or even better, react-query. I found react-query being used in open source projects such as Supabase, Umami etc.,

In the upcoming articles, we will review how Umami has implemented API layer and learn the best practices.

I would be more interested in the where this API related is located and how they are imported, what sort of pattern is in place and is it consistent across the codebase? When you stay consistent with your patterns, you reduce technical debt and ship stable products. Even if there’s a bug, you know where to look for and hot fix.

I am choosing the below routes to understand the API layer in Umami codebase.

  1. /websites

  2. /links

  3. /websites/[siteId]

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

I spent 200+ hours analyzing Supabase, shadcn/ui, LobeChat. Found the patterns that separate AI slop from production code. Stop refactoring AI slop. Start with proven patterns. Check out production-grade projects at thinkthroo.com

References:

  1. https://github.com/alan2207/bulletproof-react/blob/master/docs/api-layer.md

  2. https://umami.is/docs/collect-data

  3. https://github.com/umami-software/umami

  4. https://umami.is/docs

Top comments (0)