Upgrading the Checkatrade Mobile Application

CLIENT INFO

Checkatrade is a platform set up to connect tradespeople in the UK with homeowners who need a given service.

Industry

Home services

Company type

Enterprise

Region

United Kingdom

tech INFO

Checkatrade's React Native app upgrade involved rebuilding key sections and adding Quotes and Invoices.

Technologies

React | React Native

Platforms

Mobile | Cross-platform

Tech Stack

highlights

Let's connect

Before 14.5s

After 2.5s

35k

lines of code

months of work

800

code commits

88%

decreased shimmer render time

50%

quicker load times for chats on subsequent visits

50%

faster rendering time for chats

18%

less frame junk when scrolling

before

The refresh time was 5-11 seconds

after

The refresh time was reduced to ~2 s

Instant Preview

Developers can instantly preview code changes on real devices without a complex setup.

Let's connect

Checkatrade Project highlights

Seamless integration
Scalability
Better user experience
Lasting results

Let's connect

CHALLENGE

The purpose of our collaboration with Checkatrade was to deliver a first-rate mobile app working on multiple platforms. The client already had a React Native application but needed its key sections rebuilt and migrated from an old legacy platform into the app. A dedicated team of Callstack developers was to help with that.

work done

Checkatrade needed to have the main sections built natively into the app. Previously, for these important workflows, they were iframing in the web page version from their legacy portal, which hindered the app performance.

To kick off the project, Maciej Jastrzębski selected the technologies to use. Aiming for instant releases, we chose to reuse existing, well-supported libraries such as

react-native-navigation,
react-native-pager-view,
and Lodash.

Initially, we focused on the Jobs, Photos, and Reviews sections. Each area was created with the user in mind.

Thanks to the added functionalities, the registered tradespeople can now showcase their work and conveniently connect with their customers in the local area.

define

Identified confirmed/reported issues such as re-renders and created a backlog for potential improvements.

measure

Used Macro tool measurements.

ANALYZE

Selected the most promising performance changes.

IMPROVE

Implemented changes following React Native best practices.

CONTROL

Re-measured with the Marco tool and compared to the 4.58.0 native version.

Deployment

Developed the release process for both Android and iOS.

API DESIGN

Proposed an API based on the Rive Android library features.

INTEGRATION

Implemented Rive SDK integration for Android and created an example app for testing.

iOS SUPPORT

Extended the integration to iOS after successful Android testing.

AUTOMATION

Created a Github Action workflow for automated library releases.

PUBLIC RELEASE

Made the library publicly available on platforms like CocoaPods and Maven.

DEPENDENCIES

Managing dependencies, including Expo and react-native packages for each new release.

RELEASES

Automating the release process with custom GitHub Actions.

TRAINING

Providing React Native training through pair programming, code reviews, and workshops.

Loosely Coupled Mini-Apps

Ensuring independence between mini-apps while maintaining necessary communication was a priority. The team addressed this by:

Isolating client states and minimizing shared states.
Allowing server state sharing through a centralized query client.

Navigation Complexity

Balancing centralized and decentralized navigation posed challenges. A centralized approach was chosen to simplify integration during initial development, with flexibility for future changes.

Dependency Maintenance

Managing native and JavaScript dependencies required meticulous configuration, streamlined by tools like rnx-align-deps and Re.Pack’s shared fields.

CODE REFACTORING

Kicked off the project with refactoring the whole socket.MIGRATION Migrated the codebase to TypeScript.

MIGRATION

Migrated the codebase to TypeScript.

DEPENDENCIES

Upgraded major dependencies such as Expo, React Navigation, and React Query.

PAYMENTS

Created two options: In-app purchase with Google Play or App Store and credit card payment.

linking

Sorted out links, integrated content, and implemented html rendering.

We provided full front-end support, project configuration, feature parity, and expert advice on technical and user experience. We also implemented a new design guideline, including dark mode with auto theme detection.

RN PAPER

Forked the React Native Paper library.

Established continuous integration for automated code updates.

testing

Set up a Storybook for component testing.

design

Developed the basis of the design – color, layout, and typography.

Once we had the basics down, we started working on the UI library components. The components we developed included: AppBar, TextField. Button, Icon Button, Toast, which included animation and swipe-to-dismiss, Match Status, Search, and many more!

Apart from all the fixes and improvements, we provided metrics that should be tracked over time so the client knows exactly what to monitor and correct to maintain great performance levels long term.

16.8s

App start time, before 48.5s

8.6s

Report screen load time, before 15.9s

2.5s

Sending a message, before 14.5s

60FPS

Average FPS on LHN

2.6s

Search screen load time, before 11.8s

Together

we acted as staff augmentation within Advantys’ team.

Engaged

in collaborative problem-solving and solution exploration.

supervised

by Advantys' CTO, the project utilized GitHub, Notion, and Slack for communication.

migrating

from a custom server-side rendering (SSR) solution to Next.js

Focusing

on Core Web Vitals metrics

Optimizing

a large shared JS bundle

Introducing

Fast Refresh for accelerated development iterations

The introduction of Fast Refresh in Next.js further accelerated development iterations. All in all, it contributed to an enhanced user and developer experience.In a span of several months, our team effectively overhauled the AutoZone app's performance, which initially struggled on both desktop and mobile devices. To find out more about the whole AutoZone project, head over to the case study on main case study title.

strong

architecture with professional maintenance and continuous updates

high

code coverage with quality-compliant unit and integration tests

Comprehensive

testing, including end-to-end.

Faster

time-to-market with mobile process automation.

New PoC

features like biometrics and mobile health kit integration.

Last but not least, our collaboration significantly enhanced the knowledge of Thriva's development team regarding React and React Native.

Students new to programming and React Native
Web developers unfamiliar with device APIs and native apps
Native developers exploring web app frameworks and React Native's UX potential
React Native developers prototyping and sharing ideas
Library maintainers creating examples and documentation
Users providing reproducible cases for bug reports
Speakers and workshop presenters conducting live coding sessions

“The collaboration was great throughout, with Callstack engineers seamlessly working as part of our agile teams.”

Gareth Jenkins - Head of Engineering Trades Product

RESULTS

The intense transformation efforts resulted in moving Checkatrade off unwanted legacy systems.

All the enhancements helped to massively improve the user experience in key areas of use. Ever since the notable features were rebuilt, the churn rate has steadily dropped.

Screenshots with jobs, images and reviews in checkatrade app

‍

Your Success Story is Next

Let's connect

CALLSTACK APPROACH

During the project, we were part of the client’s in-house teams, and joining them felt very natural - so did the whole partnership. Every release was a success achieved in the spirit of great trust and respect.

We created a long-term successful partner experience showing that we are partners, not just developers who provide code. As the scope of work extended, it was crucial for us to work with alignment and transparency.

‍

Case studies

“Callstack played an essential role in helping us release our mobile app to the market. They helped us set up and optimise our mobile ecosystem.”

Donovan Isherwood - Engineering Manager

Thriva

get in touch

Trusted by

“The team at Callstack are the most experienced and trusted engineers in the React Native community and ecosystem.”

Nader Dabit

DevRel + XD at EigenLayer / EigenDA

at Amazon Web Services

This information will be used only to contact you. For details, check our Privacy Policy.

“The collaboration was great throughout, with Callstack engineers seamlessly working as part of our agile teams.”

Gareth Jenkins

Head of Engineering ‑ Trades Product

In brief

Checkatrade is a platform set up to connect tradespeople in the UK with homeowners who need a given service. They are owned by Brookfield and have over 500 people working for them across their offices in Portsmouth and London. The purpose of our collaboration with Checkatrade was to deliver a first-rate mobile app working on multiple platforms.

Table of contents:

Heading 2

Working on the app

The client already had a React Native application but needed its key sections rebuilt and migrated from an old legacy platform into the app. A dedicated team of Callstack developers was to help with that. The app development project went so well that the scope of work expanded - we took care of more areas than initially planned. At all times, we happily worked on the application with the in-house team.

Checkatrade needed to have the main sections built natively into the app. Previously for these important workflows, they were iframing in the web page version from their legacy portal, which hindered the app performance.

To start with the project, Maciej Jastrzębski, specified which technologies to use. Since the client wanted to make instant releases, ideally, we decided to reuse what was already out there. That’s why our dev team made of Igor Bejnarowicz, Olimpia Żurek, Bartłomiej Dybowski, Michał Muzyk, and Marcin Swornowski suggested bringing into the app well-used and supported libraries including react-native-navigation, react-native-pager-view or Lodash. The whole project was coordinated by our PM, Natalia Gros.

In the beginning, we were asked to take care of the following areas: Jobs, Photos, and Reviews.

Each area was created with the user in mind. Thanks to the added functionalities, the registered tradespeople can now showcase their work and conveniently connect with their customers in the local area.

As the project evolved, we were asked to create another category: Quotes and Invoices. It was a major new feature and we crucially helped the client hit a very key deadline for its launch. The cooperation was considered by the client to be highly successful at every stage.

‍

“The collaboration between Checkatrade and Callstack was great throughout, with their engineers seamlessly working as part of our agile teams. At times where additional support and expertise was needed, we were able to tap into this as well. Overall a great collaborative effort."

Exemplary partnership

During the project, we were part of the client’s in-house teams, and joining them felt very natural - so did the whole partnership. Every release was a success, and it was a success achieved in the spirit of great trust and respect. We created a long-term successful partner experience showing that we are trusted experts and partners, not just developers who provide code. As the scope of work extended, it was crucial for us to work with alignment and transparency.

Lasting results

The intense transformation efforts resulted in moving Checkatrade off unwanted legacy systems. All the enhancements helped to massively improve the user experience in key areas of use. Ever since the notable features were rebuilt, the churn rate has steadily dropped.

Callstack approach

Our collaboration is always based on partnership and a very comprehensive approach: we dive into the project, analyze and discuss what should be done, and plan our work accordingly. The process is adjusted to a client’s needs. The Checkatrade project was no different. We offered our expertise and support at every stage of the app development - from a detailed review, the build and testing phases, to releasing the updates to customers. We applied the best React and React Native solutions available and relevant to the project.