MangaDL

A web UI for browsing and downloading manga using ifetch as the backend.

Quick Start

Using Docker Compose (Recommended)

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)

# 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

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

# Frontend development
cd frontend
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

License

MIT