Inspired by BulletProof React, I applied the codebase architecture concepts to the Umami codebase. You might be wondering:
What is Umami?
What are project standards?
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:
I pulled the above information from the Umami docs.
What are project standards?
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.
By project standards here, I mean the following:
ESLint configuration.
Prettier configuration.
Stylelint configuration.
Husky configuration.
Absolute imports.
File naming convention.
You can include your own project standards, depending on your team needs. I also reuse the term ‘tooling’ for project standards sometimes. I referenced the project standards used in Bulletproof React and came up with this list.
In the next part, we will review Umami’s ESLint, Prettier and Stylelint configurations.
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)