KITRUM develops next-generation lender interface

Tech stack
React.js, TypeScript
Industry
Fintech, ,
Collaboration
19 months
Region
USA
background
hero-image
Client:

StackSource

About the client:

StackSource is a tech-enabled commercial real estate loan platform that connects investors developing or acquiring commercial properties with debt and equity financing options such as banks, debt funds, private equity, and more. It simplifies the process of finding the best commercial mortgage for a given property investment by tracking the financing programs of hundreds of active capital sources and offering borrowers a transparent experience.

content-image

Discovery

We started by reviewing the website and divided it into six sections to organize the effort better. Using the Kanban technique, the work was broken up into eight separate sprints.

  • Choose a tiny component of the project or a new feature to test with React.
  • See how well it works with the existing templating engine, and try feeding it some data.
  • Set up and test the integration of a state management solution like Redux.
  • Once the new solution is in place, elements of the website or web app that previously worked will no longer do so.
  • Then, migrate them to React and see how they perform using the same metrics they did before the transition.

After investigating Tempo libraries, we decided to start the project utilizing React.js, Redux, and Typescript. with a new design from zero.

Solution

The team at KITRUM, composed of Senior and Middle frontend engineers, a QA manual engineer, and a Product owner, started working according to Agile methodology. The main tasks were the following:

  1. Building an architecture within the chosen libraries
  2. Developing UI and shared components
  3. Choosing and integrating website management tools
  4. CI/CD integration through Github Actions and Firebase deployment
  5. Implementation
01.
Sprint 1
Within the scope of the first sprint, we completed the integration of capital providers by project with API package service(AVA), built an initial base structure for Redux, and implemented basic UI elements such as buttons, inputs, etc). We also developed a dashboard page and a base form with validation.
02.
Sprint 2
During this sprint we worked with API, implementing Google places API for address suggestion and implementing login/logout provided by API package service. • Options menu • Required items checklist • Project user details panel • Project user card • Project Info card • Blocks like quote terms, single-tenant, sponsor, guarantor block • Deployment to Firebase • Create a project Redux entity
03.
Sprint 3
As we aim to identify bugs in the app before its implementation, our manual QA engineer ran the software through tests and fixed some of them in the loan request and some design elements, such as element size and alignments. It helps to reduce the number of issues and confirm that the product functions properly.
04.
Sprint 4
We added an adaptive design, quickly moved to the important section of the loan portal and implemented the following features: • Loan Fees • Recourse • Prepay Penalty • Interest Rate • Amortization • Loan Term • Loan Amount

Throughout all of our projects, we used Jest, a JavaScript testing framework that ensures the correctness of any JavaScript codebase. Jest also prioritizes previously failed tests and re-organizes runs based on how long test files take.

Outcomes

We successfully migrated the entire frontend to React and launched the next generation mobile friendly lender interface. StackSource platform is now saving lenders more time than ever before evaluating its real estate lending opportunities.

Benefits

01.
Mobile Responsive
The new interface is mobile optimized allowing lenders to easily review all offering information and quote terms, decline a request, or contact a StackSource Capital Advisor for more information quickly and easily from any device.
02.
Asset & Borrower Information Upgrades
New data points for deal review were added and the lender interface was reorganized by prioritizing asset and borrower information by impact to help lenders make faster, informed decisions on deals.
03.
Dynamic Offer Creation Flow
Re-engineered loan quote creation flow empowers lenders to retire the lengthy and exhausting single-page form format. The new flow allows lenders to automatically calculate the maximum loan amount based on loan program sizing constraints making quoting a loan on the StackSource platform easier.

“StackSource has raised a total of $3.5M in funding over two rounds and was ready to scale up. So, at this point, we decided to hire a software development company to help us with this process.”

quote-author-photo
Nathan Wall
CTO at StackSource

Ready to discuss your project with us?

    Or you can fill the form

    You can record a voice message about your project to help us understand it better

    I’d like to be updated on latest products, event announcements, and thought leadership