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.

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.

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.

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.

Frontend: Next.js, TypeScript, Tailwind CSS, Shadcn UI

CMS: Ghost.org

Email: Mailchimp API

Deployment: Docker, Nginx, AWS

https://www.filtercoffee.co/home