Outliers: YouTube Trend Explorer

Tech Stack

React 18, Tailwind CSS

Role

Front‑end development,

Scroll down
May 2025

Objective

Build a zero‑setup tool for creators and analysts to paste a JSON dump and instantly filter by outlier score, views, VPH, publish window, length, and more.

Why I built Outliers

Scrolling through YouTube Analytics or spreadsheets to find breakout ideas is painful.
I wanted a one‑screen tool where I could:

  1. Paste the raw JSON I already pull from the Outliers/Breakout endpoint.
  2. See every potential winner ranked by outlier score.
  3. Filter down by publish date, views per hour, length, and channel size.
  4. Click a card to watch the video in‑app and grab instant context.

No log‑ins, no spreadsheets, no waiting for a heavy BI dashboard to load.

How it works

  1. Drop your JSON – Hit Load Data and the app auto‑parses the array:
const vids: Video[] = obj.data.map(v => ({
id: v.video_id,
title: v.video_title,
// …other mapped fields
}));
  1. Client‑side filtering – Five Radix sliders + a publish‑date dropdown give you fine‑grained control with zero extra network calls.
  2. Modal preview – Click any card to open an embedded YouTube player and quick stats (views, VPH, duration, outlier score).
  3. Sample dataset – No JSON handy? The Load Sample button fetches /example.json so visitors can play immediately.

What I learned

  • Keep setup friction near zero – a pasted blob is faster than OAuth.
  • Radix primitives save hours of accessibility edge‑cases.
  • Small JSON > DB for side‑projects; everything lives in local memory and still feels instant.

Next steps

  • Export to CSV / Google Sheets
  • Save filter presets in localStorage
  • Tag & group videos for multi‑channel research
  • Serverless endpoint to pull fresh data on a schedule