Frontend
⚡️ Next.js / React
We are using Next.js by Vercel to power our frontend. We don't need to take care of bundling and get server-side rendering for free.
🌊 Tailwind CSS
Tailwind CSS is a highly customizable, low-level CSS framework that gives us all of the building blocks we need to build designs without any annoying opinionated styles.
- Fastest way to write styles (no commas & quotes)
- Styles will not bloat your HTML/JSX as inline styles does it
- Powerful IntelliSense Plugin for autocomplete
⛓ urql
urql is a lightweight GraphQL client for React made by Formidable. It is a great alternative of apollo-client . We use it to fetch data from the GraphQL backend.
- Lightweight and well maintained
⚙️ GraphQL Code Generator
We use GraphQL Code Generator to generate Typescript typings & urql hooks from your GraphQL backend. There are plugins for other clients, Java, Reason & .NET that will generate typings for those.
📊 recharts
We are building our charts using recharts. It's built on top D3 and allows you to compose charts using React components.
- Great documentation
- Easy to customize
🐠 Feedback Fish
feedback.fish allows us to gather feedback using a simple widget on the dashboard. It's a service made by friends (Max Stoiber, Laurids Kern) and us (Timo Lins, me). This helps us receive the feedback from our customers, with minimal friction.
Backend
🌳 Node.js
All backend parts are written in Typescript using Node.JS. We're using PM2 as process management tool. It automatically restarts services if they fail.
📜 BullMQ
BullMQ is the fastest, most reliable, Redis-based distributed queue for Node. It allows us to distribute the workloads to multiple workers. Long running concurrent jobs are also distributed via BullMQ.
💾 PostgreSQL + Clickhouse
We are using PostgreSQL to store all data that is not analytics data. All analytics data gets stored in Clickhouse. Clickhouse is a column-oriented database developed by Yandex that allows us to process 100 of millions of records in realtime.
🧰 Prisma
Prisma is an ORM that helps us to write & query data from our Postgres Database. It’s fully type safe by generating a typescript client from the Prisma Schema.
- Database migrations are amazing
- Fully Typesafe
🎡 TypeGraphQL
We use TypeGraphQL to create the GraphQL schema, types and resolvers only with TypeScript, using classes and decorators!
- Works perfectly with TypeORM
Analytics Backend
🤖 Cloudflare Workers
We heavily rely on Cloudflare Workers. We use it four our micro-services that we write in Typescript. Our tracking script sends all requests to a Cloudflare worker, which prepares the data for further processing. It also returns necessary data for A/B testing.
- The code runs within milliseconds no matter where you are
- Deploys within a few seconds
- Can be used as proxy to modify data on edge
- Perfectly suited for A/B testing
🔑 Cloudflare KV
Cloudflare KV is a distributed key-value storage that is used to provide the CF workers relevant information for each request (project data). We also use it to store the pinned version for A/B testing.
🗂 RabbitMQ
RabbitMQ is our main message queue that takes all analytics events that should be processed. We’ve multiple workers that are processing all messages. Clickhouse takes the events from RabbitMQ and stores them into a table. An automation worker is watching events to trigger automations on time.
Website
📃 react-notion
react-notion is a React renderer for Notion pages. Use Notion as CMS for your blog, documentation or personal site. This blog is also powered by react-notion! Want to learn how? Check out our simple tutorial: https://splitbee.io/blog/notion-as-cms-using-nextjs
- Fast – Up to 10x faster than Notion*
🔗 notion-api-worker
We built notion-api-worker to query Notion's private API in a simpler way. It also adds caching and support for table data. It is built on top of Cloudflare Workers.
