Creating a Free Video Ad Network on the Edge

Talked at Remix Tokyo x Cloudflare Meetup
https://lu.ma/wv9xzam7

Links:
media: https://tokyo.hyper-local.app
video ads demo: https://ad-server.van.techtalk.jp/example/media1
management ui demo: https://ui.van.techtalk.jp/
github: https://github.com/coji/video-ad-network

A technical deep dive into building a zero-cost video ad network using Cloudflare Workers, Hono, and Remix. This presentation covers the implementation of a complete ad serving system including VAST 4.1 support, multi-tenant management UI, and edge-distributed architecture. Perfect for developers interested in edge computing and ad tech infrastructure. Built as an open-source solution for small to medium-sized publishers.

Transcript

1. Creating a Free Video Ad Network on the Edge Mizoguchi Coji @techtalkjp Start Cloudflare x Hono x Remix
2. Motivation Solo media project: "Hyperlocal Tokyo" https://tokyo.hyper-local.app/ Use it to find good places to go right now Planning to continue for at least 10 years Eventually want to create and sell ad slots myself But existing services… Full of ugly ads Only cater to large-scale media Can’t create custom formats Even though I’m creating the media myself "Now, can I do it alone for free?" It’s almost a hobby. AI is available. Let’s create a video ad network from scratch Open source!
3. Demo 1. Ad server and JS SDK Video ad playback Audio ad playback Tracking vast impression progress (0%, 25%, 50%, 75%, 100%) click 2. Management UI: For advertisers/publishers Multi-tenant authentication with Clerk Delivery settings Ad slot management Check delivery performance
4. Technologies Used Cloudflare R2: Video storage Workers: Ad server implementation (Hono) VAST 4.1: Video ad standard Workers: Management UI (Remix) UI: shadcn/ui Clerk: Authentication & multi-tenancy Turso: Edge distributed DB (distributed SQLite) Kysely shadcn/ui
5. Architecture
6. Features Zero cost Up to 5 million impressions / month Everything runs on the edge Everything is built with TypeScript maintaining everything alone Start small and minimal Rebuild if needed Multi-tenant support Advertisers Publishers
7. Interesting Points of Implementation Ad selection SQL that INNER JOINs vigorously 😂 // Fetch ads matching category, media type, and companion banner sizes await db .selectFrom('ads') .innerJoin('companionBanners', 'companionBanners.adId', 'ads.id') .innerJoin('adGroups', 'adGroups.id', 'ads.adGroupId') .innerJoin('campaigns', 'campaigns.id', 'adGroups.campaignId') .innerJoin('advertisers', 'advertisers.id', 'campaigns.advertiserId') .where('campaigns.status', '==', 'ACTIVE') .where('ads.type', '==', mediaType) .where( 'companionBanners.width', 'in', companionSizes.map((s) => s.width), ) .select([ 'ads.id', 'ads.type', 'ads.url', 'ads.duration', 'ads.width', 'ads.height', 'ads.mimeType', 'ads.description',
8. Future Plans Implement common features like "even distribution" and "front-loading" for campaign budget management. Properly create the UI for ad submission It’s a bit tedious, but I’ll use comform. Need a dashboard and reports for the UI Waiting for the merge of DuckDB Wasm’s OPFS support by @eiichi292929. Please. Will maintain it steadily as OSS. It’s MIT licensed, so feel free to use it. If there’s demand, adding paid features could be interesting. Source code: github.com/coji/video-ad-network
9. Thank you https://github.com/coji/video-ad-network @techtalkjp