# Media Downloader Web Interface - Quick Start Guide

## Installation & First Run

### 1. Install Backend Dependencies

```bash
cd /opt/media-downloader/web/backend
pip3 install -r requirements.txt
```

### 2. Install Frontend Dependencies

```bash
cd /opt/media-downloader/web/frontend
npm install
```

### 3. Start the Web Interface

```bash
cd /opt/media-downloader/web
./start.sh
```

The script will:
- ✓ Check all dependencies
- ✓ Install missing packages
- ✓ Start the backend API (port 8000)
- ✓ Start the frontend UI (port 5173)
- ✓ Open your browser automatically

### 4. Access the Dashboard

Open your browser to: **http://localhost:5173**

## What You Can Do

### Dashboard
- View real-time download statistics
- See platform distribution charts
- Monitor recent activity
- Check system status

### Downloads
- Browse all downloaded media
- Filter by platform or source
- Delete unwanted records
- View file details

### Platforms
- See all configured platforms
- Trigger manual downloads
- Check platform status
- View account information

### Logs
- Real-time log streaming
- Filter by log level
- Export logs as text
- Monitor system health

### Configuration
- Edit settings.json directly
- Validate JSON syntax
- Save changes instantly
- Reference documentation

## One-Line Start

```bash
cd /opt/media-downloader/web && ./start.sh
```

## Stopping the Interface

Press `Ctrl+C` in the terminal where you started the services.

## Troubleshooting

**Port already in use?**
```bash
# Kill existing processes
sudo lsof -ti:8000 | xargs kill -9
sudo lsof -ti:5173 | xargs kill -9
```

**Backend won't start?**
```bash
# Check logs
tail -f /tmp/media-downloader-api.log
```

**Frontend build errors?**
```bash
cd /opt/media-downloader/web/frontend
rm -rf node_modules package-lock.json
npm install
```

**Database connection errors?**
```bash
# Verify database exists
ls -la /opt/media-downloader/database/media_downloader.db
```

## Production Deployment

See `README.md` for:
- Systemd service setup
- Nginx reverse proxy configuration
- Docker deployment
- SSL/HTTPS setup
- Authentication

## Next Steps

1. **Configure platforms** - Go to Configuration tab
2. **Trigger a download** - Use Platforms tab
3. **Monitor logs** - Watch Logs tab in real-time
4. **View statistics** - Check Dashboard

## Support

- Documentation: `/opt/media-downloader/web/README.md`
- Main app docs: `/opt/media-downloader/docs/`
- API docs: `http://localhost:8000/docs` (when running)

---

**Version:** 1.0.0
**Built for:** Media Downloader v6.2.2