Next.js + FastAPI Tutorial: Track Every YouTube Video Event!

Video Description

Watching videos create a ton of data. Let's track, analyze, and own it. In this course, we're going to integrate YouTube Video embeds into a Next.js application. Then, we're going to track and monitor every possible event from YouTube videos with FastAPI and time-series Postgres. This type of data is called "time series" because it's data that occurs over time. Time series data is typically a *ton* of data since so much can happen in only a few seconds. For example... - video loaded (cued) - video played - video paused - video played - Video progress (after N seconds) - video progress (after N Seconds) - video paused - video played That's 8 events that could occur in 5 seconds. What about 250 users? 10,000? 100,000? As you can see, this amount of data can balloon very quickly for a single user -- especially if they are jump around videos often. Modern video platforms and websites do this for good reason: what resonates with our users? How can we help them find more of it? To answer these questions we need to store the data. But how? - Postgres? - MySQL? - Redis? - S3? While all these data stores *might* be able to handle the load, they a missing a key ingredient: scale & time-series. If you were using plain Postgres to track this data. I'd recommend your front-end does some more heavy lifting and just combine the events so you're not sending so much data. So you sacrifice some of the data so you can save your database. That's why you need Timescale. It's an extension for Postgres that optimizes Postgres for time series data while still giving you all the benefits of PostgresSQL and SQL databases. With time series optimized Postgres, we can send *all* of the events. Timescale can handle massive amounts of data coming in and can aggregate that massive amounts of data over chunks of time. This course is about how to technically implement Next.js for the frontend, FastAPI for the backend, and tied together with SQLModel and TimescaleDB though timescaledb-python and Docker. Are you ready to get started? 🕹️ Key Tech: Next.js FastAPI Timescale + PostgresSQL Custom React.js hooks SQLModel + SQLAlchemy TimescaleDB Docker 🖥️ References - Next.js Repo on Github: https://github.com/codingforentrepreneurs/youtube-video-player-nextjs - FastAPI Repo on GitHub: https://github.com/codingforentrepreneurs/youtube-video-analytics-fastapi - My timescaledb-python package: https://pypi.org/project/timescaledb/ - My FastAPI deployment to Railway guide: https://codingforentrepreneurs.com/blog/deploy-fastapi-to-railway-with-this-dockerfile ⭐️ Get production-ready & managed Timescale for free right now: https://tsdb.co/justin-api-2 (sign up at this link as it helps us make more videos)⭐️ 👉 Topics Covered: ✅ Next.js Integration with YouTube Player ✅ Creating React Hooks for Video Tracking ✅ FastAPI Backend with Docker ✅ Data Storage with SQLModel and TimescaleDB ✅ Time Series Analytics and Aggregations ✅ Session-based User Tracking ✅ Building Interactive Metrics Dashboards Chapters: 00:00:00 Welcome 00:02:48 Demo 00:08:11 Next.js Hello World 00:10:15 YouTube Video Embed in Next.js 00:17:05 YouTube Player API as Reactjs Hook 00:28:45 Tracking Video Player State 00:43:04 Start Time & Playback Tracking 00:50:10 YouTube URL Input Form 00:54:47 Extract YouTube ID & Redirect 01:03:23 Mock Sending YouTube Player Events 01:12:13 FastAPI + Docker Rapid Fire Hello World 01:27:11 FastAPI Endpoint for Video Events 01:35:34 FastAPI CORS & Origin Referer 01:43:23 Environment Variables and Docker Compose 01:48:54 camelCase to snake_case 01:54:30 Pydantic to SQLModel 01:59:16 Integrate SQLModel with FastAPI 02:06:32 Storing Data to Postgres with SQLModel 02:13:46 SQLModel to TimescaleModel 02:21:42 Watch Sessions 02:30:07 useWatchSession Hooks 02:42:55 Enrich Requests with Watch Session ID 02:47:28 Ensure Valid Watch Sessions 02:54:15 Time Series Data Aggregations with SQLModel & TimescaleDB 03:05:07 Response Model & Video Stats Aggregations 03:15:09 Query Params for Time Bucket & Range 03:22:14 Metrics Table with SWR 03:31:37 Select Time Bucket in Next.js 03:37:42 Improved Metrics Query and Display Table 03:44:35 Top Videos by Unique Views 03:54:34 Thank you and Next Steps