templatesvideostreaming

Starter template: Live-stream + vertical video app (Twitch, Bluesky LIVE badges) boilerplate

ffrees

2026-01-25

11 min read

Mobile-first vertical video starter: deploy a lightweight app with Twitch live status, Bluesky LIVE badges, and edge CDN—optimized for free-tier hosting.

Hook — Build a mobile-first vertical video app that doesn't break the bank

You're prototyping a TikTok-style vertical app for a side project or MVP, but recurring cloud bills and integration friction are slowing you down. You want a reusable boilerplate that (1) uses free-tier hosting, (2) shows live Twitch status and embeds streams, (3) surfaces Bluesky "LIVE" badges, and (4) serves images and embeds through a cheap/edge CDN — all deployable within an afternoon.

This article gives you a ready-to-deploy starter template and deployment path optimized for 2026 free tiers, with concrete serverless code, front-end patterns for mobile-first vertical video, caching rules, and upgrade paths when you need scale.

What you get (fast)

Static mobile-first client (HTML/CSS/vanilla JS) with vertical-feed UX (auto-play, swipe-to-next).
Edge serverless endpoints for Twitch live-status and token handling (Cloudflare Workers + Pages recommended).
Bluesky LIVE badge support — pull public posts/badges and show a tappable badge linking to the Bluesky post/player.
Embed CDN strategy for thumbnails/posters and light-weight embeds using Cloudflare CDN or similar.
Free-tier hosting checklist and upgrade paths for Mux/Cloudflare Stream/Bunny when you need VOD transcoding.

Why this matters in 2026

Vertical video continues to be the dominant mobile engagement format; investor activity in 2026 (for example, Holywater's $22M round to expand an AI vertical platform) signals sustained demand for mobile-first episodic content. At the same time, social networks are adding native metadata that makes embedding live status easier — Bluesky introduced shared Twitch LIVE badges in late 2025/early 2026 (driving a surge in installs) which you can leverage directly in your feed (source: TechCrunch; Appfigures trends).

"Bluesky adds new features to allow anyone to share when they’re live-streaming on Twitch and is rolling out LIVE badges amid a boost in app installs." — TechCrunch (Jan 2026)

Minimal architecture (edge + static)

The most cost-efficient architecture for a prototype: static front-end hosted on Cloudflare Pages / Vercel / Netlify + edge function(s) for small server-side jobs. Use Twitch for live video (embed iframe/HLS) and Bluesky's public posts for badges. Use the edge CDN to cache metadata and thumbnails.

Frontend: Cloudflare Pages (recommended) or Vercel/Netlify — free tiers with instant global CDN.
Serverless: Cloudflare Workers (edge routing + caching), or Vercel Serverless Functions as alternate.
Streaming: Twitch embed for live; for VOD later, add Mux or Cloudflare Stream (paid when you scale).
CDN for assets: Cloudflare CDN (free) or Fastly / Bunny for paid upgrades. Use edge caching for thumbnails and JSON responses.

Starter repo layout

Simple repo structure you can clone and deploy today:

./
  ├─ public/                # static assets, icons
  ├─ src/
  │  ├─ index.html         # single-page vertical app
  │  ├─ styles.css         # mobile-first CSS
  │  └─ app.js             # feed behavior, fetch status
  ├─ workers/
  │  ├─ twitch-status.js   # edge endpoint to fetch Twitch status & cache
  │  └─ bluesky-proxy.js   # optional: fetch Bluesky posts and normalize LIVE badges
  ├─ wrangler.toml         # Cloudflare Workers config
  └─ README.md

Key integrations — code snippets and how they work

1) Twitch: live status and embed

Twitch provides a Helix API to check if a user is live. You must keep your client ID and app access token server-sided. The edge endpoint will fetch the stream status and cache it at the edge for ~30–60 seconds to avoid rate limits and latency.

// workers/twitch-status.js (Cloudflare Worker)
  addEventListener('fetch', event => {
    event.respondWith(handle(event.request))
  })

  async function handle(req) {
    const url = new URL(req.url)
    const login = url.searchParams.get('user')
    if (!login) return new Response('user required', { status: 400 })

    // Use secrets via Wrangler/Pages secrets: TWITCH_CLIENT_ID, TWITCH_APP_TOKEN
    const clientId = TWITCH_CLIENT_ID
    const token = TWITCH_APP_TOKEN

    const api = `https://api.twitch.tv/helix/streams?user_login=${encodeURIComponent(login)}`
    const res = await fetch(api, {
      headers: { 'Client-ID': clientId, 'Authorization': `Bearer ${token}` }
    })
    const json = await res.json()

    // Cache for 60s at the edge
    const response = new Response(JSON.stringify(json), { headers: { 'Content-Type': 'application/json', 'Cache-Control': 'public, max-age=60' } })
    return response
  }

Front-end: call /workers/twitch-status?user=streamer_name, parse json.data[0] to see if stream is live, viewer_count, thumbnail_url. For mobile playback embed the Twitch player iframe for that channel when user taps the card. Use the Twitch Embed script (iframe) because HLS direct fetching is blocked and requires OAuth.

2) Bluesky LIVE badges

Bluesky's recent feature allows users to share when they're streaming on Twitch; public posts include metadata or a link you can detect. Approach:

Query Bluesky public posts for a user/feed (use Bluesky's AT Protocol API if available or fetch profile posts via the web endpoint).
Filter posts containing Twitch links or the LIVE badge marker.
Render a small tappable badge in the feed linking to the Bluesky post or the Twitch stream.

// workers/bluesky-proxy.js (simple pattern)
  addEventListener('fetch', event => event.respondWith(handle(event.request)))

  async function handle(req) {
    const url = new URL(req.url)
    const user = url.searchParams.get('user')
    const api = `https://bsky.social/xrpc/com.atproto.repo.listRecords?author=${encodeURIComponent(user)}`
    const res = await fetch(api)
    const json = await res.json()

    // Naive filter: find records that reference t.co or twitch.tv
    const badges = json.records?.filter(r => /twitch\.tv|t\.co/i.test(JSON.stringify(r))) || []
    return new Response(JSON.stringify(badges), { headers: { 'Content-Type': 'application/json', 'Cache-Control': 'public, max-age=30' } })
  }

On the client show a compact LIVE badge component when a Bluesky post references Twitch — link it to the Bluesky post for context and to the Twitch stream for playback.

3) Client-side vertical feed (HTML + JS)

Keep the client dependency-free for speed. Use IntersectionObserver to auto-play/pause and CSS to lock into a 9:16 vertical viewport.

<!-- src/index.html -->
  <div id="feed" class="vertical-feed">
    <!-- dynamic cards injected here -->
  </div>

  <script>
  async function fetchFeed() {
    // Example: static list or call your backend to get entries with: {id, type: 'twitch'|'video', thumb, twitchUser, blueskyPost}
    const items = await fetch('/feed.json').then(r=>r.json())
    const feed = document.getElementById('feed')
    items.forEach(item => {
      const card = document.createElement('div')
      card.className = 'card'
      card.innerHTML = `
        
        ${item.type==='twitch' ? `` : ''}
        ${item.blueskyPost ? `LIVE on Bluesky` : ''}
      `
      feed.appendChild(card)
    })

    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          const playBtn = e.target.querySelector('.play')
          // Lazy inject Twitch iframe when user taps the play button
          // or auto-play muted video for VOD
        } else {
          // pause/destroy embedded player to save bandwidth
        }
      })
    }, { threshold: 0.6 })

    document.querySelectorAll('.card').forEach(c => obs.observe(c))
  }

  fetchFeed()
  </script>

Embed CDN strategy — keep bandwidth cheap

Key idea: offload static assets and poster images to the edge CDN; avoid streaming VOD from your origin. For live, let Twitch handle HLS; for thumbnails and small assets, use Cloudflare Pages (already CDN-backed) or Cloudflare Images (if you use that product). For a direct-to-consumer approach that leans on CDN and edge logic see a related case study on CDN + edge strategies.

Cache JSON responses and badges at the edge with short TTLs (30–60s) to reflect live state while minimizing API calls.
Serve thumbnails as WebP on the edge and use low-res placeholders for the feed.
Do not proxy live HLS through your server — embed Twitch iframe; for VOD, move to a dedicated video CDN when needed.

Free-tier deployment checklist (Cloudflare recommended)

Create a Cloudflare Pages project for the static site (free).
Deploy Workers for the Twitch and Bluesky endpoints. Use Wrangler for dev and secrets (TWITCH_CLIENT_ID, TWITCH_APP_TOKEN).
Set Cache-Control headers on Workers responses and enable Cloudflare's CDN caching rules for your Pages site.
Use environment variables/secrets for tokens; do not expose them to the client.
Test with a few Twitch channels and a Bluesky test user; verify cache TTLs and X-Cache headers in responses.

Operational tips & cost-control (practical)

Cache aggressively at the edge. Twitch live status needs frequent update but not per-second: cache for 30–60s.
Destroy embeds when off-screen. Removing the iframe when a card is not visible keeps mobile memory and bandwidth low.
Limit autoplay quality on mobile. Use the Twitch player parameters and let users choose higher quality; autoswitching increases bandwidth costs on devices without user intent.
Monitor API usage. Track Twitch Helix usage in your serverless logs to spot hotspots; increase caching or batch requests if you exceed free quotas. For monitoring approaches see notes on observability and cache monitoring.
Use rate-limited fallbacks. If Twitch or Bluesky is unreachable, show a cached offline card with last-known status.

Scaling and upgrade paths

The template is intentionally minimal; when you need scale or VOD features, these are the typical next steps:

VOD transcoding & hosting: Mux, Cloudflare Stream, or Bunny. These provide HLS/DASH and CDN delivery but are paid. For build/test automation and heavier video models see CI/CD for generative video models.
Real-time messaging: add WebSockets or a pub/sub (Pusher, Ably) for chat or live metadata — low-latency tooling and session design are covered in low-latency tooling.
Edge compute scale: move rate-limited jobs to multiple edge workers and implement consistent caching across regions — see strategies for edge-first architectures.
Monetization: integrate ads or subscriptions at the stream/ep level; consider paid CDN features for DRM or higher egress caps.

Security, privacy, and platform compliance

Integrations with Twitch and Bluesky require you to follow their terms and handle tokens securely. Keep these rules in mind:

Never embed client secrets in the front-end. Use worker secrets or serverless environment variables.
Respect user privacy and rate limits for Bluesky scraping — prefer official APIs.
Be transparent about third-party cookies and trackers in your PWA or mobile wrapper. For ad and privacy best practices see programmatic with privacy.

Real-world example: prototype cost and time estimate

A conservative prototype timeline and free-tier cost estimate (based on 2026 free-tier offerings):

Developer time: 4–8 hours to fork the template, wire Twitch and Bluesky credentials, and deploy to Cloudflare Pages + Workers.
Hosting cost: $0 on Cloudflare Pages + Workers for low traffic proof-of-concept. Expect to transition to paid plans when you exceed the free egress or function usage limits. (See news on free hosting platforms adopting edge AI.)
Upgrade costs: once you need VOD transcoding, budget $50–200/month initially on Mux/Cloudflare Stream depending on minutes served.

2026 trends and future predictions (short)

- Vertical-first platforms will continue to attract funding for AI-driven personalization (see Holywater's $22M raise, Jan 2026). This pushes expectations for recommendation and clip-generation features.

- Social networks integrating native live indicators (Bluesky's LIVE badges) will make cross-platform discovery easier, reducing friction for streamers and enabling unified feeds that mix platform badges with embedded players.

- Edge compute and free-tier CDNs will remain the fastest path for prototypes; serverless at the edge combined with managed streaming will be the typical scale path in 2026.

Actionable checklist — deploy in an afternoon

Fork the starter repo (structure above).
Provision Twitch App credentials (client id + client secret), exchange for app token via client-credentials flow, store secrets in Workers/Pages.
Deploy Workers: twitch-status and bluesky-proxy, set Cache-Control headers to 30–60s.
Update src/feed.json with a few demo items referencing Twitch channel names and Bluesky posts.
Deploy static site to Cloudflare Pages and test on mobile. Confirm the live badge appears and Twitch iframe loads on demand.

Troubleshooting & common pitfalls

Twitch embed not working on iOS: ensure the iframe parameters and Referer headers are correct; test in Safari and Chrome mobile browsers.
Edge cache shows stale status: lower the TTL and implement a manual refresh button for users.
Exceeded API quotas: batch multiple user checks in one request (where possible) or rotate through cached pages.

Final notes — why this template saves time and money

This boilerplate focuses on the intersection of three practical constraints for devs and IT admins in 2026: rapid iteration, minimal cloud spend, and cross-platform discovery. You get a mobile-first UX, serverless edge integration for live metadata, and a CDN-friendly asset strategy — deployable on free tiers and upgradeable to paid streaming and edge services when you validate product-market fit.

Call to action

Ready to deploy? Clone the starter template, provision your Twitch app credentials, and deploy to Cloudflare Pages + Workers today. If you want, paste your Twitch channel and Bluesky handle here and I’ll produce a ready-to-deploy feed.json and worker config tailored to your channels.

frees

Contributor

Senior editor and content strategist. Writing about technology, design, and the future of digital media. Follow along for deep dives into the industry's moving parts.