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. Email: ramu.narasinga@gmail.com

Tired of AI-generated code that works but nobody understands? 

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced. 

Get started for free — 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