Project Structure in Umami codebase - Part 1.4

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

This article focuses on files and folders structure to understand the project structure and how its organized.

Prerequisites

1. Project Structure in Umami codebase — Part 1.0

2. Project Structure in Umami codebase — Part 1.1

3. Project Structure in Umami codebase — Part 1.2

4. Project Structure in Umami codebase — Part 1.3

In this part 1.4, we review the following folders in Umami codebase.

1. store.

2. tracker.

store folder

store folder has the following files:

In the store/app.ts, you will find the following symbols:

So Umami also uses Zustand to manage client side state. We also saw context folder in hooks folder. So Umami uses a combination of context and Zustand to manage its state.

tracker folder

In the tracker folder, you will find the following files:

tracker/index.js has the following symbols:

I found this track related code.

const track = (name, data) => {
    if (typeof name === 'string') return send({ ...getPayload(), name, data });
    if (typeof name === 'object') return send({ ...name });
    if (typeof name === 'function') return send(name(getPayload()));
    return send(getPayload());
  };

and in the docs, you will find the following:

In this case, this is an object. 

Conclusion

We reviewed the store folder and learnt that Umami uses a combination of Context and the Zustand to manage its client side state. We also reviewed the track function in tracker/index.js and found a relevant example in the documentation. May be it would be exercise for you check how other symbols translate to usecases found in the documentation ;)

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/umami-software/umami/blob/master/src/store/app.ts

2. https://github.com/umami-software/umami/tree/master/src/store

3. https://docs.umami.is/docs/tracker-functions#event-data

4. https://github.com/umami-software/umami/blob/master/src/tracker/index.js#L191