• 

  Website Preview

🌲 Trail Finder: A Journey from Idea to Reality 🚀

🎯 Inspiration

The inspiration for this project came from my love for the outdoors and technology. I wanted a tool that could help people find local hiking and biking trails with relevant details like difficulty, length, and accessibility. However, most existing apps lacked real-time data or relied on outdated trail information. That’s when I decided to build my own AI-powered trail discovery web app, integrating OpenStreetMap (OSM), WebSockets, Unsplash, and Flickr APIs.

🛠️ How I Built the Project

The project was developed using Bun.js for the backend and a combination of HTML, CSS, and JavaScript (with jQuery) for the frontend. Here’s a breakdown of how everything came together:

1️⃣ Backend: Bun WebSocket Server

Used Bun’s serve() API to handle WebSocket connections for real-time updates. Implemented a WebSocket protocol where the client requests trail data, and the server responds with the nearest trails. Optimized asynchronous fetching of trail data using fetchTrailData() from OSM Overpass API.

2️⃣ Frontend: Interactive UI with Live Trail Data

Used jQuery to manage WebSocket communication and update the UI dynamically. Implemented a card-based UI to display each trail’s information, including: Name, length, difficulty, and estimated time. Background images fetched from Unsplash API. Trail-specific images retrieved from Flickr API.

3️⃣ Geolocation & Mapping

Used navigator.geolocation.getCurrentPosition() to determine user location. Built a bounding box system to find trails within a custom radius (small & large search options). Calculated trail distances using the Haversine formula, ensuring accuracy.

4️⃣ Caching & Performance Optimization

Cached Unsplash background images to reduce API calls and stay within the hourly limit. Implemented a throttling system for API requests. Stored WebSocket connections efficiently in a Set to manage multiple users.

📌 What I Learned

This project pushed my understanding of real-time WebSockets, geolocation, and API optimizations. Some key takeaways:

• ✅ Bun.js WebSockets are incredibly fast, but handling asynchronous requests inside WebSocket events requires careful structuring.
• ✅ Unsplash API rate limits are strict, and caching responses significantly improves performance.
• ✅ OpenStreetMap’s Overpass API is powerful, but it sometimes returns duplicate or incomplete trail data, requiring filtering and cleanup.
• ✅ Geolocation in browsers is tricky because permissions vary across devices. Having fallback mechanisms is crucial.

⚠️ Challenges & How I Overcame Them

• 1️⃣ WebSocket Upgrade Issues Problem: WebSocket connections initially failed because Bun wasn’t properly upgrading the requests. Solution: Ensured proper server.upgrade(req) handling and used a dedicated /ws endpoint to separate WebSocket traffic from static file requests.

• 2️⃣ Handling Duplicate & Unnamed Trails Problem: OSM returned many duplicate or unnamed trail segments, cluttering the UI. Solution: Implemented a filtering function (cullUnnamedTrails()) to remove unnamed entries and merge overlapping trails.

• 3️⃣ Preventing API Rate Limits Problem: Unsplash API had a strict 50 requests/hour limit, and calling it too often resulted in negative request counts. Solution: Cached images for 1 hour and implemented a fallback Unsplash collection to avoid unnecessary API calls.

• 4️⃣ Fetching Real-Time Trail Images Problem: OSM trails don’t provide images, and finding trail-specific photos from Unsplash or Flickr was tricky. Solution: Combined Flickr’s geo-tagged image search with Unsplash’s nature photos to get relevant trail images.

🚀 Final Thoughts & Future Improvements

Building this real-time trail finder was an exciting journey! It combines live WebSockets, geolocation, API integration, and performance optimization into a seamless experience. However, there’s always room for improvement:

• 🔹 Expand to More APIs → Integrate Hiking Project API for richer trail details.
• 🔹 User Preferences → Allow users to filter by difficulty, length, and type of trail.
• 🔹 Offline Mode → Store cached trails and images for offline use.
• 🔹 Mobile App Version → Convert this into a PWA (Progressive Web App) for mobile users.

This project reinforced my ability to debug complex issues, optimize API calls, and build a scalable real-time application. Excited to keep improving it! 🌲🏞️🚴‍♂️

Built With

• flickr
• osm