TraceLens is a high-performance, geotagged photo journal built for travelers and field researchers who need to anchor their memories to physical locations. It solves the problem of disorganized cloud libraries by providing an automated, chronological, and geographical lens for your photo history.
- Contextual Journaling: Seamlessly integrates
@capacitor/cameraand@geolocationto tag photos with high-precision metadata and add personalized notes in a single flow. - Alpine Explorer Map: A 60FPS native mapping experience using Google Maps SDK with advanced Marker Clustering and Spiderfy animations.
- Reactive Timeline: A smooth, scrollable feed utilizing Angular Signals to group entries by date with "Sticky Headers".
- Local-First Persistence: Robust offline support via the Capacitor Filesystem (
Directory.Data) and@capacitor/preferences. - Theme-Aware UI: A bespoke "Glassmorphism" aesthetic that respects system-wide Light and Dark mode settings.
Instead of traditional BehaviorSubjects, TraceLens leverages Angular 17 Signals. This ensures highly performant, localized change detection, which is critical when synchronizing real-time data updates across the Map and Timeline tabs without unnecessary re-renders.
To prevent UI lag and memory bloat, TraceLens never stores Base64 strings in the database. Images are written directly to the native filesystem. Have implemented a compression layer using browser-image-compression to ensure the storage remains lean even with high-resolution captures.
To handle hundreds of photos in a single location, I implemented a custom Spiderfy algorithm. When markers overlap at maximum zoom, they "fan out" in a spiral, ensuring every memory remains accessible without visual clutter.
Implemented a Global Error Handler and hardware timeout guards. The app gracefully handles GPS signal loss, Map API failures, and permission denials using custom UI fallbacks and non-blocking toast notifications.
- Framework: Ionic 7 / Angular 17 (Standalone Architecture).
- State Management: Angular Signals & Computed Signals for reactive data grouping.
- Native APIs: Capacitor Camera, Geolocation, Filesystem, and Haptics.
- UI/UX: Glassmorphism, CSS Environment Variables (Safe Areas), and Custom Animations.
- Performance: Marker Clustering and lazy-loaded routing for optimized bundle sizes.
-
Clone the repo:
git clone [https://github.com/](https://github.com/)[your-username]/tracelens.git
-
Install dependencies:
npm install
-
Add your Google Maps API Key: Update
src/environments/environment.tsandAndroidManifest.xmlwith your key. -
Run on a physical device:
ionic cap run android