Blog
Project Structure in Umami codebase - Part 1.2

Project Structure in Umami codebase - Part 1.2

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

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

  1. components.

  2. lib.

components folder

components folder has the following files and folders in it:

In Umami codebase, components is comprised of generic UI components under common folder. boards, charts, input, metrics and svg all have relevant components that are placed inside their respective folders.

hooks are also inside components folder. You would normally locate the hooks in src/ folder. Wonder why they decided to place the hooks inside the components. This is about team’s preference, there is not hard set rule, as long as you know where to look for hooks and it is documented somewhere.

hooks folder also has context and queries folders.

lib folder

lib folder has the following files

lib has a bunch of files and these files follow Single Responsibility Principle, meaning if you pick filter.ts, you will find functions named percentFilter and paramFilter and so on.

Similarly, if you check format.ts, you will find the following functions defined in format.ts

So, if you want to define another function formatString, for example, you cannot place this function in filter.ts because it should be in formatString.ts file

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/tree/master/src/components

  2. https://github.com/umami-software/umami/blob/master/src/lib/format.ts

  3. https://github.com/umami-software/umami/blob/master/src/lib/filters.ts