Built a robust, SSR-powered site to handle heavy traffic and deep interactivity, including complex charting and wealth data visualization.
The Challenge
Forbes needed a modern, performant platform to present its globally anticipated Billionaires list for 2024. The site had to display data for thousands of individuals, complete with country-level filtering, wealth rankings, and financial history charts. It needed to handle massive traffic surges during launch week, ensure great SEO for organic discoverability, and support real-time interactivity without delay. Additionally, the editorial team required a flexible CMS integration to enable daily updates without engineer involvement. The complexity of this dataset, combined with the pressure of a global media spotlight, meant the frontend had to be flawless both in performance and presentation.
The Solution
To meet the scale and speed requirements, we used Next.js with server-side rendering, allowing pages to load quickly and be fully crawlable by search engines. The financial data was sourced via GraphQL and displayed in real-time across sortable and filterable tables. For visualization, we used D3.js to build interactive wealth charts, which included tooltips, transitions, and responsive scaling for all devices. The frontend was structured as a set of highly modular, typed components in React and TypeScript, with documentation in Storybook for cross-team alignment. We built accessibility into the UI from the start, validating color contrast, keyboard navigation, and screen reader compatibility. Deployment and scaling were managed through Google Cloud Platform, and we set up performance observability with DataDog. Ads were strategically placed and lazy-loaded to maintain performance while meeting monetization goals.
My Contribution
As the lead frontend engineer on this project, I owned the implementation and integration of all interactive UI components. I architected the filtering logic that allowed users to dynamically sort and drill down into the billionaire dataset. I built the wealth charts using D3.js, designing them to render smoothly across screen sizes and update instantly based on user interactions. I collaborated with backend engineers to define GraphQL queries for paginated, performant data access. I also handled ad integration in coordination with the Google Ads team, placing them in high-visibility areas while preserving layout stability. I conducted regular Lighthouse audits and performance profiling using DataDog, resolving render-blocking assets and optimizing bundle sizes. In addition, I mentored junior developers on modular design, testing strategy, and debugging in Next.js, ensuring strong code quality throughout the team.
Key Outcomes
- Handled over 2 million visits in the first 48 hours without any performance regressions
- Average time on page increased by 45 percent due to engaging visualizations and intuitive filtering
- Achieved 90+ Lighthouse scores in performance, SEO, and accessibility categories
- Drove high Google Discover visibility and social sharing, leading to increased ad impressions and revenue
- Enabled Forbes editorial teams to publish updates in real time through seamless GraphQL integrations
Lessons Learned
This project deepened my experience with real-time data rendering and high-volume visualization. I learned how to strike a balance between SEO and interactivity by combining SSR with dynamic client-side behavior. It also reinforced the importance of accessibility and inclusive design in high-profile content. Architecting components to support rich datasets while keeping performance and UX consistent across all devices was a key learning point. Most importantly, I saw firsthand how collaboration across frontend, backend, design, ads, and editorial teams is critical to shipping a complex, high-traffic digital product on time and at quality.