LiveRadar
A Vite, Tailwind, and vanilla JavaScript web app for checking livestream status across multiple platforms from one lightweight dashboard, with local backup, import/export, serverless status paths, and Cloudflare Pages deployment.
Problem
Following streamers across different services is fragmented. Each platform has different room identifiers, status fields, image reliability, and browser access limits, so users need a single page that stays readable without requiring a separate account system.
Approach
LiveRadar standardizes platform status through browser and serverless status paths, then renders cards through a performance-conscious frontend. The app stores room lists locally, supports JSON backup and restore, degrades expensive visual effects on mobile and reduced-motion devices, and uses Cloudflare Pages Functions for platforms that need a server-side route.
Outcome
The result is a deployed web service that can monitor Douyu, Bilibili Live, Twitch, Kick, Picarto, and SOOP/AfreecaTV in one dashboard while keeping refresh feedback, card states, image fallbacks, and mobile layout under control.
Transferred production notes
- Built the Vite, Tailwind, and vanilla JavaScript frontend architecture.
- Designed the streamer card grid, command bar, refresh feedback, and mobile layout behavior.
- Standardized status fetching across browser-accessible endpoints and Cloudflare Pages Functions.
- Implemented local room storage, JSON backup import/export, image fallback, and card refresh stability.
- Reduced unnecessary DOM work, image reloads, and high-cost hover effects for large room lists.
- Maintained README documentation, public deployment notes, and validation workflow.
Player-facing structure
- Live, offline, replay, and favorite states must be distinguishable at a glance.
- Room data should remain local-first and backup-friendly instead of requiring an account system.
- Serverless status routes should absorb CORS-sensitive platforms while keeping the frontend deployable as a static app.
- The command bar must keep platform selection, room input, import/export, and refresh actions in one predictable surface.
- Motion and visual polish should respect reduced-motion preferences and degrade on mobile.
Comparable game language
- Operational dashboards
- Realtime status cards
- Local-first utility tools
Narrative and puzzle notes
- The README describes LiveRadar as a lightweight dashboard for centralized multi-platform streamer monitoring.
- Supported platforms include Douyu, Bilibili Live, Twitch, Kick, Picarto, and SOOP/AfreecaTV.
- The GitHub repository description is: Live tracking multiple streamers from different websites.
- The public Cloudflare Pages deployment returned HTTP 200 during this integration pass.
Original public pages
