How we built the TotallyMoney car insurance web application

TotallyMoney’s car insurance service was built in early 2021, so customers can quickly and easily get a car insurance quote.

From the start, we knew we wanted to leverage the speed and simplicity of static site builds, as this will allow us to develop and deploy quickly, as well as reduce overall complexity.

Pairing static builds with our car insurance build pipeline allows us to move fast with agility, deploying quickly and safely, due to the simple nature of static websites.

Next.js - static website building 

We use Next.js’s static site builds to create a static bundle of the application, ready for it to be deployed to an AWS S3 bucket. Next.js’s opinionated nature on how it wants to work is welcomed. That guides us down the correct path on how we should implement features.

TypeScript - programming language

Like many other tech businesses, TotallyMoney is currently undertaking the great migration from Javascript to TypeScript. With many new projects at TotallyMoney being initialised with TypeScript from the very start, this project was no exception. This gives us confidence in the code we are writing/reading to do what we expect it to do.

CloudFront - Content Delivery Network (CDN)

S3 - static web storage 

Once we have the static site bundle from Next.js, we upload it to an S3 bucket overwriting the previous static build.

Lambda - serverless computing platform

We have several backend AWS Lambda services which serve data to the web application. This includes getting the customer’s car insurance instant quote estimate and determining what state the customer should be in.

ConfigCat - feature flag and experiments

We use ConfigCat to enable and disable feature flags and experiments on the fly, without having to redeploy our application. This allows us to move fast on new features and quickly experiment with features in production. In some cases, it also serves as a quick safety net if a newly-deployed feature is not working as we expect. If that’s the case, we can quickly turn it off, with no rollback required.

Loggly - log aggregation and application monitoring

We use Loggly to gain visibility on the general health of the application, from a network and API request perspective. All production applications at TotallyMoney have a dedicated dashboard, informing the teams of the overall health of the application. If there’s something wrong, the specific teams can spot it quickly, then pinpoint exactly what’s wrong.

CircleCi - build pipeline

CircleCi is our CI pipeline of choice. We enjoy orbs for the ease of use, and the rich analytical features it offers for builds. This ensures we are constantly measuring and improving the health of our pipeline.

Cypress - E2E testing

Cypress is fairly new to the visual E2E testing scene, but has proved to be a great asset in our toolkit at TotallyMoney. Its ease of use and rich GUI is a delight to work with.

React Testing Library - unit/integration testing

We like React Testing Library, as it allows us to easily mimic how the customer would use our react components in the real world, basing our assertions against that. So, we can get even more confidence in the code we are shipping, due to the wide coverage we get from this style of testing.

We use CircleCI for all of our continuous integration needs, making use of the rich orb plugins that abstract cumbersome scripts into neatly packaged commands. Marrying this with the rich analytical data it gives us from flakey and slow tests ensures we are measuring, learning and improving on every build.

Lint, unit test, TypeScript check 

Ensures that anything in main conforms to our code standards, passes unit/integration tests and TypeScript is happy. Thus keeping main as healthy as possible.

End2End tests

Before we deploy any code to our stage and production environments, we want to ensure that the changes we have made work across the full stack including the backend Lambda services. We achieve this by building the static web application in CI and running the Cypress tests against this fully built stack.

Deploy stage

Once Step 1 has been completed successfully, we build a static stage version of the application and deploy it to the stage environment S3 bucket. From here anybody at TotallyMoney can test the stage web application via the stage URL.

Hold deploy production

We make use of CircleCi’s request-approval option to only deploy to production on manual human intervention. That ensures production only contains builds we are happy with.

Deploy Production

Once Step 3 has been manually triggered, we build a static production version of the web application and deploy it to the production S3 bucket. This overwrites the previous version contained in the bucket, invalidating any caches and then serving the latest version to customers.

Rollback

If we determine for whatever reason the latest deployment is not healthy, we simply trigger a previous build which did work.

At TotallyMoney, engineers are empowered and enabled to build it, own it and fix it. That ranges from setting up the S3 buckets and CDN in AWS, writing E2E tests, managing CI, configuring feature flags and logging, writing lambdas to serve the frontend and of course, creating web application features that millions of customers use.

All of this makes engineers at TotallyMoney care deeply about the applications we develop, because we own it all. We nurture the application from start to finish, digging deep into all aspects. Because of this empowerment, ultimately we can succeed in TotallyMoney’s mission to help everyone move their finances forward.