pnger/README.md

# PNGer - Modern PNG Editor & Resizer

A sleek, modern PNG editor and resizer with **live preview**, **drag & drop**, **smart presets**, **keyboard shortcuts**, and **dark/light mode theming**. Built with TypeScript and optimized for deployment as a single Docker container.

## ✨ Features

- **🎨 Modern UI**: Beautiful dark/light mode for inspecting transparency.
- **⚡ Live Preview**: Instant side-by-side comparison with file size analysis.
- **🚀 Efficiency**: Drag & Drop upload, clipboard paste (`Ctrl+V`), and smart presets.
- **🖼️ Precision**: Control width, height, quality, and crop positions (9 modes).
- **📦 Reliable Deployment**: Multi-stage Docker build optimized for Unraid and Gitea.

## 🚀 Quick Start

### Docker/Unraid Deployment
1. **Clone & Build**:
   ```bash
   git clone https://git.alwisp.com/jason/pnger.git
   cd pnger
   docker build -t pnger:latest .
   ```
2. **Run**:
   ```bash
   docker compose up -d
   ```
3. **Access**: `http://localhost:8080` (or your Unraid IP)

### Local Development
1. **Install & Run Backend**: `cd backend && npm install && npm run dev`
2. **Install & Run Frontend**: `cd frontend && npm install && npm run dev`
3. **Access**: `http://localhost:5173`

## 📚 Documentation

For more detailed information, please refer to:
- **[INSTRUCTIONS.md](./INSTRUCTIONS.md)**: Technical architecture, development setup, code standards, and troubleshooting.
- **[ROADMAP.md](./ROADMAP.md)**: Project history, sprint updates, and future feature plans.

## ⌨️ Keyboard Shortcuts

- `Ctrl+V`: Paste image from clipboard
- `Enter`: Download (when input not focused)
- `?`: Show shortcuts help
- `Esc`: Close dialogs

---

**License**: MIT  
**Repository**: [https://git.alwisp.com/jason/pnger](https://git.alwisp.com/jason/pnger)