7 Cups

7 Cups App Upgrade Generates a 130% Increase in the Number of Users

We rewrote the 7 Cups mobile app, taking over the project from another developer team.

Services:

Product Development and Growth

Tech Stack Upgrade

Development Efficiency Boost

CLIENT INFO

7 Cups is an online therapy provider that offers paid sessions and free emotional support to people seeking help.

Industry

Health care

Company type

SME

Region

North America

tech INFO

We reviewed and rewrote all critical app components, made necessary adjustments, and added new functionalities.

Technologies

React Native

Platforms

iOS | Android

Tech Stack

TypeScript | Expo | React Navigation | React Query

KEY RESULT

130%

increase in user numbers post-upgrade

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

CHALLENGE

In the beginning, the workflow itself posed a challenge. We didn’t start the project from scratch, which meant we needed to carefully analyze the existing elements.

The deeper we dug, the more issues we identified:

Code base issues: Poor quality with massive copy-paste repetitions and faulty socket implementation.
Missing payment methods: No options for in-app purchases or credit card payments for professional therapy.
In-app linking problems: Users were redirected to the web platform, leading to app abandonment.

WORK DONE

OUR APPROACH & SOLUTIONS

For maximum effect, we adopted an agile collaboration model, working closely with the client to swiftly adapt to changing needs and requirements. We took care of the following:

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.

CODE REFACTORING

Comprehensive socket and code base refactoring for stability and scalability.

PAYMENT INTEGRATION

Added in-app purchase options and credit card payment methods.

IN-APP LINKING

Implemented internal links to keep users within the app.

DEVELOPMENT PROCESS

Code Refactoring: A Crucial Step for Accelerated Development

We started with code refactoring, which was necessary to enable new features and designs. Though unplanned and initially time-consuming, this milestone significantly accelerated development in the project's second phase.

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

“I appreciate their attention to detail, flexible approach and a high degree of expertise. I definitely recommend the Callstack team!”

Glen Moriarty - Founder and CEO

RESULTS

CODE REFACTORING Kicked off the project with refactoring the whole socket.
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.

Your Success Story is Next

Let's connect

CALLSTACK APPROACH

Throughout the project, we collaborated closely with the client, who took care of back-end work, designs, and tests. Our mutual efforts and successful partnership resulted in a fresh look and improved functionality.

Since 7 Cups offers therapy and counseling, ensuring the upgraded version is operational was crucial. It is, and we are happy with the results. Our practical and effective solutions continue to enhance the app during maintenance.

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.

Home

Case Studies

7 Cups

7 Cups App Upgrade Generates a 130% Increase in the Number of Users

Let’s talk about your project

Let's connect

“I appreciate their attention to detail, flexible approach and a high degree of expertise. I definitely recommend the Callstack team!”

Glen Moriarty

Founder and CEO of 7 Cups

In brief

7 Cups is an online therapy provider that offers paid sessions and free emotional support to people seeking help. It’s a worldwide listening service with both professional therapists and trained listeners. They connect with registered users via their website and mobile app.

Table of contents:

Heading 2

Rewriting the 7 Cups app

We were asked to work on the rewrite of the mobile 7 Cups app which was already started by another developer team. We took over the project, reviewed and rewrote all critical app components, made necessary adjustments and added new functionalities.

In the whole process we partnered with the client who took care of backend work, designs and tests. Seven months later a new version of 7 Cups app rolled out.

‍

The deeper we dug, the more issues we identified

In the beginning, the workflow itself posed a challenge. We didn’t start the project from scratch and that meant we needed to carefully analyze the existing elements. The deeper we dug, the more issues we identified:

Code base

The code base was in poor shape and as such needed refactoring. The previous socket implementation wasn’t working correctly and there were a lot of issues with code quality (i.e. massive copy-paste repetitions, a poor static code analysis, duplicates in stylesheets).

Payment methods

For users considering a professional therapy, there were no payment methods available in the app, which was a serious inconvenience. Payment options had to be added to enable paying by credit card for an online therapy and making an in-app purchase for digital content.

In-app linking

There were internal links in the app going to the web platform. Following them, the user left the application and ended up on 7 Cups website. That was definitely something to fix. Implementing an in-app linking feature is one of the ways to keep the user in the app. And the user should stay in the app.

Last but not least, what was also a bit challenging was to build the client’s trust. We were positive, however, that our expertise combined with hard work, full commitment and close cooperation will produce the desired result.

‍

Where did we start? We began with code refactoring

For maximum effect, we decided to adopt an agile collaboration model in which our team closely cooperated with the client and his team. It allowed us to make swift adaptations to the original scope of work and, this way, meet the always changing needs and requirements.

In short, we took care of the following:

Socket refactoring
A proper static code analysis
App payment methods
Migration to Typescript
In-app linking

Major dependencies upgrade (e.g. Expo, React Native, React Navigation, React Query)
Full app restructuring
Web content integration

Where did we start? We began with code refactoring. We had to refactor the whole socket first to be able to deliver new features and designs. That wasn’t planned originally and it hindered our further work for some time. However, doing the refactoring was an important milestone – it boosted the pace of development in the second phase of the project.

Another biggie was taking care of the app payment methods. We created two options for users who want to get an access to an extended version of the app or to pay for an online therapy:

in-app purchase which uses Google Play or App Store to process payments for the extended app content
credit card payment which allows for charging the user card on a regular basis (as long as their therapy lasts)

Also, we sorted out in-app linking, integrated content so that the client could use the website content, implemented html rendering in the place of normal text, and much more.

We provided full frontend support together with the project’s configuration, feature parity and expert advice on various technical and user experience aspects. We implemented a new design guideline including dark mode with auto theme detection as well.

Fresh look and improved functionality

Throughout the project, we closely collaborated with the client who took care of backend work, designs and tests. Our mutual efforts and successful partnership resulted in a fresh look and improved functionality.

A new version of 7 Cups app already came out in January and is available in both Google Play and App Store. Since 7 Cups provides therapy and counseling, it was especially important for us to ensure the upgraded version is up and running. As it definitely is, we are happy with the job done. Our solutions were practical and effective, and so are the ongoing improvements in the app maintenance phase.