DEV Community

SAJID ALI
SAJID ALI

Posted on

Building SK:ANIME — A Lightweight Anime Streaming App on Cloudflare Workers

#showdev #webdev #javascript #cloudflare

Over the past few weeks, I’ve been building SK:ANIME, a modern, fast, and clean anime streaming web application designed to eliminate the common frustrations of watching anime online—namely heavy load times, intrusive popups, and broken video servers.

Here is an architectural walkthrough of how it was built, why Cloudflare Workers was the engine of choice, and how edge caching and multi-server fallback work.

🌐 Live Application

🎯 The Problem with Traditional Anime Sites

Most free anime platforms suffer from two major bottlenecks:

  1. Aggressive Ads & Redirects: Countless deceptive click-jacking overlays, popunders, and crypto-miners ruin the user experience.
  2. Slow Cold Starts & Server Bottlenecks: Centralized Node.js/PHP backend servers struggle during peak hours (like new episode releases on weekends).

🚀 Architecture & Tech Stack

1. Edge Compute via Cloudflare Workers

Instead of paying for heavy VM instances or managing container clusters, the entire backend API proxy and SSR routing is handled through Cloudflare Workers:

  • 0ms Cold Starts: Instant global delivery across 300+ data centers worldwide.
  • V8 Isolates: Lightweight sandboxes executing code right at the user's nearest edge node.

2. Multi-Tier Edge Caching

Anime metadata, trending catalogues, and search queries rarely change second-by-second. We utilize Cloudflare Cache API:

// Example Edge Cache Strategy
const cache = caches.default;
let response = await cache.match(request);

if (!response) {
  response = await fetchAndTransformMetadata(animeId);
  // Cache at the edge for 1 hour, stale-while-revalidate
  response.headers.set('Cache-Control', 'public, max-age=3600, s-maxage=3600');
  ctx.waitUntil(cache.put(request, response.clone()));
}
Enter fullscreen mode Exit fullscreen mode

3. Zero Intrusive Ads Experience

One of our core design pillars was creating a distraction-free environment:

  • Clean UI: Modern dark mode interface inspired by modern streaming dashboards.
  • No Popup Hijacking: Eliminates unclosable tab redirects and malicious script injections.

4. Resilient Multi-Server Video Playback

Nothing is more frustrating than hitting "Play" only to find an expired stream or geo-blocked CDN link. SK:ANIME integrates a multi-server fallback system:

  • HD Streams: Auto-selects the fastest server (StreamWish, VidHide, MegaCloud, etc.).
  • Automatic Fallback: If an embed or HLS playlist fails, the player automatically switches to secondary and tertiary mirrors without refreshing the page.

5. Hindi Dubbed & English Subbed Support

To cater to both international anime fans and the fast-growing South Asian anime community, SK:ANIME features dedicated sections for:

  • Popular Hindi Dubbed anime (Solo Leveling, Demon Slayer, Jujutsu Kaisen, Naruto, Bleach)
  • Simulcasts with high-quality English subtitles

🔮 What's Next?

  • Custom watchlist sync with LocalStorage & AniList OAuth
  • Keyboard shortcuts for player seek/volume/fullscreen
  • Offline episode caching (PWA integration)

Check out the project live at SK:ANIME and let me know your thoughts or feedback!

Top comments (0)