HLS
Adaptive streaming playback
S3
Film + thumbnail origin
Free
Ad-supported, no paywall
Netlify
Serverless hosting + Forms
The Challenge
The Solution
Features
HLS streaming player
A custom react-player UI with skip, seek, fullscreen, auto-hiding controls, and a buffering state.
Genre catalog
A Supabase-backed film library rendered into genre rows (drama, horror, comedy, animation, and more).
Build-time S3 ingestion
A Node script scans the S3 bucket for HLS films, thumbnails, and metadata to generate the catalog dataset.
Filmmaker submissions
Filmmakers submit films through Netlify Forms with reCAPTCHA and a homegrown math captcha.
Search & discovery
Debounced search and a details drawer make the catalog quick to browse.
Ad & SEO monetization
AdSense and Ezoic ads, GA4 with internal-traffic exclusion, next-sitemap, and IndexNow auto-submission.
System Architecture
Origin
AWS S3
Ingest
Ingest Script
Catalog
Supabase
App
Next.js (Netlify)
Playback
react-player
Technology Stack
Frontend
Next.js 14 (App Router)
React 18
TailwindMaterial TailwindZustandVideo & Streaming
react-playerscreenfullHLS (.m3u8)Storage & Data
AWS S3Supabase (Postgres)aws-sdkInfra & Growth
Netlifynext-sitemapAdSense / EzoicGA4Key Learnings
- •Pre-transcoding films to HLS in S3 meant the app just streams the .m3u8 directly, with no server-side video work at request time.
- •A build-time S3 scan generated the entire catalog dataset, keeping runtime reads cheap against Supabase.
- •A custom react-player UI gave full control over the controls and buffering states the default player couldn't.
- •An ad-supported model plus heavy SEO (sitemaps, IndexNow) kept the platform completely free for viewers.
