What is Area Code?

Area Code, (AC) as we call it at Fiveonefour, is a monorepo containing a reference architecture for a classic transactional application that you later added an analytical layer to.

At Fiveonefour, we created the OSS MooseStack—a framework that makes it easy to bootstrap and maintain/extend an analytical backend on top of an analytical database.

We also built Sloan, a set of MCP tools designed to interact with MooseStack projects and the underlying database. Naturally we wanted to show how all of these could be used together in a comprehensive example. Take a look at the public repo!

In this article, we will cover the user facing analytics (UFA) side of AC. We also built a whole data warehouse side to AC, but this is a discussion for another day.

Why we built Area Code

One does not add an analytical layer to their architecture just for fun. It's usually to fulfill needs that your current transactional database struggles with. This is why AC is not a simple example, but a more complex one on purpose. We still made it as simple as possible so that people looking and/or using the example would not be lost in meaningless details.

One recurring problem a lot of companies are starting to face is the need for speed for their AI layer and their user facing analytics. This is where MooseStack comes in. Empowering your engineers to quickly add that analytical backend on top of an analytical database, like ClickHouse for example.

In this kind of architecture, a sync layer is essential—it ensures that all the row-level CRUD operations in your transactional database are reliably synchronized to your analytical database.

We built Area Code to demonstrate how this entire architecture can work together. We chose to do it in a monorepo for the following reasons

• We strongly believe in all the benefits that a monorepo brings to the table
• We wanted to show how to reuse typescript types between your transaction and analytical layers for an even faster integration
• We wanted to let anyone be able to clone a single repo locally to be able to have this whole architecture running on your machine in minutes. A script seeds all the databases with millions of rows
• Adding on the above, we wanted to empower developers to use Area Code as a starting point. I.e. be able clone AC and start their own project from it

A great side benefit we got from creating AC is the ability to test all aspects of the lifecycle of a project that uses MooseStack in a monorepo. Along the way, we uncovered and fixed numerous issues—well before they could impact users. We found AC to be an invaluable tool for us to do early testing of new versions of MooseStack. One of our core pillars for MooseStack is “the best DX”, so by dogfooding it internally, like with AC, we constantly evaluate its DX and improve it.

Where the journey started

We were in discussions with a potential enterprise client who needed proof of how easy it could be for them to add that analytical layer on top of their current transactional layer. They had some very popular reports that could take a minimum of 2.5min to load, which had garnered a lot of resentment from their clients. They were the classic scenario we describe at the start of the article.

In order to demo it to them, our CEO set out to create a quick mockup of what that monorepo would look like. He quickly realized how powerful a tool that could be for us, and how much it could help a lot of other companies in their quest to understand how to integrate this analytical layer in their current stack.

Just so happened that the whole company was meeting offsite that week. He pitched the project and we got onboard instantly. A couple of us started working on it and we established some of the core pillars behind how we wanted to build Area Code.

• It represents a classic system onto which you want to add an analytical layer on.
• Great DX : cloning the repo and using it locally can be done in minutes and the dev lifecycle is natural to use.
• Shows the power of the analytical layer compared to the transactional layer for complex user facing analytics and AI agents.
• Code is easy to replace with your own.
• Shows a clear path to production.

Here is an example of what the frontend shows–here with 4 millions rows in the Foo table on both databases. The same complex UFA queries are implemented in both the transactional and analytical layers and shown in the base UI. Purpose being to show you some of the benefits of the analytical backend, if you weren't convinced yet. We did spend some time making sure it was a proper comparison by optimizing the queries on the transactional database.

We learned a lot

Along the way, we faced a lot of interesting challenges and we felt the community would benefit from our learning, so we created this series of articles to expose them. We currently have 5 of them planned. This is the introduction.
The many learnings are coming soon! We will update this article with links to them once they are released. Here is a teaser of the first 2:

• Integrating MCP tools in your AI chat : remarkably easy with the new Vercel AI SDK v5
• Supabase-CLI and Drizzle : getting the best of both of them to improve your DX

In the meantime, we encourage that you check out Area Code! We aspire to be the best versions of ourselves and create the best tools possible, so we welcome feedback with open arms.

See you soon!