TideGuard

LOGO

Inspiration

We grew up on the Gulf Coast. After Hurricane Ian hit Fort Myers in 2022, people we knew didn't evacuate because they couldn't get a clear picture of what was coming or where to go. Then came the red tide the following season, the kind that stings your eyes from the parking lot and kills thousands of fish overnight. The data existed. FWC publishes bloom samples. NOAA publishes storm tracks. County emergency management publishes shelter locations. None of it was in the same place, and none of it was readable on a phone at 3 AM. We built the thing we wish existed when it mattered.

What it does

TideGuard runs two live dashboards, both fully usable on a phone.

The red tide dashboard pulls Karenia brevis sample data from the Florida Fish and Wildlife Conservation Commission's GIS API and maps every bloom location, color-coded by intensity. A threat header. Critical, Elevated, Low, or All Clear, updates in real time based on peak bloom concentration and current wind direction. Onshore wind pushes airborne toxins toward populated beaches. The app tells you when that's happening. The sidebar has a respiratory risk grid for six Southwest Florida beaches, a dead fish cleanup priority index, a live news feed, and an AI chat backed by IBM watsonx with today's bloom level, wind conditions, and recent articles injected as context so it answers specifically about current conditions, not in general.

The hurricane dashboard tracks active Atlantic storms via NOAA's National Hurricane Center feed. Each storm shows category, sustained wind speed, pressure, and movement vector. Forecast track points extend forward in time; past track points show where the storm has been. Overlay toggles let you add a live animated radar loop (2-hour Xweather sequence with play/stop controls), FEMA VE and AE flood zone polygons for SWFL barrier islands, evacuation zone polygons for Lee, Collier, Charlotte, and Sarasota counties, and ten emergency shelter locations with capacity and pet-friendly status. When no active storms exist, the dashboard loads Hurricane Milton's October 2024 track as a reference dataset.

On screens under 768px both dashboards switch to a full-screen map with a swipe-up bottom drawer for intel and a fullscreen overlay for chat.

How we built it

Frontend is React 19, TypeScript, Vite 7, Tailwind CSS 4, Leaflet with React-Leaflet for maps, Framer Motion for animation, and Vaul for the mobile bottom drawer. Deployed on Vercel with serverless API functions handling data proxies and credentials.

Data comes from six sources: FWC's MapServer GIS for red tide samples, Open-Meteo for wind direction and speed, NOAA NHC for storm tracks and active weather alerts, Xweather for animated radar tiles, NewsAPI for hurricane news, and IBM watsonx for the AI chat layer.

The AI chat uses live context injection, on every session open we push the current bloom level, wind vector (including onshore/offshore classification), and recent article headlines into the system prompt so the model answers about today, not about red tide in the abstract.

Challenges we ran into

Mobile layout was the hardest technical problem. Leaflet initializes at whatever pixel size the container is on first render. With our responsive layout, the map container was effectively zero-width on mobile until the breakpoint hook resolved, which left half the map blacked out. We wrote a MapResizer component that calls invalidateSize() after layout settles and that cleared it.

Getting the radar animation to read as motion without being disorienting took iteration. The Xweather tile API doesn't push frames, you cycle through fixed timestamp offsets manually. Too fast and it looks like flicker; too slow and it loses the sense of movement. We landed on 1.8 seconds per frame across a 2-hour loop.

NOAA's NHC feed goes quiet between seasons. We had to build a demonstration mode that loads a real historical track when no active storms are found, otherwise the hurricane dashboard would be an empty map for six months of the year.

Accomplishments that we're proud of

The watsonx context injection ended up feeling genuinely grounded rather than generic. The AI knows the current bloom level, which beaches are in the affected area, and whether wind is pushing toxins onshore. That specificity is what makes it useful versus just a chatbot attached to a page.

The mobile experience came together better than we expected. Full-screen map, swipe-up drawer for intel, full screen chat, it works at 375px and doesn't feel like a shrunken desktop app. That matters because the people who need this most are checking their phone at the beach or in a car, not at a desktop.

What we learned

Responsive map layouts are harder than they look. The distance between "works in a browser window" and "works on a phone someone is holding during an evacuation" is significant, and we spent more time on that gap than on any individual feature.

We also learned that being honest about data coverage builds more trust than pretending the data is complete. FWC doesn't sample every beach every day. Showing the sample date on every marker and acknowledging gaps is more useful to someone making a real decision than a clean UI that hides the uncertainty.

What's next for TideGuard

Push notifications when bloom intensity crosses a threshold near a saved location. Real-time storm surge modeling tied directly to the hurricane track position. Expanding coverage beyond Southwest Florida to the full Gulf Coast. And connecting with Lee County and Collier County emergency management to find out whether this is something their teams would actually use operationally.

COMPANY CHALLENGES;

FGCU

FGCU focuses on environmental sustainability. TideGuard fits right in because it tackles a major local ecological threat by tracking toxic algae blooms. By processing live water samples and wind direction, the app helps people safely navigate and respect the Florida coastal environment.

Eightpoint

We saw they are looking for projects that turn unpredictable and unstructured input into something useful. TideGuard applies beautifully here because it ingests a chaotic mix of raw map coordinates, weather vectors, and news text. The AI then translates all that messy data into very clear and specific safety answers for the user.

Symplistic.ai

For Symplistic.ai, we essentially built an intelligent risk analyst for the coastal real estate market. Instead of looking at banking transactions, we are analyzing environmental and financial risk. We used ContentIQ to ingest the data and surface hard business metrics. When a property manager asks our AI about storm prep, we provide exact financial insights like the 2026 changes to hurricane deductible percentages and new flood coverage mandates. This fits their challenge perfectly because we are generating actionable risk signals and evidence-backed explanations.