Components structure in Umami codebase — Part 1.0

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 a components structure?

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 a components structure?

In the context of web application, you have a page.tsx that renders the entire page and then you would have components broken down to create a maintainable page.

Thinking in React helps you understand how you can break down a user interface into components.

Bulletproof React provides these best practices for components structure:

1. Colocate things as close as possible to where it’s being used

2. Avoid large components with nested rendering functions

3. Stay consistent

4. Limit the number of props a component is accepting as input

5. Abstract shared components into a component library

In this series, we will understand how Umami applies the components structure to stay organized.

The approach we take is simple:

1. Pick a route, for example, https://cloud.umami.is/analytics/us/websites

2. Locate this route in Umami codebase

3. Review how the components are imported and organized.

4. We repeat this process for 3–4 pages to establish a common pattern, see if there’s any exceptions.

About me:

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

Email: [e-mail]

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/umami-software/umami/tree/master/src/app/(main)/websites

2. https://github.com/alan2207/bulletproof-react?tab=readme-ov-file

3. https://github.com/alan2207/bulletproof-react/blob/master/docs/components-and-styling.md