Add FastAPI backend and React frontend subprojects
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)
This commit is contained in:
@@ -0,0 +1,61 @@
|
||||
# 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
|
||||
|
||||
```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
|
||||
- **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.
|
||||
Reference in New Issue
Block a user