MiCiudad

This project has the goal to make bunch of enterprises and business known, as well to show different places to go there in Durango capital city.

Comment

MiCiudad — Descubre Durango

Inspiration

Durango is a city full of life, culture, and local talent — but much of it remains hidden. Small businesses struggle to gain visibility, tourists miss out on authentic experiences, and locals don't always know what's happening in their own neighborhood. Existing platforms like Google Maps or Yelp are too generic, too global, and not built with the local community in mind.

We asked ourselves: what if a city had its own app? Not a copy of something else, but something built specifically for the people of Durango — from the abuelita looking for the nearest artisan market, to the tourist wanting to find the best café de olla, to the young entrepreneur who just opened a tacos stand and wants the world to know about it.

That question became MiCiudad.

What It Does

MiCiudad is a local discovery platform for Durango, México. It combines an interactive map, a local marketplace, an AI assistant, and a community events feed into a single, accessible experience designed for everyone — from teenagers to elderly users.

Key features:

  • 🗺️ Interactive map with categorized pins (restaurants, museums, cafés, artisan shops, historic sites, and events)
  • 🤖 Nautilus — an AI assistant powered by a local LLaMA 3.2 model via Ollama, with full knowledge of every place in the app
  • 🛍️ Mercado Local — a marketplace where local vendors can showcase their products with delivery options and map integration
  • 📅 Events feed with upcoming activities across the city
  • 📍 Route planner using real road data via OSRM, with live GPS integration to route from the user's actual location
  • 🏪 Business registration with a moderation flow to keep the map trustworthy and troll-free
  • 🔖 Saved places that persist across sessions for logged-in users
  • 🎯 Personalized onboarding that tailors the map experience to each user's interests from the very first interaction

How We Built It

We built MiCiudad in under 24 hours using a vibe coding approach — three team members working in parallel on independent modules, each owning a clearly defined slice of the codebase to avoid conflicts and maximize speed.

Frontend: React 18 + Vite 5 + Tailwind CSS, with a consistent liquid glass design system applied across every component.

Map: Leaflet.js + OpenStreetMap for zero-cost, zero-API-key map rendering. Custom SVG markers per category, clustering for dense areas, and smooth flyTo animations for place focus.

Routing: Leaflet Routing Machine connected to the OSRM public server, with dynamic origin switching between the user's real GPS location and the Central Camionera as a default landmark.

AI: We integrated the Gemini API initially, but hit quota limits during development. We pivoted to running LLaMA 3.2 3B locally via Ollama, which gave us unlimited, fast, offline-capable inference. The model receives a system prompt containing the full JSON of every place in the app, making Nautilus genuinely knowledgeable about Durango's local scene.

Storage: No backend. All user data (favorites, session, pending business registrations, onboarding preferences) lives in localStorage, keeping the stack lean enough to ship in a hackathon window.

Challenges We Faced

1. AI quota exhaustion mid-development We started with the Gemini API, which hit a RESOURCE_EXHAUSTED 429 error after just a few test calls. With no time to set up billing, we pivoted to Ollama + LLaMA 3.2 3B — a local model already running on our MacBook Air M5. This turned out to be a better solution: no rate limits, no latency variance, and full offline capability during the demo.

2. Leaflet + React rendering conflicts Leaflet was built for vanilla JS and fighting it inside React's rendering cycle caused marker icon breakage, zoom control misplacement, and routing control lifecycle issues. We solved these with useRef for direct map instance access, a MapController component using useMap() to bridge React-Leaflet and raw Leaflet, and careful useEffect cleanup to prevent ghost controls on re-renders.

3. OSRM routing errors The routing engine returned "Bounds are not valid" errors on first integration. The root cause was a combination of coordinate type mismatch (strings vs numbers in our data) and the default OSRM router config not matching the public server. Fixed with explicit parseFloat() on all coordinates and a direct osrmv1 router configuration pointing to router.project-osrm.org.

4. Mobile UI layering Building a full-screen map with floating UI elements (navbar, category filters, search bar, chat button, zoom controls, place cards as bottom sheets) required careful z-index choreography and dynamic margin adjustments so nothing overlapped — especially when the place detail panel opened and the zoom controls needed to move out of the way automatically.

5. Parallel development without merge conflicts Working three people on one codebase in under 24 hours with no backend is a recipe for conflicts. We solved this by defining strict module boundaries upfront — each developer owned specific files and communicated only through agreed props contracts (onPlaceSelect, mapRef, onComplete). This let us work in true parallel and assemble the app in the final hour with minimal friction.

What We Learned

  • Local AI models (Ollama) are a serious alternative to cloud APIs for hackathon prototypes — faster to pivot to, no quota anxiety during demos.
  • Designing for all ages forces better UX decisions: larger tap targets, clearer labels, simpler navigation. The constraints made the app better for everyone.
  • A strong design system defined upfront (one color, one font, one glass aesthetic) pays off massively when three people are building in parallel — everything looks cohesive without coordination overhead.
  • OpenStreetMap + OSRM + Leaflet is a powerful, completely free alternative to Google Maps for hyperlocal applications.

What's Next

MiCiudad is designed to grow. The next phases we have planned:

  • Real backend with NestJS + PostgreSQL + PostGIS for persistent business data and user accounts
  • Admin panel for business registration moderation
  • Push notifications for nearby events
  • Expansion to other cities in Durango state, then nationally
  • Twilio integration for SMS alerts and business-to-customer contact
  • React Native mobile app for iOS and Android

Built With

react vite tailwindcss leaflet react-leaflet leaflet-routing-machine ollama llama3.2 openstreetmap osrm geolocation-api javascript html5 css3 nodejs

Built With

Share this project:

Updates