🌊 TideLens

Inspiration & What it does

Traditional weather apps give raw data — like inches of rain — but not actionable context. They don’t answer a simple question: how will this actually affect my route?

TideLens turns invisible water risk into something users can see and interact with. Users can search any location, simulate rising water conditions, compare cities, and instantly understand real-world impact through a unified Vulnerability Score.

How we built it

We focused on two things: real-time interactivity and scalable architecture.

Frontend: Next.js (React), Tailwind CSS, Framer Motion
Core System: A dynamic scoring model driven by environmental factors and user-controlled stress

The vulnerability score updates in real time:

V_{\text{dynamic}} = \max\left(5, \min\left(99, V_{\text{base}} + \left\lfloor (W - 35)\times 0.7 \right\rfloor \right)\right)

As users adjust water intensity, the system continuously recalculates risk, creating a responsive simulation experience.

We structured all state as modular schemas, making the system ready to integrate with AWS serverless services and MongoDB geospatial data without redesign.

Challenges & Accomplishments

1. No dead ends Instead of failing on unknown locations, we implemented a procedural generation algorithm using string hashing to generate realistic environmental profiles on the fly.

2. Performance under interaction We decoupled heavy computation from animation using useMemo and useCallback, ensuring smooth 60fps updates even during continuous simulation.

3. Accessibility We added ARIA labels and dynamic attributes so screen readers can navigate a highly visual interface.

What we learned

We learned how to balance mathematical modeling, real-time UI systems, and user experience design — especially how small architectural decisions (like state structure) directly impact scalability and performance.