build a dashboard that showcase various trending topics from reddit and hackernews. based on today, 7 days, month etc.... also under each topic show various updates.... also show a graph with trends...
10:05am

To build a Reddit and Hacker News trending topics dashboard with time-based filtering (today, 7 days, month) and trend graphs, we can create a React-based dashboard using:

  • APIs: Reddit (/r/all, /r/popular) and Hacker News (Firebase API).
  • Charts: Recharts for trend visualization.
  • UI: Tailwind CSS for styling, shadcn/ui for components.

Dashboard Features

  1. Time Filters: Today, 7 days, 1 month.
  2. Trending Topics: Fetched from Reddit and Hacker News.
  3. Updates per Topic: Show posts/updates under each topic.
  4. Trend Graph: Line/bar chart for topic popularity over time.

Implementation Plan

  1. API Integration:

    • Reddit: Use https://www.reddit.com/r/all.json (or /r/popular.json) with t (time) parameter.
    • Hacker News: Use https://hacker-news.firebaseio.com/v0/topstories.json and fetch item details.
  2. Data Processing:

    • Aggregate posts by topic, count mentions, and track trends over time.
  3. UI Components:

    • Time filter dropdown.
    • Topic cards with updates.
    • Trend graph (Recharts).

Let’s Build the Dashboard

I’ll create a React + Tailwind + Recharts dashboard. You can edit and iterate on this.


Canvas: Reddit & Hacker News Trending Dashboard (React)

10:05am
build it
10:06am
Reddit & Hacker News Trending Dashboard

Your Reddit & Hacker News Trending Dashboard is ready! Here’s what it includes:

  • Time Filters: Switch between Today, 7 Days, and 30 Days to see trending topics.
  • Trending Topics: Cards for Reddit and Hacker News, each with updates under every topic.
  • Trend Graph: A line chart showing the popularity of Reddit vs. Hacker News over the last 7 days.

Next Steps

  • Connect to Real APIs: Replace the mock data with actual API calls to Reddit (/r/all.json) and Hacker News (firebaseio.com).
  • Customize: Adjust colors, layout, or add more features (e.g., search, topic details).
  • Deploy: Host it on Vercel, Netlify, or GitHub Pages.

Try it out! Click the canvas to edit or expand the dashboard. Want to add anything else?

10:06am

This is a shared conversation and may include unverified content that doesn't reflect Mistral AI's views. Login to resume chatting.

Vibe can make mistakes. Check answers. Learn more