Ripple

Ripple

Inspiration

We realized that every sports app in the world does the exact same thing: they tell you what just happened. But the news isn't the story. The real story is the consequences.

When a superstar moves, it shifts salary caps, ruins draft strategies, and swings Vegas betting odds in seconds. Keeping track of that chaos is impossible for the average fan. We wanted to build a platform that maps these causal relationships. We wanted to build the Bloomberg Terminal for sports narratives.

What it does

Ripple is a real-time causal mapping engine. Standard sports apps give you the splash; we show you the ripple.

When a major sports news event occurs, Ripple doesn't just report the headline. It instantly calculates the first, second, and third-degree ripple effects across the entire league. Using a live interactive canvas, it visually maps out the financial, roster, and betting implications of the news.

How we built it

The entire application is built on live data and dynamic AI generation.

Frontend: We used Next.js 14 (App Router) and React for a fast, responsive UI. We styled it with Tailwind CSS for a sleek, dark-mode cyberpunk aesthetic. The core visualization engine is powered by React Flow and animated with Framer Motion.

Backend & Ingestion: We built our ingestion engine using Next.js API Routes. It pulls live, verified data using an RSS parser (currently connected to ESPN's NBA feed).

The AI Engine: The real magic happens with Google’s Gemini 1.5 Pro. We aren't just asking an LLM to write a paragraph. We utilize Gemini's "Structured JSON Outputs" and pass it strict context regarding current team caps and rosters. Gemini mathematically calculates the ripples and returns a perfect JSON graph schema containing nodes, edges, and sentiment analysis.

Database & Real-time: That schema is instantly written to a Supabase PostgreSQL database. Leveraging Supabase Real-time WebSockets, the React Flow canvas on the frontend animates for every user currently on the app the moment new data is ingested.

Challenges we ran into

Taming LLM Hallucinations: Early on, when asking an LLM to predict sports outcomes, it would invent wild, unrealistic scenarios. The major breakthrough was realizing we needed to use Gemini 1.5 Pro's structured outputs to force a strict JSON schema (nodes and edges) and tightly prompt it to act as an "NBA Capologist," grounding its predictions in actual financial rules.

Real-time Graph State Management: Managing the state of a complex React Flow graph that is constantly being updated via WebSockets from Supabase was tricky. We had to ensure that new nodes animated in smoothly without breaking the current layout or interrupting a user who was inspecting a specific ripple.

Zero Mocks Mandate: Forcing ourselves to build a production-ready MVP rather than a static prototype meant wrestling with actual API rate limits, database schema design, and asynchronous loading states.

Accomplishments that we're proud of

Watching the app fetch a real, live news headline and then seconds later seeing the React Flow canvas explode with perfectly logical, color-coded, connected nodes is incredibly satisfying.

Seamless Gemini Integration: We successfully implemented a pipeline where an LLM acts not just as a text generator, but as a dynamic data-structuring engine that directly powers a complex UI.

Full-Stack Real-time: Getting the Supabase real-time subscriptions working in tandem with the React state to broadcast updates instantly to all connected clients.

What we learned

Using Next.js Server Actions simplified our API layer significantly, making the data flow from the RSS feed to Gemini to Supabase much cleaner.

What's next for Ripple

Fantasy Sports Integration: Allow users to connect their fantasy rosters and receive personalized "ripple alerts" when league news affects their specific players.