World Cup Fan Journey

A small Next.js demo that visualizes Loop Engineering through a World Cup fan journey.

The user starts from one natural-language match query, follows players, expands into related match trails, and eventually generates a trace of how the AI loop worked: trigger, goal, state, tools, observations, memory, and stop condition.

Built with Codex + SerpApi.

Demo Video

visualize-loop-engineering-using-world-cup-demo.mp4

Loop Engineering Architecture

Why This Exists

Prompt Engineering is about asking once.

Loop Engineering is about designing what happens after each result comes back.

This demo turns that idea into a visible product flow:

1. Search for a match, for example Show me France vs Morocco.
2. Parse the match intent.
3. Fetch sports facts, videos, debates, and related players.
4. Follow a player.
5. Use that click as the next trigger.
6. Expand into the player's recent match trail.
7. Stop when the user generates the final Loop Engineering trace.

Demo Flow

• Start trigger: Natural-language search box.
• Match fan pack: Score/status, YouTube/Shorts, discussions, AI match analysis, players to follow.
• Player trigger: Clicking Follow on a player changes the loop goal.
• Player trail: The app fetches recent/trending matches, videos, debates, and related players.
• Live polling: Live or half-time matches refresh immediately, on window focus, and every 10 minutes until finished.
• Stop condition: Generate my football graph.
• Final output: A Loop Engineering trace, not just a player relationship graph.

How It Shows Loop Engineering

The final trace maps the product experience to loop concepts:

• Trigger: User search or follow click.
• Goal: Build a match fan pack, then expand a player's 3-match trail.
• Current state: Match status, score, followed players, accepted videos, generated trails.
• Tools: LLM parser, SerpApi sports/search APIs, YouTube, News, Trends, Instagram, Images.
• Observations: Updated scores, broken thumbnails, full-time status, returned videos, related players.
• Persistent memory: Followed players, accepted videos, expanded trails, known fact guards.
• Stop condition: User asks to generate the final graph.
• Output: A readable Loop Engineering trace.

SerpApi Usage

SerpApi is the observation layer for the demo.

The app uses SerpApi-backed lookups for:

• sports result/status data
• YouTube and Shorts results
• Google News discussion topics
• Google Trends related searches
• Instagram profile enrichment
• Google Images for player/action visuals

The long-term production direction is to use SerpApi's Google Sports API more directly for game, league, and team result retrieval:

https://serpapi.com/google-sports-api

Environment Variables

Create .env in the project root:

SERPAPI_API_KEY=your_serpapi_key
ANTHROPIC_API_KEY=your_anthropic_key_optional

SERPAPI_API_KEY is required for live sports/video/news/trends/profile data.

ANTHROPIC_API_KEY is optional. The app can use it for structured LLM parsing/planning, with deterministic fallbacks for the demo path.

Run Locally

npm install
npm run dev

Open:

http://localhost:3000

Build:

npm run build

Tests:

npm test

Tech Stack

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS
• SerpApi JavaScript SDK
• Vitest
• Codex-assisted local development