63 lines
1.4 KiB
Markdown
63 lines
1.4 KiB
Markdown
# Manage Frontend
|
|
|
|
React + TypeScript SPA for Manage, 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
|
|
|
|
```bash
|
|
cd frontend
|
|
npm install
|
|
```
|
|
|
|
## Development
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Runs on http://localhost:5173 with API requests proxied to http://localhost:8000.
|
|
|
|
Make sure the backend is running:
|
|
|
|
```bash
|
|
cd ../backend
|
|
uvicorn main:app --reload --port 8000
|
|
```
|
|
|
|
## Build
|
|
|
|
```bash
|
|
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`:
|
|
|
|
```bash
|
|
VITE_API_URL=http://your-backend-host:8000
|
|
```
|
|
|
|
In development, the Vite proxy handles `/api` requests automatically.
|