Video Admin Console
React console for uploading, encoding, streaming and sharing video.
Role · Frontend engineer — app shell, design system, uploads, players and analytics.
- 16
- Routes
- 10 MB
- Upload chunk
- 3
- Parallel chunks
- 5
- Roles
Overview
The staff-facing console for the video platform. Teams upload large videos in parallel chunks, organise them into galleries and drives, monitor the encoding queue and worker fleet, run live streams and publish public watch pages — all behind role-based access.
Architecture
SPA
Vite-built React app with a typed fetch layer over the transcoding engine's API.
State
Jotai atoms for UI state; TanStack Query for server state and caching.
Delivery
Docker image (Node build, Nginx serve) or an S3 + CloudFront static deployment.
What it does
Uploads
- Chunked uploads — 10 MB chunks, three concurrent — with progress tracking
- Drive and gallery folders for organising media
Library
- Video list and detail views
- Gallery and drive with nested folders and tags
- Gallery-wide search and a Cmd+K command palette
Operations
- Encoding queue view
- Logs and worker-fleet views
- Analytics dashboards
Live
- Live-stream list and detail with stream sync to the streaming server
Playback
- Video.js, hls.js and Vidstack players
- Video chapter editor
- Shareable public watch pages
- Player analytics collection
Workspace & access
- Teams, settings, profile and login
- Dark / light theming, design system and app shell
- JWT auth with permission guards for admin, standard, uploader, API and faculty roles
Engineering decisions
Large files over flaky networks
Chunked, parallel uploads with per-chunk progress keep multi-gigabyte lecture uploads resilient.
One console, many roles
Navigation and routes are generated from a permission map so faculty, uploaders and admins each see a coherent subset.