State management 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 state management?

Let’s find out.

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 state management?

In the context of frontend development, state management is about how you manage your application’s state. Whether its component specific or application wide, you need to use a common pattern across your codebase to avoid issues like props drilling, lifting state up or worse, causing re-renders too many times.

You can manage a component’s state using hooks like useState that React provides. For the global state management, you want to use libraries like Zustand or server cache state strategy.

In the OSS, I found Zustand and server cache state used commonly to manage state.

In this week’s series, you will how Umami manages its state. We will find out what libraries Umami uses, how the components and files are structured, how the data flows to manage its state, in the following pages:

1. Create a website

2. List websites

3. Create a goal

4. List goals

You will find 1,2 in the /websites and 3,4 in the website details page on Umami.

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/blob/master/docs/state-management.md