Film Metadata App
Film Photography Metadata Configuration and Management Web Application
A web application for efficiently editing and managing EXIF metadata of film photographs. Designed with a 3-step workflow — from file upload to metadata configuration to download — enabling users to intuitively progress through each stage. Built with TypeScript, Next.js, and Tailwind CSS, it processes metadata directly in the browser without sending photos to a server. State is managed centrally through React's useReducer, while next-themes powers a dark/light mode toggle with a CSS custom property-based semantic color system for a consistent UI. Device detection via React Device Detect and streaming + batch downloads minimize memory usage on mobile devices.
Details
3-Step File Processing Workflow with State Persistence
- Designed a 3-step workflow — file upload, metadata configuration, and download — with robust user data and progress state management.
- Leveraged React's useReducer for centralized state management, preserving user inputs and file information across steps so users can navigate freely without data loss.
Optimized File Download with File System Access API and Web Streams API
- Implemented a file download feature using the File System Access API, allowing users to choose their save location directly.
- For browsers that don't support the File System Access API, a Web Streams API-based fallback pattern was implemented to prevent out-of-memory issues during large file processing and ensure stable performance through stream-based handling.
EXIF Metadata Read/Write Processing with piexifjs
•Adopted the piexifjs library for handling EXIF metadata in a JavaScript environment, enabling reading and editing of film photo metadata. Various EXIF fields — camera model, capture date, ISO, focal length, aperture — are editable through a user-friendly UI, with real-time validation powered by react-hook-form and zod.
Semantic Color System with CSS Custom Properties and Dark/Light Mode
- Implemented dark/light mode switching and system theme synchronization using next-themes, ensuring the correct theme is applied instantly without FOUC (Flash of Unstyled Content).
- Designed a semantic color token system based on CSS Custom Properties for centralized color management across all components, with every text-background combination verified to meet WCAG AA contrast ratio standards.
Metadata Preset Save/Load with JSON Export/Import
•Implemented a feature to save frequently used camera, lens, and film setting combinations as presets in localStorage for one-click loading. Presets can be exported and imported in JSON format for cross-device portability, with file validation to prevent importing malformed files.
Reliable Batch Processing with File Validation and Natural Sort
•Pre-validates uploaded file formats and sizes to prevent errors from unsupported or corrupted files. A natural sort utility function correctly recognizes numerical order in filenames, ensuring files are processed in the order users expect.
Improved Development Efficiency with Rust-Based Biome
•Replaced the ESLint and Prettier combination with Rust-based Biome, significantly improving linting and formatting speed. By unifying code quality checks and auto-formatting into a single tool with fast execution, development workflow efficiency and productivity were greatly enhanced.