Build Medium-Style Trending Pages (Hot, New, Top) for Any Tag

Readers trust “Best of JavaScript this week.” Medium already ranks stories—you expose that ranking through topfeeds, latestposts, and tag info as JSON your UI controls.

Tool outcome: /topics/[slug] page with Hot | New | Top month tabs.

UX patterns

Tabs map to topfeeds/{tag}/{mode} modes (hot, new, top-week, top-month, etc.—match your API docs).
Topic landing — hero stats from /tag/{tag} + feed below.
Sidebar — /related_tags/{tag} for internal links (SEO hubs).

Data layer

const API = 'https://api.zenndra.com';
const headers = { Authorization: `Bearer ${process.env.ZENNDRA_API_KEY}` };

export async function getTopicPage(tag, mode = 'hot') {
  const [info, feed, related] = await Promise.all([
    fetch(`${API}/tag/${encodeURIComponent(tag)}`, { headers }).then((r) => r.json()),
    fetch(`${API}/topfeeds/${encodeURIComponent(tag)}/${mode}`, { headers }).then((r) => r.json()),
    fetch(`${API}/related_tags/${encodeURIComponent(tag)}`, { headers }).then((r) => r.json()),
  ]);

  return { info, feed, related };
}

export async function getLatest(tag) {
  const res = await fetch(`${API}/latestposts/${encodeURIComponent(tag)}`, { headers });
  return res.json();
}

Caching strategy

Surface	TTL	Why
Hot / Top	5–15 min	Trending ≠ real-time
Tag info	1 h	Slow-changing stats
Latest	2–5 min	Fresher, still cacheable

Pre-render popular tags at build time for static hosts (Astro ISR).

Frontend tab component (sketch)

const MODES = [
  { id: 'hot', label: 'Hot' },
  { id: 'new', label: 'New' },
  { id: 'top-month', label: 'Top month' },
];

export function TopicTabs({ tag, initialMode = 'hot' }) {
  const [mode, setMode] = useState(initialMode);
  const { data } = useSWR(['topic', tag, mode], () => getTopicPage(tag, mode));
  // render cards from data.feed.articles
}