Exifbrowser
A local-first file browser using OPFS and web workers. Demo soon.
Overview
Exifbrowser is a local-first file explorer that utilizes the Origin Private File System (OPFS) and web workers. With Exifbrowser, users can drop a folder of 1000+ images onto the page and it will generate a list of all the images and their EXIF data in just a couple of seconds. This tool serves as a base for a custom iNaturalist upload interface and is currently a work in progress.
Features
- File tree directory navigation instead of a flat list, allowing for separate sessions based on the directory.
- Experimentation with different performance patterns such as queues, better caching with IndexedDB and the cache API, cancelable promises, and async iterators.
- Ability to add GPS data to images using a GPX or similar file.
- Running certain transformations in parallel based on the available number of cores.
- Code cleanup and consistent code style improvements.
- Responsive design.
- Support for various browsers.
Summary
Exifbrowser is a local-first file explorer that offers fast and efficient browsing of large image folders while displaying their respective EXIF data. With features like file tree navigation, image editing, and parallel transformations, Exifbrowser aims to provide users with a seamless and powerful image management tool. Although still a work in progress, the project demonstrates the potential of utilizing web technologies like OPFS, web workers, and IndexedDB to create responsive and feature-rich applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Remix
Remix is a modern JavaScript framework that focuses on building fast and performant web applications. It emphasizes a combination of server-rendered content and client-side interactivity, offering a robust architecture for creating scalable and maintainable projects.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Shadcn UI
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.