← Back

Tech stack of Splitbee

·

721 Views

·

Tobias Lins

Frontend

⚡️ Next.js / React

We are using Next.js by Vercel to power our frontend. You 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 you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

  • 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 Max Stoiber, Timo Lins, Laurids Kern and Tobias Lins. You will receive the feedback via email or can view it in the powerful dashboard.

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 + TimescaleDB

We are using PostgreSQL to store all data. The Timescale extension allows us to efficiently query and aggregate time-series data. We can archive 10-100x faster queries than using native PostgreSQL, InfluxDB or MongoDB.

🧰 TypeORM

TypeORM is an ORM that helps us to write & query data. You can simply create a new table by adding annotations to a Typescript class. It works perfectly together with TypeGraphQL.

  • Database migrations amazing

🎡 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. They are simple micro-services written in Typescript (they support all different

  • Your code runs within milliseconds of your users worldwide
  • Say goodbye to cold starts—support for 0ms worldwide

🔑 Cloudflare KV

Cloudflare KV is a distributed key-value storage that is used to provide the CF workers relevant information for each request. We also use it to store the pinned version for A/B testing.

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 add's caching and support for table data.