The fundamentals of web development at Revolut

The Revolut experience goes beyond mobile to also deliver web services such as our main Revolut site, the Revolut Business site, the customer Web App, the internal back office system, the support services chat, and a whole host of other small projects. Our web developers work hard behind the scenes to deliver an excellent experience — read on to discover how they work.

Web tech stack

To create and support such a wide range of complex web solutions, we use a variety of technologies and tools, including:

• React, the fundamental library for building UI;
• React Query library for network queries;
• Redux library for app state management;
• TypeScriptStyled Components and Bitbucket for code storage;
• TeamCity for build management (CI/CD);
• Rush for monorepo management;
• Sentry platform for error tracking;
• Kubernetes for automated app deployment, scaling, and management;
• REST API for frontend <-> backend communication.

For testing we use:

• Jest;
• Storybook;
• React testing library.

Cross-functional teams

Each one of our cross-functional teams is like a small startup; they’re self-led, with the freedom to innovate and develop new products and features. There are some general principles and recommendations that we use (such as React) that help keep all of our projects on the same page, but the rest is up to the team. For example, some teams use a Kanban board, some plan by sprint and run retrospective meetings. Each team chooses to work in whichever way is best for them, so that they can bring ideas to life and improve Revolut’s products.

Engineering principles of web solutions

As with all our engineering teams, our web teams follow Revolut’s foundational engineering principles. They’re specifically designed to streamline the development process and enable our web developers to create simple and elegant solutions. We break down big issues into smaller chunks, so that all of our pull requests have a clear and limited scope.

Writing clear code.The code that we create must be easy to read, understand, and maintain. All our developers use clear, meaningful, and descriptive names of variables, modules, and functions so that anyone can easily get the idea of a module or feature just by looking at its name and code.

Simplicity is key. Performance issues should also always be addressed mindfully at Revolut. We aim to keep things as simple and readable as possible, so that our products remain easy to use and hassle-free..

Security is our top priority. To ensure optimum safety, our web developers work closely with security engineers to address any concerns they may have about potential risks. We also run a security/FinCrime audit before launching any new product to keep risk to an absolute minimum.

Automated deployment

Our back-end systems and web front-end system components are hosted in certified secure cloud data centres, provided and managed by the Google Cloud Platform (GCP). This platform includes the Google Kubernetes Engine (GKE) for build management, which allowed us to solve the problem of automated deployment of web apps. Additionally GKE offers other benefits such as:

• Fast deployment
• Roll back in just a few seconds (older revisions are available for 3 months)
• Each build being available on its own subdomain, with the opportunity to see how it will look in the production environment
• Sites that are common in style which can share cookies and local Storage

Using GKE also allows us to easily split apps into smaller ones and deploy them in separate nginx containers. One of Revolut’s biggest web projects uses 18 separate web applications.

Optimised modular development

Our products use a lot of modules, libraries, and apps. Generally, modules are easier to test, localise, and support, but they need to be managed wisely. Previously, we worked with lerna, so it took us 20–25 minutes to run a project locally. Even the slightest change would trigger a rebuild that took around 30 seconds each time.

To speed things up, we migrated to Rush, a scalable monorepo manager for web projects. It solved our problems of long rebuilds and cache management, significantly cutting down the time spent on each project. We now have a pre-build of the app cache, so that changes can be applied pre-build to save a huge amount of time. The whole project build time is now 2–3 minutes rather than 20! To build the project and run all tests takes just 10 minutes.

Visual consistency

All web teams across Revolut use React, which is the basic requirement for building UI. We also have the Revolut UI-kit, the library of components that implements the current Revolut design system for web. It’s the same system we use in most frontend projects at Revolut. We use both of these tools to ensure visual consistency across all our front-end projects.

The Revolut UI-kit enables us to reuse high quality components. Our products therefore have a consistent look and feel, so are recognisable to Revolut customers, both internal and external. We encourage our developers to use common components when applicable, to ensure consistency and save them time. It has the added benefit of removing yet another “choice” from their routine. Using the UI-kit primitives can even be enough to build an MVP.

Most of our customers access our services through a mobile device, and we keep this front of mind when developing our products. We work with a mobile-first approach, starting with the design of the mobile version of web apps, and then moving onto the desktop version.

Quality management

The quality of Revolut’s web products is ensured by code review, auto tests written by developers, and user feedback. All of our testing is automated, but that’s simply because user feedback can take up a lot of time. For instance, new features for businesses have to be approved by clients and several teams within Revolut before we can release them. Not only do they need to have great functionality, they also need to be visually satisfying and user-friendly.

Back-office features are a lot less complicated in this respect. The main requirement is that they need to be stable and accurate when in operation. It’s a lot faster to receive feedback from the internal services who use them and they can be released in as little as two hours. If we need to work on large changes, we make sure to notify our support agents and give them time to look into it and test the developer’s version.

Join Revolut

Want to be part of creating something amazing? Check out Revolut’s Careers page to explore openings in our world-class Web Development team.