Case Study

Mortgage Planner For Sprive

Developing a loan optimizer and mortgage planner for a leading Fintech company in the UK.

About the client

With a goal to help people live a debt free life, Sprive has dedicated its vision to use technology as a medium to help people manage their debt and reduce the significant impact that it has on their lives. With Sprive, the client looks to promote improved money management with their exclusive app that works in collaboration with major lenders in the UK an enable people to plan, repay and manage their mortgages.

The Problem

The agenda behind Sprive was to provide people in debt with a single platform that could enable them to centralize their debts and manage them with timely payments. They wanted to launch a commercial MVP to support their idea of digitizing loan optimization. The COO of Sprive reached out to the GeekyAnts team through the website enquiry page. Since he was locally available, he visited our premises and had a discussion with us F2F.

Since the requirement was of an MVP, it meant building everything from scratch. Sprive wanted to complete the product in 4 months, which led to intense discussions between us and the clients about the ideal approach to the project with the time constraint in effect. After drafting a Business Requirement document, we presented a ballpark estimate to the client, which was agreed upon. After 3 months of continuous dialogue and intricate planning, the project was finally launched under a fixed timeline plan that was divided into phases, which was the most ideal approach, considering the dependency on 3rd party APIs.

Requirements

The project demanded the following requirements:

A cross platform mobile app as a MVP for Sprive.
A stable and secure server to handle all interactions.
Ability to manage, track and pay mortgage installments through secure gateways.
Push notifications, fingerprint scanner and face recognition features.

Team On-Call

As this was an express project that required solid planning and perfect execution, we employed one Project Manager/Architect for understanding the project to the pixel, make solid plans and manage the entire project, one developer with expertise in Frontend and one developer with experience in Frontend. Also, one QA engineer to make sure everything is in working order and does not break.

The Development Phase

It was time to get to work. The complete development of this project would include creating designs for the app, implementing them while developing front-end and finally integrating the pieces together and testing the complete product vigorously.

The project lead for this product described this experience as 'An interesting challenge'. The development of the project would include implementation of a cross platform mobile app for iOS and Android, while a stable and secure backend server that could host a large volume of interactions from the base mobile app.

As decided by the engagement model, this project was divided into multiple phases/sprints (6 till now), dictated by the 3rd party dependencies on APIs. Before starting with the actual coding, selecting the appropriate tech stack is a vital decision that has to be made right and is no easy task. To simplify the selection, we divided the app into two software components, Client-side (FE), to provide access and enjoyable user experience and server-side (BE), to make sure that all features are responding to all user requests function properly, securely and efficiently.

Based on this divide, we decided to choose React Native as the ideal framework for the cross-platform development because of its trust, community backing and cost + time efficiency. Redux was the obvious choice of State Management, which helped us centralize states, predict state updates & use pure reducer functions. Since we wanted a solution that would delay the dispatch of an action or dispatch actions only if certain conditions are met (for n/w requests), Redux Thunk was our Middleware and Typescript for its ability of class and module support as well as static type checking. For the Backend, FeathersJS and Typescript were our choices.

The app required a lot of internal calculations to determine interest, total mortgage and monthly payment amounts for users. A separate module for Authentication using Email, security and face/fingerprint recognition security layer as well. Following the Agile method of management, the complete development process was divided into multiple sprints.

 

The first sprint involved all tech discussions that determined the best options as per requirements, project setup, mortgage entry & the complete authentication flow of the application. The next sprint included implementation of Email verification, SMTP setups, splash screens and icons setup. The next feature that was tackled was the dashboard, side drawers, transaction history screen, Firebase analytics setup and crashlytics setup, followed by Home Valuations, implementing calculator.js and complete in-app flow. Finally, Face and Fingerprint scanning using react-native-fingerprint-scanner SDK was implemented, the app-flow was continued and Trulayer's payment SDK was integrated for secure payments.

 

In bird's eye view,

  • Versioning for this project was done using the x.y.z rule.
  • GitLab was used for source code and task management.
  • All communication was done through Slack, Email & Google Meet.

Alongside development, the product was put through multiple levels of rigorous manual testing to reinstate confidence in every function of the app and sort out bugs that needed to be fixed. The client was kept in the loop through every stage. The BE & FE were first put through a developer level test round and was also put through an intense User Acceptance Testing phase where the end-user tested the product upto satisfaction and reported any discrepancies, if found which were fixed in the following updates.

 

 

Overcoming Challenges

With an application of such value and delicate details, challenges and roadblocks are bound to come across during its development, but it was nothing a little R&D couldn't solve. Since it was a Fintech App, multiple levels of security was crucial. To do that, the team used keychain / keystore for iOS/Android respectively to store user’s sensitive information and added a wrapper of async storage over keychain to access them. The integration of TrueLayer with React Native was a new concept for us. The team researched a bit on this and came up with a solution to integrate them successfully to help users access their bank's payment gateways securely and check their account details. Normally, RN applications have a single default splash screen. For this app, we added two (the second one was a layer over the first Splash Screen). The first was added onto native side whereas the second on the RN side. This involved a bit of research work as well. The biggest challenge came in the customized integration of Analytics and Crashlytics using Firebase. The need was of records bifurcations based on multiple user data to get them analyzed in a productive way. It was pretty challenging initially, but the team came up with the best possible solution at the end.

Final Impressions

With an application of such value and delicate details, challenges and roadblocks are bound to come across during its development, but it was nothing a little R&D couldn't solve. Since it was a Fintech App, multiple levels of security was crucial. To do that, the team used keychain / keystore for iOS/Android respectively to store user’s sensitive information and added a wrapper of async storage over keychain to access them. The integration of TrueLayer with React Native was a new concept for us. The team researched a bit on this and came up with a solution to integrate them successfully to help users access their bank's payment gateways securely and check their account details. Normally, RN applications have a single default splash screen. For this app, we added two (the second one was a layer over the first Splash Screen). The first was added onto native side whereas the second on the RN side. This involved a bit of research work as well. The biggest challenge came in the customized integration of Analytics and Crashlytics using Firebase. The need was of records bifurcations based on multiple user data to get them analyzed in a productive way. It was pretty challenging initially, but the team came up with the best possible solution at the end.

E-Sports Platform For MPL

Building a robust mobile gaming platform for India's biggest E-sports company to entertain billions of users.

Healthcare Software

A web app that will help a healthcare organization to deliver solutions to healthcare centers to simplify communication, align processes and deliver quick and effective care to patients.

2020 © All rights reserved. GeekyAnts India Pvt Ltd.