# MangaDL

A web UI for browsing and downloading manga using [ifetch](https://github.com/FelixSiegel/ifetch) as the backend.

## Quick Start

### Using Docker Compose (Recommended)

```bash
docker-compose up -d
```

This will start:
- **ifetch backend** on port 8080
- **Frontend** on port 3000

Access the web UI at `http://localhost:3000`

### Manual Setup

#### 1. Start the Backend (ifetch)

```bash
# Using Docker
docker run -d \
  --name ifetch \
  -p 8080:8080 \
  -v ./downloads:/app/downloads \
  -v ./config:/app/config \
  ghcr.io/felixsiegel/ifetch:latest

# Or build from source
git clone https://github.com/FelixSiegel/ifetch.git
cd ifetch
cargo build --release
./target/release/ifetch --server --port 8080 --output ./downloads --config ./config
```

#### 2. Start the Frontend

```bash
cd frontend
npm install
npm run dev
```

Access the web UI at `http://localhost:3000`

## Features

- 🔍 **Search manga** from MangaKatana
- 📚 **Browse manga details** - cover, description, genres, authors, status
- 📖 **Read chapters** with a full-screen reader
- ⬇️ **Download chapters** via the ifetch backend
- 🌓 **Dark/Light mode** support
- 📱 **Responsive design** - works on mobile and desktop
- ⌨️ **Keyboard navigation** in reader (←/→ for pages, F for fullscreen, Esc to exit)

## Project Structure

```
MangaDL/
├── docker-compose.yml       # Docker Compose for full stack
├── downloads/               # Manga downloads (mounted to ifetch)
├── config/                  # ifetch config (mounted to ifetch)
├── frontend/                # React + TypeScript frontend
│   ├── src/
│   │   ├── api/            # API client
│   │   ├── components/     # React components
│   │   ├── pages/          # Page components
│   │   ├── store/          # Zustand state management
│   │   └── types/          # TypeScript types
│   ├── Dockerfile          # Frontend Dockerfile
│   ├── nginx.conf          # Nginx config for production
│   └── package.json
└── README.md
```

## API Endpoints Used

The frontend consumes these ifetch API endpoints:

- `GET /api/search?q={query}` - Search manga
- `GET /api/manga/{id}` - Get manga details
- `GET /api/manga/{id}/chapters` - Get chapters (triggers background download)
- `GET /api/chapter/{id}::{number}/pages` - Get page URLs for a chapter
- `GET /api/image/{id}::{number}/{filename}` - Serve chapter images

## Keyboard Shortcuts (Reader)

| Key | Action |
|-----|--------|
| ← / → | Previous / Next page |
| F | Toggle fullscreen |
| Esc | Exit fullscreen / Close reader |

## Configuration

### Backend (ifetch)

Environment variables for ifetch:
- `IFETCH_PORT` - Server port (default: 8080)
- `IFETCH_THREADS` - Download threads (default: 1)
- `IFETCH_CRON_HOURS` - Auto-update interval in hours (default: 12)
- `DISCORD_WEBHOOK_URL` - Optional Discord notifications

### Frontend

Environment variables (`.env`):
- `VITE_API_BASE` - Backend API base URL (default: `http://localhost:8080`)

## Development

```bash
# Frontend development
cd frontend
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview
```

## License

MIT