YouTube Video Analysis Dashboard

Predict how a YouTube video will perform: before you publish it, with a trained machine-learning model and a polished analytics dashboard.

The full application lives in FULLONE/, frontend at the folder root, ML inference API in FULLONE/backend/.

Creators and marketing teams waste budget publishing videos blind, with no signal on whether the metadata gives a video a fighting chance. This project pairs a modern React + TypeScript dashboard with a trained XGBoost model that reads a video's metadata, title, description, language, country, tag count, engineers 15 predictive features from it, and returns an expected-views prediction with a clear High / Medium / Low success score. The result is a complete, end-to-end product: real ML inference served over a typed FastAPI endpoint, wrapped in a clean, bilingual-aware dashboard UI.

Screenshots

Key Features

• ML-powered success prediction: a trained XGBoost regressor (shipped in the repo as xgboost_youtube_balanced.pkl) predicts expected views from video metadata alone, then converts the raw prediction into an interpretable 0-1 score with High / Medium / Low bands.
• Real feature engineering, not a wrapper: the API derives 15 features from five raw inputs: character and word counts, title-to-description ratios, description-quality signals, tags-per-title-word density, and label-encoded country/language.
• Instant manual estimator: a client-side scorer gives creators an immediate 0-100 score plus concrete, actionable tips ("shorten the title", "use 5-15 focused tags") without any server round-trip.
• Full analytics dashboard UX: paste a YouTube URL and walk through a KPI breakdown (views, watch time, engagement rate) with an analysis-history view; these screens currently run on sample data to demonstrate the complete workflow end to end.
• Smart search navigation: the navbar search understands intent in both English and Arabic ("stats", "تحليلات", "اعدادات"…) and routes you to the right section automatically.
• Light & dark themes: every screen is styled for both modes with Tailwind's dark variants.
• Typed API contract: Pydantic request/response models give the prediction endpoint validation for free, plus auto-generated interactive docs at /docs.

Tech Stack

Frontend (FULLONE/)

• React 19 + TypeScript 5.9
• Vite (rolldown-vite) with tsc -b type-checked builds
• Tailwind CSS 4
• react-icons

Backend (FULLONE/backend/)

• Python + FastAPI with Pydantic models and CORS middleware
• XGBoost trained model + scikit-learn label encoders (persisted with pickle)
• NumPy for feature vector construction

Deployment

• Vercel config with hardened HTTP security headers

Quick Start

No API keys or environment variables are required to run the project locally.

1. Frontend

cd FULLONE
npm install
npm run dev

Open http://localhost:5173.

2. ML inference API

cd FULLONE/backend
pip install fastapi "uvicorn[standard]" xgboost scikit-learn numpy
uvicorn main:app --reload

The API starts on http://127.0.0.1:8000 (interactive docs at /docs). Try the model directly:

curl -X POST http://127.0.0.1:8000/predict/manual \
  -H "Content-Type: application/json" \
  -d '{"title":"How to Grow a YouTube Channel","country":"JO","description":"A practical guide for new creators.","language":"ar","tags_num":10}'

Response: a 0-1 score, a label (Low / Medium / High), and the model's predicted_views.

Engineering Highlights

• Robust categorical handling: unseen countries or languages never crash inference; a safe-encode fallback maps them to a known class so the endpoint stays reliable on real-world input.
• Interpretable scoring: raw view predictions are normalized on a log scale to a bounded 0-1 score, so a 10x difference in predicted reach reads as a meaningful score gap rather than a meaningless huge number.
• Defense-in-depth headers: the deployment config sets X-Frame-Options: DENY, X-Content-Type-Options: nosniff, a strict Referrer-Policy, and a locked-down Permissions-Policy on every response.
• Fully typed across the stack: TypeScript on the client, Pydantic schemas on the server; the build fails on type errors (tsc -b && vite build).
• Bilingual UX thinking: search keyword routing and estimator defaults were designed for Arabic-speaking markets as well as English ones.

What This Project Demonstrates

• Taking a machine-learning model from training artifact to production-style inference API, model serialization, feature-pipeline parity between training and serving, and safe handling of out-of-vocabulary inputs.
• Building a complete product UI in React + TypeScript: authentication flow, multi-section dashboard, forms with validation and instant feedback, and consistent theming.
• API design with typed contracts, CORS configuration, and self-documenting endpoints.
• Pragmatic scoping: real ML where it delivers value, sample data where it demonstrates UX, and an honest line between the two.

---

Built by Waseem Abu Fares, github.com/w4seemdev