Self-Hosted Photo-Management Frontend (OSS Fork & Evaluation)
Overview
A fork of Lychee-front, the open-source JavaScript frontend for the Lychee self-hosted photo-management system. The frontend is deliberately decoupled from its backend so it can be paired with different server implementations. This fork captures the studio’s evaluation of the Lychee codebase for self-hosted gallery work.
Why It Exists
Lychee is a popular free photo-management tool (“upload, manage and share photos like from a native application”) whose frontend was split out specifically to allow reuse against alternative backends. Forking it provided a way to study a mature, real-world media-management UI and assess it for adaptation.
What We Built
This is the upstream Lychee-front source rather than original work. It is structured with modules/, scripts/, styles/, deps/, and images/, built via a gulpfile.js pipeline (Gulp + Babel, gulp-sass, autoprefixer, concat/uglify, CSS minification, and gulp-inject). The UI stack includes jQuery, basicModal, justified-layout for the gallery grid, lazysizes for lazy image loading, Leaflet with markercluster and rotated-marker plugins for map-based photo browsing, livephotoskit, and mousetrap for keyboard shortcuts. CI/quality tooling includes Travis and SonarCloud, with an API.md documenting the frontend’s backend contract.
Why It Exists / Approach
A jQuery + Gulp build with Leaflet mapping and a justified-layout gallery, representative of a production self-hosted gallery frontend. Evaluating it, rather than building from scratch, is the honest framing: the value is understanding a decoupled frontend/backend media architecture.
Outcome / Impact
Provided hands-on familiarity with a real, decoupled photo-management frontend, its gallery rendering, lazy loading, map clustering, and backend API contract, informing how a self-hosted media UI can be integrated against a custom backend.
Capabilities Demonstrated
- Evaluating and integrating a decoupled open-source JS frontend
- Map-based media browsing with Leaflet and marker clustering
- Gulp/Babel/Sass front-end build pipelines
- Reading and reusing a documented frontend/backend API contract