We Stand With Ukraine 
KITRUM develops next-generation lender interface
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.
“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”
Challenge
The first StackSource user interface went live five years ago. The client decided to update the platform and give capital sources and borrowers powerful new tools for improved matching and quoting.
StackSource contacted KITRUM to work on the platform’s frontend and migrate from Tempo to React.js, Redux, and Typescript. As you might expect, the long-running application had a slew of legacy technologies and a stale codebase.
Since our client had a design team working on a prototype in Figma, our job was building the frontend that aligned with their design and integration of work with the getaway module, which is integrated as a package from the backend.
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.
The strategy was as follows:
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:
- Building an architecture within the chosen libraries
- Developing UI and shared components
- Choosing and integrating website management tools
- CI/CD integration through Github Actions and Firebase deployment
- Implementation
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.
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
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.
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.
“The limiting factor for most lenders building their loan portfolio isn’t capital — it’s time,” says StackSource founder and CEO Tim Milazzo. “This release makes it even easier for our 900+ lending partners to access great projects and quickly create loan quotes — a real win for both our lenders and our borrowers.”
The benefits of new StackSource’s platform:
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.
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.
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.
