alex
3c432473e5
Backend: - FastAPI app with 17 REST endpoints covering dashboard, monitoring, media index, file browser, and jobs - Reuses existing clients/domain/services unchanged - pydantic-settings config, dependency injection, CORS setup - Auto-generated OpenAPI docs at /docs Frontend: - Vite + React + TypeScript SPA - @tanstack/react-query for data fetching with polling - ag-grid-react for media table and file browser - recharts for monitoring charts - Tailwind CSS styling - 4 pages: Dashboard, Monitoring, Media, File Browser - Typed API client matching all backend endpoints Also: - docs/MIGRATION_PLAN.md with full architecture plan - Updated .gitignore for both subprojects - Streamlit app preserved for now (can coexist)
1.3 KiB
1.3 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 - 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.