Initial commit

2026-09-13 12:59:16 +02:00
commit 9e5e074bbe
41 changed files with 4302 additions and 0 deletions
@@ -0,0 +1,114 @@
+# 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