# MangaDL Frontend

A React + TypeScript web UI for browsing and reading manga using the [ifetch](https://github.com/FelixSiegel/ifetch) backend.

## Features

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

## Tech Stack

- React 18 + TypeScript
- Vite for development and building
- React Router for navigation
- Zustand for state management
- Axios for API calls
- Lucide React for icons

## Getting Started

### Prerequisites

1. **Node.js 18+** and npm
2. **ifetch backend** running on port 8080

### Start the Backend (ifetch)

```bash
# Using Docker (recommended)
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
```

### Start the Frontend

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

The frontend will be available at `http://localhost:3000` with API calls proxied to `http://localhost:8080`.

## Project Structure

```
frontend/
├── src/
│   ├── api/          # API client functions
│   ├── components/   # Reusable UI components
│   ├── pages/        # Page components
│   ├── store/        # Zustand state management
│   ├── types/        # TypeScript types
│   ├── App.tsx       # Main app with routing
│   ├── main.tsx      # Entry point
│   └── index.css     # Global styles
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── .env
```

## Available Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run lint` - Run ESLint

## 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

Environment variables (`.env`):

| Variable | Default | Description |
|----------|---------|-------------|
| `VITE_API_BASE` | `http://localhost:8080` | Backend API base URL |

## License

MIT