Home

Geofuentes

Timeline

The project started in October 2025

Oct 2025 - Nov 2025: map, clustering, routes, and Supabase integration

Techonologies

React Native

React Native

TypeScript

TypeScript

Supabase

Supabase

PostgreSQL

PostgreSQL

Features

Interactive map with 400+ public fountains

Marker clustering for smooth high-density rendering

Curated walking routes drawn as map polylines

Animated bottom sheet with expandable route cards

Fountain details: potable, accessible, and ornamental

GPS location and nearby-fountain search

Featured 'route of the day' highlighting

Custom minimalist map style

Supabase backend with geospatial queries

Responsive, gesture-driven navigation

Project Overview

overview imageoverview imageoverview image

Geofuentes was born from a simple everyday question in Granada: where is the nearest fountain to refill my bottle? The goal was to turn the city's network of public fountains into something searchable, visual, and genuinely useful for both residents and visitors.

The app is built with React Native to ship a single TypeScript codebase across iOS and Android, using react-native-maps over Google Maps with a custom minimalist style that hides visual noise and puts the fountains front and centre.

Rendering hundreds of fountains without hurting performance was the core challenge. Marker clustering groups nearby points as you zoom out, so the map stays smooth even with 200+ fountains on screen, while a Gorhom bottom sheet with Reanimated powers the fluid, expandable route cards.

Each fountain carries its own attributes —potable, accessible, or ornamental— and the app layers curated walking routes on top, connecting selected fountains with polylines and showing distance, duration, and accessibility so users can pick an experience that fits them.

On the backend, Supabase and PostgreSQL store the fountains and expose geospatial RPC functions for nearby search and text queries, giving the app a scalable data layer ready to grow from mocked data into a live, city-wide service.

TakeAways

Solved a real map-performance problem in React Native, using marker clustering to render 400+ fountains at a smooth frame rate.

Designed an expandable, gesture-driven bottom sheet with Reanimated and Gorhom, learning to combine animations with a clean list-and-map layout.

Modelled a geospatial domain end to end —fountains, attributes, and routes— and connected it to a Supabase and PostgreSQL backend with location-based queries.

Crafted a custom Google Maps style and a cohesive blue-and-water visual identity to make the map calm, minimal, and readable.

Structured a scalable TypeScript architecture with typed models shared across screens, components, and services, ready to swap mocked data for live APIs.

Next Project