Afilmory
Afilmory (/ΙΛfΙͺlmΙri/, "uh-FIL-muh-ree") is a term created for personal photography websites, blending Auto Focus (AF), aperture (light control), film (vintage medium), and memory (captured moments). A modern photo gallery website built with React + TypeScript, supporting automatic photo synchronization from multiple storage sources (S3, GitHub), featuring high-performance WebGL rendering, masonry layout, EXIF information display, thumbnail generation, and more. ## π Get Started in Seconds **π [Use the Official SaaS](https://afilmory.art/) - No setup required!** The easiest way to create your photo gallery is through our hosted service at **[afilmory.art](https://afilmory.art/)**. Sign up, connect your storage, and your gallery is live in minutesβno deployment, no servers, no maintenance. ### Why Use the Official SaaS? - β **Zero setup** - No configuration, no deployment, no infrastructure management - β **Live CMS** - Edit photos, titles, and metadata in real-time without rebuilding - β **Custom domains** - Bind your own domain with DNS verification - β **Automatic updates** - Always running the latest version with new features - β **Managed infrastructure** - We handle scaling, backups, and maintenance [**Get Started Now β**](https://afilmory.art/) --- ### Live Photo Galleries - https://afilmory.innei.in - https://gallery.mxte.cc - https://photography.pseudoyu.com - https://afilmory.magren.cc ## π Features ### Core Functionality - πΌοΈ **High-Performance WebGL Image Renderer** - Custom WebGL component with smooth zoom and pan operations - π± **Responsive Masonry Layout** - Powered by Masonic, adapts to different screen sizes - π¨ **Modern UI Design** - Built with Tailwind CSS and Radix UI component library - β‘ **Incremental Sync** - Smart change detection, processes only new or modified photos - π **i18n** - Multi-language support - π **OpenGraph** - OpenGraph metadata for social media sharing ### Image Processing - π **HEIC/HEIF Format Support** - Automatic conversion of Apple device HEIC format - π· **TIFF Format Support** - Automatic conversion of TIFF format - πΌοΈ **Smart Thumbnail Generation** - Multi-size thumbnails for optimized loading performance - π **EXIF Information Display** - Complete shooting parameters including camera model, focal length, aperture, etc. - π **Blurhash Placeholders** - Elegant image loading experience - π± **Live Photo Support** - Detection and display of iPhone Live Photos - βοΈ **HDR Image Support** - Display HDR images ### Advanced Features - ποΈ **Fujifilm Recipe** - Read and display Fujifilm camera film simulation settings - π **Fullscreen Viewer** - Image viewer with gesture support - π·οΈ **File System Tags** - Auto-generated tags based on file system - β‘ **Concurrent Processing** - Multi-process/multi-thread concurrent processing support - ποΈ **Multi-Storage Support** - S3, GitHub, and other storage backends - π· **Share Image** - Share image to social media or embed iframe to your website - πΊοΈ **Interactive Map Explorer** - Geographic visualization of photos with GPS coordinates from EXIF data using MapLibre ## ποΈ Technical Architecture ### Frontend Tech Stack - **React 19** - Latest React version with Compiler - **TypeScript** - Complete type safety - **Vite** - Modern build tool - **Tailwind CSS** - Atomic CSS framework - **Radix UI** - Accessible component library - **Jotai** - State management - **TanStack Query** - Data fetching and caching - **React Router 7** - Routing management - **i18next** - Internationalization ### Build System - **Node.js** - Server-side runtime - **Sharp** - High-performance image processing - **AWS SDK** - S3 storage operations - **Worker Threads/Cluster** - Concurrent processing - **EXIF-Reader** - EXIF data extraction ### Storage Architecture Designed with adapter pattern, supporting multiple storage backends: - **S3-Compatible Storage** - AWS S3, MinIO, Alibaba Cloud OSS, etc. - **GitHub Storage** - Using GitHub repository as image storage - **Eagle Storage** - Using Eagle app library as image storage - **Local File System** - Local storage for development and testing ## π οΈ Self-Host (Advanced) If you prefer to host Afilmory yourself, you can deploy it on your own infrastructure. This requires more technical knowledge and ongoing maintenance. > **π‘ Tip**: For most users, we recommend using the [official SaaS](https://afilmory.art/) instead. Self-hosting is best suited for developers who need full control over their deployment or have specific infrastructure requirements. ### Option A: Docker (recommended) [Docker deployment guide](https://github.com/Afilmory/docker) ships prebuilt images with minimal setup. ### Option B: Manual install 1. Copy `config.example.json` to `config.json` and fill in your site name, description, and social links. 2. Prepare access to your photo storage (S3/B2/GitHub/local). The builder will read photos and generate thumbnails plus `photos-manifest.json`. 3. Run the builder to generate assets, then start the site. Looking for developer commands, environment variables, and builder config details? See `DEVELOPMENT.md`. For detailed self-hosting instructions, see the [Documentation](https://docs.afilmory.art). ## π§ Advanced Usage ### Custom Storage Provider Implement the `StorageProvider` interface to support new storage backends: ```typescript import { StorageProvider } from './src/core/storage/interfaces' class MyStorageProvider implements StorageProvider { async getFile(key: string): Promise