Designed to fill a gap in the action sports community, Spot Hub enables users to discover spots and street obstacles around the world, and document the history of tricks performed at each location. With a functional MVP version currently in alpha release phase, the app is slated for public release later this year, with additional features and improvements to be rolled out iteratively.
The Spot Hub codebase is currently private for security reasons but code samples are available here and full access to the Github repo can be granted upon request.
In order for Spot Hub to handle large numbers of map pins while maintaining smooth, lag-free movement and scrolling around the map, the DeckGL library has been implemented. DeckGL is a WebGL-powered library that leverages GPU acceleration for significantly faster rendering and smoother interactivity, resulting in a highly scalable map pin layer.
Spot Hub uses a grid-based system for data fetching in order to simplify data caching. Each grid square has a unique ID based on its coordinates. On initial page load, two concurrent requests for spot data are made to the database:
As the user moves their search area (or viewport) around the map, map pins are instantly displayed using the shallow spot data. Complete spot data is pre-fetched in the background after determining which grid squares have not been previously fetched (shown in orange below). These orange grid square ID's are then cross-referenced with the shallow spot data to determine which ones contain spots and only make a database request if any grid squares contain spots, preventing unnecessary calls to the database.
If the user interacts with a map pin before the pre-fetched full spot data has been received then a request is made to the database for that single spot data.
In order to prevent requesting too many grid squares at once when the user zooms out on the map, grid squares are only requested below a certain zoom level.
The flow for fetching spot data:
The user experience of adding spots around the globe is streamlined by extracting image geolocation data (if available) to automatically move map pins to their correct location.
The batch upload features allows up to 50 images to be selected at once. It uses image geolocation data to automatically group images in close proximity together (i.e. photos of the same spot). A drag and drop interface then allows the user to make any corrections to the groups before creating each spot individually.
To enhance the image tagging process, Google's Gemini AI is used to analyse spot images along with a predefined prompt to generate a set of suggested tags.