Trail Tale is a interactive travel mapping application designed to turn your journeys into immersive visual narratives. Explore your world, relive your adventures, and organize your memories on a stunning, responsive map.
Developed as part of the Code Circuit Hackathon conducted by Outlier AI.
- Dynamic Exploration: Powered by Leaflet.js with high-performance custom map tiles.
- Smart Zooming: Highlights countries on mouseover and features smooth "fly-to" navigation.
- Responsive Scaling: UI elements and markers dynamically adjust across screen sizes.
- Tactile Visuals: Albums are displayed as realistic Polaroid-style markers with custom tilts and shadows.
- Dynamic Sizing: Marker photos scale smoothly based on zoom levels (40px to 99px) for optimal clarity.
- Clustering: Smart display logic shows representative images at lower zooms to prevent map clutter.
- Full CRUD Support: Add, Edit, and Delete travel albums directly from the interface.
- Slide-In Detail Panel: A sleek, frosted-glass side panel for viewing and managing album metadata.
- Location Picking: Interactively set album coordinates by clicking directly on the map.
- Multi-Image Support: Add multiple photos to a single geo-tagged album.
- Smart Suggestions: Quickly find and navigate to any country with an autocomplete search pill.
- Cinematic Transitions: Smoothly fly to searched locations with optimized map animations.
- Framework: Next.js 15 (App Router)
- Library: React 19
- Mapping: Leaflet.js & React-Leaflet
- Language: TypeScript
- Node.js 18.x or later
- npm or yarn
- Clone the repository:
git clone https://github.com/amanmoon/trail_tale.git
- Install dependencies:
npm install
- Run the development server:
npm run dev
- Open http://localhost:3000 in your browser.