OneHousing Product - Architecture for Mobile and Web

We developed an MVP for a comprehensive real estate trading system, including a mobile app (iOS and Android) for agents and a web app for clients.

CLIENT INFO
One Mount aims to build Vietnam’s largest tech ecosystem. Their products include VinID, VinShop, and OneHousing.
Industry
IT | Real Estate
Company type
Startup
Region
Asia and Oceania
tech INFO
MVP development of a real estate trading system featuring a mobile app for agents (iOS and Android) and a web app for clients.
Technologies
React | React Native
Platforms
iOS | Android | Web
Tech Stack
React Native Paper | react-native-builder-bob
KEY RESULTS
Before 14.5s
After 2.5s
35k
lines of code
7
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.

Onehousing Project highlights

  • Developed MVP for the Agent Platform and Transaction Platform
  • Enabled One Mount to meet strict deadlines
  • Created a scalable app architecture
  • Future-proofed client’s development process
OneHousing
CHALLENGE

One Mount tasked us with creating a comprehensive application architecture for their real estate trading system, including a mobile app for agents and a web app for clients. We needed to develop MVPs quickly, ensure the architecture was scalable and maintainable, and train their team in React and React Native to enable them to continue development independently.

PROJECT OVERVIEW

ARCHITECTURE AND MVP DEVELOPMENT

  • Proposed and developed a scalable architecture with a shared codebase for both web and mobile platforms.
  • Created two different business logic: one for Agent and one for Transaction Platforms.
architecture and business logic of onehousing real estate react native  apps
The goal was to share the same code with business logic between mobile and web

COLLABORATION AND TRAINING

  • Worked closely with One Mount’s team, providing consultation and training in React and React Native.
  • Ensured One Mount’s developers could maintain and scale the projects independently.

KNOWLEDGE SHARING AND SUPPORT

  • Regularly contributed to development, code reviews, and best practice discussions.
  • Delivered training sessions to enhance One Mount’s proficiency in React Native.

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
CODE REFACTORING
Kicked off the project with refactoring the whole socket.MIGRATION Migrated the codebase to TypeScript.
02
MIGRATION
Migrated the codebase to TypeScript.
03
DEPENDENCIES
Upgraded major dependencies such as Expo, React Navigation, and React Query.
04
PAYMENTS
Created two options: In-app purchase with Google Play or App Store and credit card payment.
05
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.
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
  • 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
Callstack person image
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
RESULTS

Our team of three developers prepared the entire architecture of the client’s app. We also prepared a setup that the One Mount team could continue to develop, maintain, and scale in the future.

All in all, our cooperation resulted in:

Application Architecture

Designed a monorepo architecture, enabling shared business logic and reusable components across all platforms.

MVP Development

Successfully launched MVPs for the mobile Agent Platform and web Transaction Platform, ensuring a robust foundation for future development.

Developer Training

Elevated One Mount’s developer skills in React Native, empowering them to sustain and expand the applications independently.

Through close collaboration, architectural innovation, and extensive knowledge sharing, Callstack enabled One Mount to build solid MVPs and equipped their team with the necessary skills to continue advancing their real estate trading system.

Your Success Story is Next
callstack illustration
CALLSTACK APPROACH

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.

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.

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