Inspired by BulletProof React, I applied its codebase architecture concepts to the Umami codebase.
What is Umami?
What is a project structure?
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:
I pulled the above information from the Umami docs.
What is a project structure?
In Bulletproof React, Project structure documentation explains about the purpose of files and folders in src folder and talks about the feature folder.
When you work in a team, it is crucial to establish and follow standards and best practices in your project, otherwise every developer has their own preferences and in the end, you will end up with a spaghetti codebase.
Umami is built using Next.js. We will review the following folders in Umami codebase:
src
app
component
lib
permission
queries
store
tracker
Conclusion
To manage a project, you need to put files and folders where they belong so later on, you will know where to look for. Put things where they belong.
You cannot place database queries inside a components folder as this components can only hold UI components unless your team has a different meaning to a component and then may be you can place the queries inside a components folder.
For example, Umami’s components folder actually holds hooks and other things, so it is not just the UI components but rather components in their “system”.
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
Top comments (0)