From da7f60cf047e7b79cf0edaec35b440f66d1c6ff3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Wed, 25 Feb 2026 11:22:38 +0100 Subject: [PATCH] docs: update README with Media app information and project structure --- README.md | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 3e4a62a..a8e3f70 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Built with **Next.js 16**, **React 19**, and **Tailwind CSS 4**, Kit UI delivers ## 🚀 The Toolkit -Kit UI is divided into three core specialized applications: +Kit UI is divided into four core specialized applications: ### 🎨 [Pastel](./app/(app)/pastel) — Professional Color Toolkit A comprehensive suite for color theory, manipulation, and accessibility. @@ -36,6 +36,13 @@ Retro-inspired text banners for terminals and documentation. - **Real-time Preview**: See your ASCII art transform as you type. - **Multi-Export**: Copy as raw text, download `.txt` files, or export as `.png` images. +### 🎬 [Media](./app/(app)/media) — Browser-Based File Converter +Privacy-first, local-only media conversion powered by WebAssembly. +- **Video & Audio**: Transcode between MP4, WebM, MP3, WAV, and more using FFmpeg. +- **Image Processing**: Convert and resize PNG, JPG, WebP, and SVG via ImageMagick. +- **Zero Server Uploads**: All processing happens locally in your browser for maximum privacy. +- **Advanced Options**: Fine-tune bitrates, codecs, resolutions, and quality presets. + --- ## ✨ Core Features @@ -66,17 +73,19 @@ Retro-inspired text banners for terminals and documentation. ```bash . ├── app/ # Next.js App Router (Pages & Layouts) -│ ├── (app)/ # Core Tool Pages (Pastel, Units, Figlet) +│ ├── (app)/ # Core Tool Pages (Pastel, Units, Figlet, Media) │ └── api/ # Backend API routes ├── components/ # Reusable UI & Logic Components │ ├── pastel/ # Color-specific components │ ├── units/ # Converter-specific components │ ├── figlet/ # ASCII-specific components +│ ├── media/ # Media conversion components │ └── ui/ # Base Atomic Components (Buttons, Cards, etc.) ├── lib/ # Business Logic & Utilities │ ├── pastel/ # WASM wrappers & Color logic │ ├── units/ # Conversion algorithms -│ └── figlet/ # Font loading & ASCII generation +│ ├── figlet/ # Font loading & ASCII generation +│ └── media/ # FFmpeg & ImageMagick WASM orchestration ├── public/ # Static assets & Figlet fonts ├── Dockerfile # Multi-stage Docker build └── nginx.conf # Production Nginx configuration @@ -121,7 +130,7 @@ docker run -p 80:80 kit-ui ## 📈 Performance & Optimization - **Static Site Generation (SSG)**: Entire toolkit is exported as static HTML/JS for sub-second load times. -- **WASM Integration**: Heavy color calculations are offloaded to WebAssembly. +- **Client-Side WASM**: Complex processing (FFmpeg, ImageMagick, Pastel) is offloaded to WebAssembly for native-level performance without server latency. - **CSS-First Configuration**: Leveraging Tailwind 4's native CSS variables for zero-runtime styling overhead. - **Automatic CI/CD**: GitHub Actions pipeline for multi-architecture Docker builds.