Rebuilt the entire experience with Gatsby to ensure static optimization and ultra-fast performance for millions of users. Focused on clean modular architecture and seamless content delivery.
The Challenge
Forbes needed a complete rebuild of their flagship “30 Under 30” list to meet modern performance standards, enable global reach, and support dynamic content rollout while maintaining editorial control. The legacy system suffered from slow load times, brittle code, and poor modularity, hindering team scalability and content updates.
The Solution
We chose Gatsby as the foundation for its static site generation (SSG) capabilities, which allowed us to pre-render thousands of pages for optimal SEO and latency. We integrated GraphQL for content sourcing from the CMS, enabling efficient and declarative data fetching. Deployment was fully automated through a CI/CD pipeline on GCP, and we closely monitored frontend performance via DataDog and Google Ads tracking to validate marketing KPIs.
My Contribution
Led the frontend development of the entire 30 Under 30 experience. Designed a component-based architecture using React and TypeScript, enabling reuse across multiple Forbes list pages. Built dynamic content modules integrated via GraphQL. Worked closely with stakeholders to iterate on design, conducted performance audits, and developed unit tests and Storybook documentation.
Key Outcomes
- 🚀 50% improvement in average page load time across desktop and mobile
- 📈 Achieved top SEO rankings for the term “30 Under 30” within days of launch
- 💰 Increased ad engagement and viewability, leading to stronger monetization
- 🧩 Created a component library reused across other Forbes flagship pages
Lessons Learned
How static generation at scale can drastically reduce complexity while boosting performance. Importance of collaboration between engineering and editorial teams to ensure scalable CMS-driven publishing. Fine-tuned understanding of content-heavy SSR vs SSG trade-offs in large-scale media.