114 lines
2.9 KiB
Markdown
114 lines
2.9 KiB
Markdown
# 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 |