The Tech Stack of an Open Source Web Analytics SaaS

Andrii Romasiun — Wed, 11 Oct 2023 01:51:28 +0000

Have you ever thought about the technologies and frameworks that go into building and running a web analytics SaaS? The tech stack of a company is an important factor in its product development and growth. It's like a recipe, with each component contributing to the overall success of the platform.

I've always been curious about what technologies or languages other companies use to build their products. It's always interesting to see the running costs of companies, whether you need this information for your own side project or just out of curiosity.

And now it's time to reveal our tech stack - the tools and technologies that power our open-source and privacy-focused web analytics SaaS, Swetrix.

Languages

TypeScript: all the backend is written using this language. We chose it due to how powerful yet simple this language is and a huge support of the community.
JavaScript: used on the frontend side in combination with React. We chose not to migrate to TypeScript yet due to how readable and non-bloated React code using simple JS is, the types validation is done via Prop-types library instead.

Frameworks

Remix: in my opinion it's the best frontend framework there is. It allows your React app to be rendered server-side (you may even set it up in a way where not a single byte of JS is loaded to client!). They have great docs, often release updates and overall is a very pleasant framework to work with.
Tailwind CSS: using this framework saved us a ton of time designing and making our frontend. IMO it was one of the best technical decisions to migrate from SCSS to Tailwind.
billboard.js: we use it as a charting library on our dashboards. Quite a decent and customisable charting library, based on D3.
Nest.js: all our APIs are written using this framework. It's a very scalable, fast, efficient and widely supported framework. The more you use it the more you appreciate it, being able to share the entities and interfaces between the endpoints, the methodologies it uses makes you love it more and more every day. Also it's based on TypeScript which is great for making reliable APIs.
Python Django: our blog (you're reading it right now!) is written using this framework.

Databases

MySQL: one of the most popular choices among SaaS services. Very reliable and easy to use database, especially in combinations with ORMs like typeorm. We use it for storing data about users, projects, alerts and so on.
Clickhouse: super fast and efficient column oriented database. It's perfect for data aggregation queries and storing enormous amounts of data. We use it for storing analytics data.
Redis: a great and well-documented in-memory key-value database. We use it for rate-limiting, caching and session management.

Hosting & Infrastructure

Hetzner: very reliable and affordable hosting & dedicated servers provider. Perfect for side-projects and SaaS companies.
Fly: we use it for hosting our frontend code. It's a great, scalable and affordable service which allows your app to run in several regions across the globe which will make it load very fast.
Njalla: great privacy-focused domain registrar. Fair pricing (they also accept crypto), easy to use dashboard. Supports 2FA, PGP, API access.

Email

Postmark: we use it for outbound mailing (transactional and broadcast emails). They provide a lot of integrations into any codebase, plus they give free $75 for bootstrapped startups.
Fastmail: inbound emails provider. Very simple and easy to use.

Payments

Paddle: subscriptions and credit card processing service. Their documentation is amazing, dashboards are quite simple and easy to use.

Support

Intergram: an amazing, Telegram-based and open-source in-app support chat. Easy to customise and integrate into existing apps.

Development

VS Code: beautiful semi code editor / semi-IDE, especially when using extensions. The best code editor for web development.
Github: source code hosting and versioning, we also host our tasks kanban board there.
pnpm: fast and disk space efficient JavaScript package manager.

Other

Swetrix: we use our tool to monitor our websites traffic and performance🙂.
UptimeRobot: quite a decent uptime monitoring service. Their free tier includes 50 monitors, which is totally more than enough for us.

DEV Community: Andrii Romasiun