MangaDL Frontend

A React + TypeScript web UI for browsing and reading manga using the 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

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

Start the Backend (ifetch)

# 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

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

2.9 KiB Raw Permalink Blame History