OneHousing Product - Architecture for Mobile and Web

CLIENT INFO
Industry
Company type
Region
tech INFO
Technologies
Platforms
Tech Stack

Before 14.5s
After 2.5s
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
OneHousing
CHALLENGE
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.

01
RN PAPER
Forked the React Native Paper library.
02
ci
Established continuous integration for automated code updates.
03
testing
Set up a Storybook for component testing.
04
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
01
Together
we acted as staff augmentation within Advantys’ team.
02
Engaged
in collaborative problem-solving and solution exploration.
03
supervised
by Advantys' CTO, the project utilized GitHub, Notion, and Slack for communication.
01
migrating
from a custom server-side rendering (SSR) solution to Next.js 
02
Focusing
on Core Web Vitals metrics
03
Optimizing
a large shared JS bundle 
04
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
01
strong
architecture with professional maintenance and continuous updates
02
high
code coverage with quality-compliant unit and integration tests
03
Comprehensive
testing, including end-to-end.
04
Faster
time-to-market with mobile process automation.
05
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.
Autozone app
  • Enhanced app performance by over 200%.
  • Improved Core Web Vitals metrics to meet Google's standards.
  • Reduced refresh time to ~2s with Fast Refresh feature.
  • Improve code quality and ongoing efforts to add advanced functionalities
CALLSTACK APPROACH
Callstack person image

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

Senior Developer Advocate

at Amazon Web Services

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

OneHousing Product - Architecture for Mobile and Web

Let’s talk about your project

Let's connect
Callstack Cosmos
Callstack Cosmos

Callstack was with us since day one of the development work, and they helped us not only propose, design and ultimately build out the MVPs of some of our major products — they took our team from “zero to hero” in React Native. We whole-heartily recommend Callstack to anyone looking for an elite and world-class team of experts in React Native.

Nguyễn Kỳ Thanh
-
CMO OneHousing

In brief

We optimized the client’s mobile app performance and introduced a custom tool to measure performance regressions. We set up performance tests and documentation to enable a seamless transition of knowledge with the in-house team of developers.

Client Info
Entain is one of the world’s largest sports betting and gaming entertainment groups.
Industry
Commercial gaming
Company type
Enterprise
Region
Australia, Asia & Oceania
Tech Info
Performance optimization project with the best practices, approaches & tech solutions
Technologies
React Native | Native
Platforms
iOS | Android
Stack
Redux | Tanstack | Reassure | GraphQL

Performance Boost

87.5%

In 87.5% of the screens, the number of rerenders decreased or remained the same, which affected the acceleration of the initial performance.

React Universe

In brief

MVP development of Agent and Transaction Platform – one mobile app for two platforms (iOS and Android), and one web app that make up a comprehensive system for handling real estate trading, issuing and managing offers.

OneHousing was launched with the aim to be the pioneer in building a comprehensive and simple online to offline experience for the Vietnamese housing market.

About our client

One Mount was established in 2019 with the vision of building Vietnam’s largest technological ecosystem. Their solutions are focused on optimization and bridging of value chain gaps across high-growth economic sectors in Vietnam.

Their portfolio includes the following products:

  • VinID – a super-app for managing loyalty programs, paying bills, buying tickets for entertainment events, etc.
  • VinShop – retail app empowering shop owners with tech enabled supply chain management and sales. online shopping app.
  • OneHousing – real estate trading system.

At the start, we were asked to prototype and propose an application architecture given the business requirements and goals of One Mount’s MVPs. We completed the prototype in a matter of a few weeks.

Once the prototypes were completed, we joined OneMount’s growing team to, together, architect and build MVPs with OneMount. During this close collaboration, we were able to also consult and train their teams on React and React Native. We were given the objective to not only help build the MVPs but also to train and support OneMount’s growing team so that if we left, the OneMount teams could continue the work ahead without us.

Creating MVP, architecture, and business logic for real estate trading system

Diving into details, we were asked to initially propose an application architecture based on the business logic of Onemount’s real estate trading system including:

  • Mobile app for real estate agents called Agent Platform
  • Web app for clients called Transaction Platform.

Also, in line with their priorities, we supported the One Mount developers in creating MVPs of:

  • mobile Agent Platform,
  • and web Transaction Platform.

Both apps were, of course, based on the aforementioned architecture and business logic.

In this partnership, Callstack team was responsible for front end development whereas. the backend and design of the apps were provided by One Mount.

We can distinguish the three most important elements of the cooperation:

  • Creating the application architecture, business logic, and setup for mobile and web apps for Agent Platform and Transaction Platform from scratch,
  • Help in creating an MVP for mobile version of Agent Platform and web version of Transaction Platform,
  • Help train and transition One Mount’s seasoned mobile and web developers to develop in React and React Native, something they had little to no experience prior to our collaboration.

Our main task was to propose a whole architecture for both apps from scratch.

Also, One Mount wanted the maintenance of the apps to be as simple as possible so we were asked to propose an architecture in which most part of the codebase would be shareable between both apps (for agents and clients) and platforms (web and mobile).

How Callstack faced the challenge

We were working on the project from inception, so, at the beginning of the cooperation, we prepared a proposal in which we described how the codebase should be shared.

Architecture and business logic

After consultations with One Mount, we worked out the architecture and business logic for the apps. It looks like this:

One monorepo for all four apps:

  • web and mobile version of Agents Platform
  • web and mobile version of Transaction Platform.

Two different business logics – one for Agent and one for Transaction Platform. We wanted to share the same code with business logic between mobile and web.

architecture and business logic of onehousing real estate react native  apps

As we got the approval from One Mount, we jumped straight into coding. Also, we prepared a common set of reusable components for both versions of the apps to create a structure for the component packs used in MVPs, we used react-native-builder-bob (a simple CLI to scaffold and build React Native libraries). Also, before we got the designs of the specific components, we used React Native Paper (a collection of customizable and production-ready components for React Native, following Google’s Material Design guidelines) to create them.

MVPs

When the architecture was ready, we moved to the next step – creating MVPs of mobile Agent Platform and web Transaction Platform. At the beginning, we were working on both of these platforms. As the One Mount developer team grew, we transitioned to mainly working on the Transaction Platform. During this process, we also created some components like Buttons, Input, Typography, and MapView.

Knowledge sharing

Although we were mainly focused on the Transaction platform (web app), we continued to support the Agent platform (mobile app). We regularly contributed to the Agent platform and supported the One Mount developer team. In addition to supporting the development, we conducted React Native training, sharing our knowledge, experience, and best practices of React Native development.

One of the goals given to us by One Mount was to be “part of the team”. This meant we were helping to review code, review pull requests and discuss with the teams what could be improved.

Results

Our team of three developers managed to prepare a whole architecture of the client’s app. What’s more, we prepared a setup that One Mount developers could continue to develop, maintain and scale into the future.

To wrap everything up, here are the results of our cooperation:

  • New architecture, business logic and setup of the mobile app for real estate agents – Agent Platform and web app for clients – Transaction Platform.
  • MVP for mobile version of Agent Platform and web version of Transaction Platform,
  • Level up Onemount’s developers with new knowledge and expertise in React Native necessary to scale and develop the projects into the future.

With the collaboration with Callstack, One Mount built solid and stable MVPs of their products while meeting strict deadlines. In addition, we helped to level up One Mount developers on React Native, empowering them to continue the work into the future.

The challenges we’ve solved so far

Related services

Service

Business Transformation

Callstack illustration
Service

Product Development and Growth

Callstack illustration
Service

Tech Stack Upgrade

Callstack illustration

get in touch

Fill in the form and tell us a little bit about your enquiry. We’ll get back to you promptly to discuss your requirements.

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