As I have gained experience building software I have realized that most important skill I can build is understanding existing code bases. You can learn about a new technology stack or framework much faster by reading existing code base that uses those technologies and trying to build an existing app in a step by step manner. Today, I wanted to learn how to build a web analytics service like Google Analytics. Google Analytics is the most widely used web analytics service on the web. I found a popular open source project umami.
Umami is a simple, fast, privacy-focused alternative to Google Analytics.
We will first start by understanding the project from outside in and then we will build the backend of umami in a step by step manner.
Tools Used
- VS Code
- Node.js
- DBeaver for creating ER diagram and as database client – Link
- Httpie
- Git
- MySQL
Project Details
- Github Repo – https://github.com/mikecao/umami
- 11,296 stars
- 1,580 forks
- 132 contributors
- 47 releases on Github. Last 15 days ago
- 1379 commits
- The project is 1 year and 10 months old. First commit was made on 17th July 2020
- Close to 10,000 lines of modern Javascript code(used Tokei). This includes both backend and frontend
- MIT license
Technology Stack of Umami
- Node.js 12+. Modern Javascript codebase.
- Nextjs as backend web framework for REST APIs
- Prisma as ORM
- Postgres or MySQL as database
- Reactjs as frontend framework
Next.js is a framework to build server-rendered React web applications. It takes building React based web applications to the next level. The main reasons you would want to use Next.js are:
- Zero config but you can easily override defaults
- Extensible
- Server-side rendering
- Build both dynamic and static websites with a single framework
- Supports all modern browsers
- Convention over configuration
- Code splitting
- SEO Optimized