1.4 KiB
1.4 KiB
Frontend - Media Library Viewer
React + TypeScript SPA for the Media Library Viewer, consuming the FastAPI backend.
Tech Stack
- Vite — Build tool
- React 18+ — UI framework
- TypeScript — Type safety
- @tanstack/react-query — Data fetching/caching
- ag-grid-react — Data tables (media, file browser)
- recharts — Monitoring charts
- react-router-dom — Client-side routing
- Tailwind CSS — Styling
Setup
cd frontend
npm install
Development
npm run dev
Runs on http://localhost:5173 with API requests proxied to http://localhost:8000.
Make sure the backend is running:
cd ../backend
uvicorn main:app --reload --port 8000
Build
npm run build
Output goes to frontend/dist/.
Pages
- Dashboard (
/) — Now playing, server overview, library stats - Monitoring (
/monitoring) — CPU/IO wait/RAM/network/disk charts, collector controls - Media (
/media) — Full-library table with sort/filter/search - Users (
/users) — Read-only Jellyfin user list with optional Jellyseerr enrichment - File Browser (
/files) — Remote directory browsing, ffprobe preview, jobs
Environment Variables
Create a .env file in frontend/ if the API is not at http://localhost:8000:
VITE_API_URL=http://your-backend-host:8000
In development, the Vite proxy handles /api requests automatically.