How we built the TotallyMoney car insurance web application
By Craig Robertson, Senior Software EngineerMay 23rd 2022
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.
Our car insurance technical stack
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
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.
Our car insurance CI pipeline
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.
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.
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.
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.
Step 5 - optional
If we determine for whatever reason the latest deployment is not healthy, we simply trigger a previous build which did work.
Putting engineers in the driving seat
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.