Real-Estate App for Torii

Project Type

Development

Industry

Real-estate

Tech Stack

About the Client

Revolutionizing the real-estate sale and purchase business, Torii has been putting in the work since 2017 to make property sale and purchase a breeze for the residents of Massachusetts and California. What sets them apart from the competition is their endeavour to integrate the power of automation and machine-learning with human interactions to provide that unique blend of services to their customers. With their business booming, they also help buyers cover closing costs for homes using the commission they receive.

The Problem

As a team of two visionaries, while building their dream platform to provide consumers with easy to use real-estate brokerage platforms, they came across NativeBase, a UI library for React Native which was built by us and they loved the fact that it helped them solve most of their problems. On the basis of this experience, they reached out to us with a goal to increase their manpower and outsource development of their pet-project, which they decided to call Torii.

The engagement with the client was a simple one. Two developers were handling a website built in React & a mobile app built in React Native. They wanted to add more features into it, which was decided on a Time & Material engagement plan. This engagement was initially decided to last for an year with continuous evaluation and would be revisited based on quality of work. The engagement still continues.

OUR APPROACH

Strategy Analysis Planning UI/UX Development Testing Delivery

Strategy

We collaborated with Torii and undertook a project based on the time and material engagement model, spread over a period of one year, to conceptualise their vision of a digital solution to streamline real-estate processes.

Analysis Planning

Based on the in-house team’s expert opinion, the technologies Frontend of the mobile and web versions of the app were finalised to be React Native and React respectively while they chose Node.js & Express as the appropriate tech stack for the Backend.

UI/UX

The team utilised Material-UI as the library to create designs and themes for the web application while the design tool was decided to be invisionApp.

Development

As per the requirements which the project demanded, the developers integrated Google maps for location services, real-estate tools, a chatbot as well as enable face and finger ID for enhanced security.

Testing

The team used cutting edge technologies like Jest and Cypress to conduct rigorous testing throughout the development process for a truly robust app. Additionally, the finished product was delivered to the client for UAT and made changes accordingly.

Delivery

The finished product was delivered and launched in a little more than after the year which was initially proposed. It has received positive feedback and has helped to ease the process of buying houses in California and Massachusetts.

Team On-Call

The project requirements involved improvement and maintenance of two different platforms, which instantly called for a team of experts on both web and mobile app development to work in sync and deliver immaculate results. An important skillset that was required in the team to be delegated was the ability to disintegrate complex problems into smaller, easier ones to efficiently solve them. The initial team consisted of two experts and one manager based on the requirements of the clients, which was them reduced to a single dedicated developer handling the entire project. A scale-up was planned but was delayed due to the COVID-19 situation.

Further development and enhancement of the existing web and mobile platform.

Google Maps, HubSpot CRM, Email Delivery and many other integrations into the platform.

Improve security of the mobile app with Face/Finger ID.

SEO optimization and Chat Bot integration.

Development

With the task at hand clear, the dev. team was ready to rumble. The very first task was the most crucial one. Since it was an existing project, the team had to assess and catch up with the existent state of the project and the apps accurately. As it was a Time & Material based project, tasks were constantly updated by the client as per requirement and the team followed suit.

We used the Agile Development methodology for this project as it was the most befitting one. The process was simple, evaluate the tasks at hand, create and follow a process to complete them, develop the feature and deliver them to the client on a weekly basis & finally, evaluate them constantly and work on feedback. The focus of the team was clear. They had to ' develop the applications using only the best practices and test developed features intensively, so that the client receives the perfect result.

Since the project included a web app & a mobile app built in React & React Native respectively, the choice of tech stack was quite obvious. For the frontend on web, we employed React, with Redux as the State Management tool and Google Maps API for map integration, along with NextJS. On the mobile side, a similar stack was employed with React Native. The frontend bridge was created using React & Redux-saga.

For the backend, we used Node.js & Express for REST APIs. All this was supported by TypeScript as a scripting tool and PostgreSQL was used to create a database for the information that would be stored in the apps.

Keeping the brand identity in mind, the designs for the apps were pre-created by the client and were extremely clear and easy to understand and build in the app. The themes and designs for the web application were also included and created using Material-UI library. The reason behind choosing these libraries were because they supported React, TypeScript & NextJS. They also have a huge variety of components and are actively maintained by the communities, which make them relevant and the best choice. For the mobile app, just like the client, we circled on NativeBase for the UI & Expo as a development platform.

As this is a continued engagement, features that have been developed and delivered are as follows:

Google Map integration to enable users to view the location of various properties across the city and also allow users to draw free sketches over the areas they are interested in.
Real estate tools integration in the mobile app which would offer similar services as the web app to the customers.
Chat bot using ML to answer general queries for customers on the web and mobile app.
Face ID & Finger ID on the mobile app to increase security and promote ease in the login process through APIs.

Through development, features were put through multiple levels of rigorous testing to reinstate confidence in every function of the app and sort out bugs that needed to be fixed. With manual testing, tools like Jest & Cypress were used to automate some testing procedures. The product was also put through an intense UAT where the end-user tested the product upto satisfaction and reported any discrepancies, if found which were fixed in the following updates.

Overcoming Challenges

A peculiar feature that the client wanted in the app was a 'sketch over maps' feature in the apps. This feature was implemented beautifully in the web app using Google's DOM Event Listeners that tracks mouse movement on maps as well as Google's Geometry Library. This allowed users to draw a free hand sketch on the map and see all properties available in that area. Owing to the success of this feature, the client wanted it in the Mobile app as well, which was brought to life using React Native's Native Drag Event to track touch movements and Google's Library to get coordinates. Another requirement of the app was to instill a Tinder like swipe animation to filter available properties. This animations were a little laggy at first, which were then completely redone using React Native's ReAnimated Library, resulting in smooth animations.

In bird's eye view

Tasks were managed and updated on Airtable.
Git was used to store and manage source code of the app.
Designs were created and shared on invisionApp.

Final Impression

The entire project engagement was extended after the completion of the year proposed initially, which is proof of the quality of work that we provided and the satisfaction of the client. The project is currently ongoing and the client has only praises for us. In their words, we have contributed significantly to the project and the feedback has been amazing. They have also praised our efforts to collaborate and work efficiently through different time zones and have branded us as productive and professional. These kind words are what we live and work hard for and getting them from people who mean the most to us is an amazing feeling. We love the continued relationship with the client and will always be looking to keep it up throughout in the future.

Case Studies.