# Personal Projects

## psd-layer-extractor (2026)
High-performance, fully client-side Adobe Photoshop (PSD) parser and layer tree extraction engine.

**Repository:** https://github.com/KhoaTheBest/psd-layer-extractor
**Live Demo:** https://psd.khoalt.dev
**Tech Stack:** React, TypeScript, Jotai, TailwindCSS, ag-psd, pixelmatch

### Key Outcomes
- Parsed massive PSD files (up to 1GB) completely in-browser via Web Workers, eliminating server-side rendering bottlenecks and compute fees.
- Implemented canvas comparison sliders and pixel-level diff overlays utilizing mapbox pixelmatch for accurate visual regression verification.
- Structured deep Photoshop layer hierarchies, text typography, and shape vectors into a clean, compiler-compatible JSON schema.

## in-browser-video-renderer (2026)
Serverless client-side video composition and WebCodecs frame-by-frame compiling pipeline.

**Repository:** https://github.com/KhoaTheBest/in-browser-video-renderer
**Live Demo:** https://video-renderer.khoalt.dev
**Tech Stack:** Remotion, WebCodecs, FFmpeg.wasm, React, TypeScript, Jotai

### Key Outcomes
- Engineered a serverless video rendering system utilizing renderMediaOnWeb and WebCodecs (VP8/WebM), offloading intensive CPU rendering from cloud nodes directly to the browser.
- Integrated client-side WebAssembly ffmpeg transcoding to cleanly package output frames and raw audio buffers into standard H.264 MP4 files.
- Standardized local CORS proxy routing to securely fetch and resolve static asset assets, assets databases, and custom font weights across origins.

## video-stitching-frontend (2026)
High-performance React application for stitching, cropping, and processing video segments in the browser.

**Repository:** https://github.com/KhoaTheBest/video-stitching-frontend
**Live Demo:** https://stitching.khoalt.dev
**Tech Stack:** React, TypeScript, FFmpeg.wasm, Monaco Editor, Vite

### Key Outcomes
- Engineered a fully client-side video stitching pipeline utilizing WebAssembly FFmpeg to concatenate multiple video clips with custom durations and muted states.
- Developed an automated center-crop filter algorithm inside FFmpeg to normalize variable segment dimensions into a standardized 16:9 1280x720 aspect ratio.
- Integrated a real-time Monaco JSON editor to let users dynamically configure start/end times and preview individual clip segments on the fly.

## remotion-vram-optimizer (2026)
Memory-efficient client-side image proxying and sequential rendering optimizer for Remotion video compositions.

**Repository:** https://github.com/KhoaTheBest/remotion-vram-optimizer
**Live Demo:** https://vram-optimizer.khoalt.dev
**Tech Stack:** Remotion, Web Workers, Zod, browser-image-compression, TypeScript

### Key Outcomes
- Designed a highly efficient, async Image Proxy component pattern to transparently intercept, compress, and scale ultra-high resolution (4K+) assets in web players.
- Offloaded image resizing tasks to a background Web Worker utilizing browser-image-compression, completely eliminating UI canvas freezing.
- Prevented Chrome OOM and system VRAM hardware crashes in headless render nodes by enforcing sequential thread and single-concurrency compiler boundaries.

## creative-asset-flow (2026)
Interactive graph visualization dashboard for mapping dynamic ad variables, overlays, and media render trees.

**Repository:** https://github.com/KhoaTheBest/creative-asset-flow
**Live Demo:** https://creative-asset-flow.khoalt.dev
**Tech Stack:** React, React Flow, TypeScript, TailwindCSS, Markdown, ESLint

### Key Outcomes
- Built a fully interactive flowchart canvas to help designers map custom dependencies, layer groupings, and asset overrides for dynamic creatives.
- Engineered custom node ecosystems (VideoNode, ImageNode, MarkdownNode) to support real-time thumbnail and video preview overlays inside the graph.
- Utilized React memoization and virtualization on graph states to support seamless panning, zooming, and editing at a fluid 60 FPS.

## client-side-media-processor (2026)
WebAssembly-powered media preprocessing, normalization, and validation pipeline.

**Repository:** https://github.com/KhoaTheBest/client-side-media-processor
**Live Demo:** https://media-processor.khoalt.dev
**Tech Stack:** React, TypeScript, WebAssembly, JSquash, Vitest, Vite

### Key Outcomes
- Integrated high-performance WebAssembly builds (JSquash PNG/JPEG/WebP modules) to downscale, compress, and normalize media files in the client browser.
- Developed a local developer Validation Lab playground to verify file constraints, corruptions, and aspect ratios before triggering uploads.
- Wrote highly reliable, automated unit tests utilizing Vitest to guarantee robust WebAssembly execution across multiple browser environments.

## opfs-media-cache (2026)
Multi-threaded caching and storage layer for large assets utilizing the Origin Private File System (OPFS).

**Repository:** https://github.com/KhoaTheBest/opfs-media-cache
**Live Demo:** https://opfs-cache.khoalt.dev
**Tech Stack:** TypeScript, Comlink, opfs-tools, IndexedDB, Vitest, Yarn

### Key Outcomes
- Created an ultra-fast local cache layer leveraging the browser’s native Origin Private File System to cache gigabytes of media assets with near-native IO speeds.
- Offloaded heavy storage writes and chunk-based buffer streams to background threads via Comlink Web Workers to prevent main UI thread blockage.
- Implemented robust LRU eviction policy, concurrency file locks, and recovery watchdogs to automatically manage caching boundaries.