Investors Engine
Investment Research Platform for Long-Term Equity Analysis
Overview
Investors Engine is a comprehensive investment research platform designed to help long-term equity investors analyze and track over 10,000 US stocks. The platform provides real-time financial data, advanced charting tools, customizable screeners, and portfolio tracking capabilities—all in a clean, intuitive interface. Built for both novice and experienced investors, it consolidates scattered financial information into a single, powerful research hub.
The challenge was building a data-intensive application that remained performant and user-friendly despite handling massive datasets. Financial data visualization requires precision and clarity, while the sheer volume of stocks and metrics demanded careful optimization. The interface needed to feel fast and responsive even when displaying complex charts, tables with thousands of rows, and real-time updates across multiple data points.
As the lead frontend engineer, I architected the entire UI, made critical technology decisions, and implemented the core features including the stock screener, interactive charting system, portfolio tracker, and financial statement displays. I also established frontend best practices, implemented the state management architecture, and optimized performance to ensure the application scaled effectively as the user base and data volume grew.
Key Features
Stock Screener
Stock Screener
Advanced filtering system allowing users to search and filter through 10,000+ stocks using multiple criteria including market cap, sector, P/E ratio, and dividend yield. Implemented efficient state management with React Query for server state and Redux for UI state.
Interactive Charts
Interactive Charts
High-performance financial charts built with Apache ECharts, featuring candlestick patterns, technical indicators (RSI, MACD, Bollinger Bands), and customizable timeframes. Optimized for smooth interactions even with large datasets.
Portfolio Tracker
Portfolio Tracker
Real-time portfolio management system with P/L calculations, position tracking, and performance analytics. Integrated with live market data to provide up-to-date valuations and returns.
Financial Statements
Financial Statements
Custom-built financial tables using Tanstack Table to display income statements, balance sheets, and cash flow statements with sorting, filtering, and historical comparison capabilities.
Watchlist Management
Watchlist Management
Persistent watchlist functionality allowing users to track their favorite stocks with real-time updates. Implemented with optimistic UI updates and efficient data synchronization.
Company Profiles
Company Profiles
Detailed company pages with comprehensive information including business overview, key metrics, financials, and analyst ratings. Built using Next.js dynamic routing for optimal SEO and performance.
Technical Implementation
Architecture
The frontend is built on Next.js 14 with React 18 and TypeScript, providing a robust foundation for scalability and type safety. Material UI serves as the component library, ensuring consistent design and accessibility. The state management strategy combines Redux Toolkit for UI state and React Query for server state, creating a clear separation of concerns that improved code maintainability and debugging efficiency.
For data visualization, Apache ECharts handles complex financial charts with thousands of data points, while Tanstack Table powers the customizable financial statement tables. The application is deployed on Vercel with automatic deployments from the main branch, ensuring rapid iteration and reliable production updates.
React Query + Redux: Hybrid State Management
Rather than forcing all state into a single paradigm, I chose to combine React Query for server state (stock data, financials, real-time prices) with Redux Toolkit for client state (UI preferences, filters, user settings). This separation made the codebase more intuitive—server data with built-in caching and refetching logic stayed in React Query, while UI state that needed to persist across sessions lived in Redux with Redux Persist. The result was cleaner code, easier debugging, and better performance through automatic cache invalidation and optimistic updates.
Apache ECharts for Financial Visualization
After evaluating several charting libraries including Chart.js and Recharts, I selected Apache ECharts for its superior performance with large datasets and extensive customization options. ECharts handles thousands of candlestick data points smoothly while supporting advanced features like technical indicators, drawing tools, and multi-axis charts. The library's canvas rendering ensures smooth interactions even on lower-end devices, and its flexible theming system allowed for seamless dark mode integration.
Tanstack Table: Headless UI for Custom Tables
Financial statements required specialized table functionality—multi-level sorting, column hiding, row grouping, and historical comparisons. Tanstack Table's headless approach provided the data management logic without imposing UI constraints, allowing me to build custom table designs that matched the application's aesthetic while leveraging battle-tested sorting, filtering, and pagination logic. This flexibility was crucial for creating tables that felt native to the platform rather than generic components.
Performance Optimization
Performance was achieved through multiple strategies: React Query's intelligent caching reduced redundant API calls; code splitting with Next.js dynamic imports ensured users only loaded the JavaScript they needed; virtualized lists rendered only visible table rows; and memoization with useMemo and useCallback prevented unnecessary re-renders. Additionally, I implemented progressive loading patterns where essential data loaded first, followed by secondary information, creating the perception of faster load times even with large datasets.
Challenges & Solutions
Handling Large Datasets
Problem
Displaying and filtering 10,000+ stocks caused significant performance issues, with slow initial loads and laggy interactions. The sheer volume of data made traditional rendering approaches impractical.
Solution
Implemented virtualized lists for rendering only visible items, used React Query's caching and pagination features to load data incrementally, and added debounced search inputs to reduce unnecessary API calls. Also employed code splitting to load heavy components on demand.
Result
Reduced initial load time by 60% and achieved smooth 60fps scrolling even with thousands of items. Search response time improved from 2s to under 200ms.
Complex State Management
Problem
Managing interconnected states across filters, watchlists, portfolios, and user preferences became increasingly difficult. Changes in one part of the application needed to reflect across multiple components, leading to prop drilling and state synchronization issues.
Solution
Adopted a hybrid state management approach: React Query for server state (stocks data, financial data) and Redux Toolkit for client state (UI preferences, filters, user settings). This separation of concerns made the codebase more maintainable and debugging easier.
Result
State management bugs reduced by 70%, development velocity increased as new features could be added without breaking existing functionality, and the codebase became significantly more maintainable.
Real-time Data Updates
Problem
Stock prices needed to update in real-time without requiring manual page refreshes, but polling too frequently caused excessive API calls and increased server costs.
Solution
Implemented smart polling with React Query's refetch intervals, using longer intervals (30s) for background data and shorter intervals (5s) for actively viewed stocks. Added visibility change detection to pause polling when the tab is inactive.
Result
Reduced API calls by 30% while maintaining fresh data. Users receive timely updates without impacting performance or server costs.
Responsive Charts
Problem
Financial charts were difficult to read and interact with on mobile devices. Touch gestures conflicted with chart interactions, and small screens couldn't display all the information effectively.
Solution
Redesigned chart interface for mobile-first experience with touch-optimized controls, collapsible legend panels, and simplified technical indicators. Implemented responsive chart configurations that adjust complexity based on screen size.
Result
Mobile engagement increased by 45%. Charts now work seamlessly across all devices with intuitive touch interactions.
Tech Stack
Frontend
State Management
Data Visualization
Build Tools
Deployment
Results & Impact
User Impact
- •Saved investors 15+ hours weekly on research
- •Enabled analysis of 10,000+ stocks in one platform
- •Reduced time to find opportunities by 40%
Technical Achievements
- •90+ Lighthouse performance score
- •Reduced API calls by 30% through caching
- •Responsive UI across all devices
Personal Growth
- •Deepened expertise in state management
- •Mastered data visualization techniques
- •Gained financial domain knowledge
Lessons Learned
Start with user needs, not technical features
Initially focused on implementing impressive technical capabilities, but learned that understanding user workflows and pain points should drive feature development. User-centric design leads to better adoption and satisfaction.
Performance optimization is ongoing, not one-time
Performance isn't a checkbox to tick off during initial development. As the application grows and user patterns emerge, continuous monitoring and optimization are required to maintain a smooth experience.
Type safety prevents production bugs
TypeScript caught numerous potential runtime errors during development. The upfront investment in type definitions paid off significantly by preventing bugs from reaching production and improving code maintainability.
Documentation aids collaboration
Well-documented APIs, component props, and state management patterns made it easier to onboard new team members and collaborate effectively. Clear documentation reduced back-and-forth questions and improved development velocity.
Gallery
Dashboard Overview
Main landing page with key metrics and market overview
Stock Screener
Advanced filtering interface with real-time results
Interactive Charts
Price history with technical indicators and drawing tools
Portfolio Tracker
Holdings and performance analytics dashboard
Financial Statements
Income statement view with historical comparison
Mobile Experience
Responsive design optimized for mobile devices