Short Explanation
Foreacastr is an online tool allowing founders to confidently forecast the cashflow of their companies. We make it easy to conduct, manage and modify financial forecasts all with the click of a button and without the deep financial cost of a CFO. Benefits include:
- No Excel/Finance Expertise Needed
- Integrations (Quickbooks, Google Analytics, etc.)
- Scenario Analysis
- Increased Sharability
- Permission Access Features
- Utilization of Big Data
Tech Stack Used
The Forecastr project uses a range of technologies, including React.js, Next.js, Redux Toolkit, ApolloGraphQL, Prisma, Node, React-Table, React Virtualization, etc
My responsibilities:
- Implemented SSR-specific optimizations such as caching, critical path CSS, and pre-loading by using Next.js
- Developed an awesome data table which is more focusing on financial modeling than MS Excel table by customizing react-table.
- Rebuilt the pieces of the data table and updated the calculation logic of the financial model, improved the rendering process to improve the performance, and finally made it at least 10x faster.
- Integrated QuickBooks, Xero financial data to the Forecastr app and implemented logic of rebuilding data , so the users can easily connect their QuickBooks online account, map QuickBooks chart to Forecastr chart and then compare actuals and forecasts directly inside the data table.
- Developed onboarding process and billing page to let users access and manage their Stripe payment details directly from inside the platform.
- Created context pattern which is used like redux lifecycle that includes dispatch, action, update state by using combination of two context providers.
- Built the data visualization using HighChart and applied Storybook to expose reusable components with descriptive documentation.
- Wrote the E2E test scripts using Cypress.io and boosted test coverage by over 90%.
The Problems and How I Deal With It
Developing the Forecastr project has definitely come with its share of challenges.
Challenge #1. Understanding complicated financial modeling.
Forecastr is financial modeling online tool, so I need to understand the financial modeling logic from professional financial advisers. Fortunately, I have strong mathematical background and it's not so difficult to understand the mathematical logic. I tried to communicate with product team in real time and finally I was able to understand the financial modeling logic completely and implement functionalities successfully.
Challenge #2. Improve performance of the data table.
In this project, there are tons of heavy calculation logic with huge financial data on the frontend side. So the app was too heavy when we implemented the financial modeling logic at the beggining.
In order to improve the performance, I followed two approaches.
- The one is improve the calculating process by using caching. I just created a cache to store a cache for each cell result, so every related metric will use the cache instead of calculating everything again.
- The second one is using react virtualization. Integrated the react virtualization for data table so that handle the part of the data, not whole data at one time.
In the end, I was able to improve the performance successfully and get 10x faster app.
Lessons Learned
Working on the Forecastr project has been a fantastic learning experience, and the team has learned a lot of valuable lessons along the way. One of the key lessons learned was the financial modeling.
Another important lesson learned was improving performance of mathematical calculation and data table by using caching, virtualization. Overall, working on the Foreacastr project has been a fantastic learning experience, and I am very proud of the final product.