OneHousing Product - Architecture for Mobile and Web

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.

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.