Lessons in Building a Robust Financial Data Web App: My Journey

Developing a financial data web app can be a rewarding yet a challenging journey. Over the course of building a web application that fetches real-time stock data and financial statements using Python, Flask, React, and external APIs like yfinance, I encountered several obstacles.

These ranged from deployment errors to handling data formatting issues. Each challenge taught me valuable lessons that not only improved the project but also honed my coding practices.

In this article, I will share my key learnings and best practices for building a robust financial data web app.

1. API Integration and Data Fetching The core functionality of my app that I am currently working on involved fetching financial data from the yfinance API. This part seemed straightforward initially but had multiple challenges, particularly around the reliability and formatting of the data.

• Use Reliable Endpoints: Initially, I faced issues with endpoints not responding as expected.

Make sure to test all API endpoints thoroughly before integrating them into the app.

• Handle Data Formats and Missing Fields: Financial data often has missing fields, and different companies may have inconsistencies in their financial reports.

This was tackled by using Python's pandas library to handle missing values (NaN) by converting them to None for better JSON serialization.

• Maintain Consistency in Time Periods: In some cases, I found that older financial data was being shown before the latest year.

This required to explicitly sort the data by year, ensuring a consistent and clear user experience.

2. Handling Large Data Sets Dealing with financial statements means handling large amounts of data (income statements, balance sheets, cash flow statements). Ensuring that this data is efficiently processed and displayed was a significant challenge.

• Avoid Concatenation of Unnecessary Data: Initially, I was concatenating all financial data into one large DataFrame, which slowed down the app.

Instead, I learned to only fetch the relevant data required for each financial statement (Income, Balance Sheet, Cash Flow).

• Limit the Time Period for Data: To keep the interface clean, I limited the data to the last four years.

Displaying too many years of data can overwhelm users and make the UI cluttered.

3. Optimizing for Mobile Views While the desktop view of this app looked great, the mobile view presented a unique set of challenges. The font sizes were too large, tables weren’t responsive, and the user experience was poor.

• Implement Scroll Features for Mobile: To make the financial data tables more accessible on smaller screens, I introduced horizontal scroll features - froze the 'Item' column so that users could scroll through years without losing track of which item they were viewing.
• Optimize Font Sizes for Mobile: Reducing font sizes for mobile view was crucial to ensure that tables fit properly on smaller screens without excessive scrolling.

4. Efficient Use of Flask and React Deploying Flask on Google App Engine posed its own set of challenges, from routing issues to API failures. However, the combination of Flask for backend services and React for the frontend turned out to be a powerful approach.

• Separation of Concerns: Initially, I tried integrating financial data fetching into one Flask app, which led to conflicts.

I learned the importance of separating different services, like stock data fetching and financial statement fetching, into their own Flask apps for better maintainability.

• Handling CORS Properly: CORS (Cross-Origin Resource Sharing) issues appeared early on when making requests from the frontend.

The fix was straightforward but crucial: I had to enable CORS in our Flask apps and ensure that I properly configured headers for the requests.

5. Error Handling and Debugging A critical part of the development process was ensuring that errors were handled gracefully, both in the backend and frontend.

• Backend Error Handling: Initially, when financial data could not be fetched, the error messages weren’t user-friendly. I updated the Flask backend to return more detailed error messages, helping users understand what went wrong and providing valuable insights during development.
• Frontend Error Handling: On the frontend, when financial data failed to load, I ensured that error messages were clear and actionable, prompting users to try again or check their input.

6. Deployment on Google App Engine Deploying Flask apps on Google App Engine was a great learning experience. I faced several deployment challenges, particularly around the separation of multiple services.

• Separate Services for Multiple Flask Apps: When deploying, each Flask app needed to be deployed as its own service on Google App Engine. This avoided conflicts and ensured that each service had its own route, making the app more modular.
• Use Proper app.yaml Configuration: The correct configuration of app.yaml files for each service (financials, stock data) was key to ensuring the app ran smoothly on App Engine.

7. Calculating Intrinsic Value One of the core features of the app was a DCF (Discounted Cash Flow) intrinsic valuation calculator. I initially used user input for free cash flow (FCF), but later realized that fetching this data directly from the financial statements was a more reliable approach.

• Use Real Financial Data for Calculations: Instead of relying on user inputs for FCF, I fetched the latest FCF from the financial statements and used that for intrinsic value calculations. This made the results more accurate and tied the valuation to real-world data.

8. Iteration and User Experience The project went through multiple iterations and improvements. From handling data to optimizing for mobile views, each step provided valuable lessons on how to prioritize the user experience.

• Start Simple, Then Iterate: I initially started with a basic working prototype to fetch financial data and perform valuation calculations. Over time, I added more sophisticated features like financial data categorization, mobile optimization, and error handling.
• User-Centered Design: Constant testing and feedback helped me design an app that works smoothly across devices and provides the user with a clean and clear financial overview.

Building a robust financial data web app is a process of constant iteration, debugging, and improvement. Through trial and error, I learned the importance of efficient API integration, mobile optimization, error handling, and maintaining a clean separation of backend services. The result is a smoother, more efficient app that delivers real-time financial data and helps users make informed investment decisions.

Whether you are a developer working on financial data apps or simply looking to build a more efficient Flask and React app, I hope these learnings help you avoid some of the challenges I faced.

Happy coding!

I shall soon share the source code of this application on GitHub once the front end is improved further.

Feel free to connect with me if you have any questions about this project or need help with your own development journey especially around Google App Engine app deployment, Flask separation, Fetching required financial information from finance library!

#webdevelopment #reactjs #flask #financialdata #yfinance #mobileoptimization #googleappengine #intrinsicvaluation #Python #APIIntegration #Fintech #FullStackDevelopment #GoogleAppEngine #FinancialAnalysis #WebApp #investing #valuations