Financial news platform for everyday investors. Built a Next.js frontend on Ghost CMS with dynamic content rendering, lazy loading, and SEO optimization.
Filter Coffee delivers daily business and investment news to everyday investors. They needed a fast, SEO-friendly platform that editors could update through Ghost CMS.
filtercoffee.co - newsletter page
What Made This Hard
Ghost returns messy content structures. Articles aren't just text. They include image galleries, embedded videos, quote callouts, data visualizations, and custom layouts. Each article type (news, data stories, IPO explainers, newsletters) has different design requirements. The frontend had to parse Ghost's JSON payload and render each section type correctly.
News sites live or die by page speed and SEO. Heavy images, embedded content, and multiple article sections add up fast. Slow pages lose readers to competitors before they even see the headline.
How I Built It
I built a dynamic component system that reads Ghost's JSON structure, identifies section types, and renders the appropriate component. Image sections get lazy loading and Next.js optimization. Video embeds load only when visible. Text blocks support rich formatting without extra libraries.
For SEO, I configured dynamic meta tags, Open Graph data, and structured markup for each article. Ghost provides the content, but all optimization happens on the Next.js side.
Mailchimp handles newsletter signups across the site. Users can subscribe from multiple touchpoints, and preferences sync automatically with audience segments.
What I'd Highlight
Content renderer handles any section type Ghost outputs without code changes.
Core Web Vitals stay green despite image-heavy articles.
Editors create complex layouts in Ghost; the frontend adapts automatically.