Rain or Shine: Que Siga La Rumba!

Rainy day during your holiday in the Caribbean? Don't fret. The rain is just a minor detour - the fun doesn't stop.

Comment

🌴Rain or Shine (Que Siga La Rumba!)

🎥 Pitch Video

https://youtu.be/IjSprggNHkU

Live Links & Source

💡 Inspiration

I spend a lot of time thinking about our local island logistics. If you’ve ever visited an archipelago like Bocas del Toro, Panama, you know that life revolves entirely around water. There are no roads connecting the outer islands so everything depends on local boat captains and water taxis.

When a sudden tropical downpour or high sea swell rolls in, plans don't just change; they grind to a halt. Guests get stranded, water taxis waste expensive fuel, and hotel front desks get absolutely slammed trying to coordinate reschedules.

I wanted to build a B2B SaaS platform that solves this exact problem: an active, multi-tenant coordination engine that connects hotel operators, guests, and local boat captains in real time, shifting schedules dynamically based on actual weather conditions.

🛠️ What it Does

Rain or Shine is an autonomic, multi-tenant stay coordinator that keeps island hospitality moving. The platform is split into three interconnected experiences:

  1. The B2B Operator Portal & AI Brand Extractor: Hotel or Airbnb hosts can onboard guests and trigger weather shifts. To avoid tedious setup forms, I built an AI Brand Extractor: operators simply type in their website URL (e.g. nayarabocastoro.com), and Gemini scrapes their metadata, automatically generating a bespoke dark-theme HSL color palette, typography stack, logo mappings, and personalized greetings to white-label the guest portal instantly.
  2. The Guest Companion: A premium, web-based guest portal. No app stores, logins, or passwords needed—guests access their itinerary via a secure, tokenized Magic-Link. When a weather warning triggers, the AI concierge checks for outdoor itinerary conflicts, queries available indoor tours (like chocolate workshops), writes the reschedule to the database, and serves a beautiful "Confirm Swap" card directly in the guest’s chat widget.
  3. The Captain's PWA: A lightweight, Spanish-by-default, offline-ready Progressive Web App for local water taxi operators. As soon as a guest swap is confirmed, the captain's manifest and passenger counts update instantly on their mobile phone, preventing a wasted, empty vessel run.

⚙️ How We Built It

  • The Core Stack: FastAPI on the backend, React + Vite on the frontend, and AWS DynamoDB as the primary database.
  • The AI Loop: Powered by Google Gemini 3.1-flash-lite and Model Context Protocol (FastMCP). Instead of raw text generations, the model acts as an active operator, dynamically invoking custom tools to check weather forecasts, query active bookings, and commit rescheduling swaps to DynamoDB.
  • Tactile Proximity Physics (Magnet.jsx): I wanted the UI to feel incredibly tactile. I wrote a zero-dependency React physics hook that tracks the user’s cursor coordinates in real time. Interactive buttons lean organically toward the cursor with a spring-like magnetic attraction and snap back smoothly on exit—delivering fluid, premium 60FPS animations with zero heavy animation packages.
  • Live MCP Log Console: To make the AI transparent, I built a slide-out panel that stream-renders Gemini's internal thoughts and tool-calling telemetry, letting judges watch the agent reason and act in real time.

🚧 Challenges We Ran Into

  • The Aggressive Service Worker Cache: Because the guest and captain portals are built as PWAs, browsers aggressively cached older JS and CSS bundles. During development, updates were invisible on mobile screens without a hard refresh. I solved this by implementing a robust cache-busting registration query (sw.js?v=3.1.8) and adding a controllerchange event listener that automatically triggers a single, native background tab reload the moment a new service worker takes control.
  • Unscrapable Web Protections: Scraping modern, client-heavy resort websites for branding colors is tough due to bot protection and raw HTML structures. I configured a fallback heuristic pipeline in python that uses Gemini's reasoning to generate coordinated color schemes, matching Google Fonts, and warm greetings using just the domain name if direct scraping fails.
  • Stateful Alert Flashes: On initial guest login, loading data from the database was incorrectly treated as a "live update," flashing an annoying "Itinerary Updated!" popup. I introduced a stateful React ref hasLoadedBackendItineraryRef that blocks any popup triggers until the first-load hydration is fully settled.

🏆 Accomplishments That We're Proud Of

  • The Live Theme Engine: Seeing the entire app dynamically re-skin itself, shifting between La Coralina Gold, Red Frog Crimson, and Nayara Cyan simply by switching guest profiles is incredibly satisfying.
  • Bulletproof Demo Resilience: Hackathons are notorious for database connection dropouts in sandbox environments. I designed our database connector with a graceful cascading fallback: if AWS DynamoDB credentials aren't detected or are blocked by firewalls, the backend seamlessly falls back to a high-fidelity local JSON mock database, rendering the exact same live features with zero UI errors. It's completely bulletproof for judges.
  • Clean, Flat UI: Stripping away clunky, cartoonish emojis and replacing them with custom, crisp inline SVGs (like map-pins and compasses) while maintaining a tight, professional, high-contrast dark scheme.

📚 What We Learned

  • gemini-3.1-flash-lite is a hidden powerhouse. For structured, schema-governed JSON extractions and high-speed tool execution via FastMCP, it is incredibly efficient and fast.
  • PWA service worker lifecycles are tricky, but taking the time to write clean update notifications and automatic tab reload logic saves massive amounts of user friction in real-world rollouts.

🔮 What's Next for Rain or Shine

  • IoT Reef Sensor Integration: Linking the weather checker directly to live physical IoT wave-height and reef sensors in Bocas del Toro to detect swells before the meteorological offices do.
  • Direct Booking Upsells: Integrating local payment gateways so guests can instantly pay the price difference or purchase upgrades when they confirm itinerary swaps.
  • Broader Archipelago Rollout: Adapting the multi-tenant SaaS model for other remote islands relying on water transit, such as San Blas in Panama, or the Greek Islands.

Built With

  • aws-dynamodb
  • css3
  • fastapi
  • git
  • github
  • google-cloud-run
  • google-gemini-api
  • html5
  • javascript
  • model-context-protocol-(mcp)
  • openweathermap-api
  • progressive-web-app-(pwa)
  • pydantic
  • python
  • react
  • service-workers
  • vercel
  • vite
Share this project:

Updates

Submission history