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
https://www.youtube.com/watch?v=7fIvHuqiLws
#financialfreedomllc #businesstips #business #entrepreneur #businessowner #entrepreneurship #marketing #smallbusiness #businesscoach #digitalmarketing #success #entrepreneurlife #motivation #businessideas #businessgrowth #businesswoman #businessman #businessquotes #businessowners #businessstrategy #startup #businesslife #businessmindset #businessminded #entrepreneurs #businessadvice #entrepreneurmindset #marketingtips #onlinebusiness #branding