DEV Community: Himanshu Gangwar

WILDCASE: The World Is the Case File — An Outdoor Mystery Game That Gets You Off Your Screen

Himanshu Gangwar — Tue, 06 Oct 2026 10:01:25 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

WILDCASE: The World Is the Case File 🔍🌳

What I Built

WILDCASE is an outdoor mystery-investigation game that turns a walk in the park into a detective case. You receive a classified dossier, put your phone in your pocket, and go outside. You hunt for real physical evidence (a metal gate, weathered bark, brick masonry, a circular fastener), take a 2-5 second scan to verify it, eliminate suspects, and finally name the culprit.

Most "get outside" apps pull you away from your phone and still end up glued to a screen. WILDCASE inverts that. The phone is an intermittent field instrument; the world is the game board.

How it gets people off the screen:

Field Mode: an ultra-minimal dark HUD with a single breathing sonar indicator. It is built to be ignored, so the phone stays in your pocket.
Away Ratio: using the Page Visibility API, WILDCASE measures the share of your session spent away from the screen and shows it in your final Field Report (for example, 87.4% Away).
Real objects as clues: progress depends on noticing materials, textures and shapes in your actual surroundings.

Who it's for: students and commuters, families on weekend walks, casual mystery fans, and anyone who wants a reason to look up from their screen.

The Player Journey

┌──────────────┐   ┌───────────────┐   ┌────────────────┐   ┌───────────────────┐
│ CASE BRIEFING│──▶│ PHONE IN      │──▶│ WALK OUTDOORS  │──▶│ OBSERVE SURROUND- │
│ (dossier)    │   │ POCKET        │   │ (Field Mode)   │   │ INGS              │
└──────────────┘   └───────────────┘   └────────────────┘   └─────────┬─────────┘
                                                                      │
                                                                      ▼
┌──────────────┐   ┌───────────────┐   ┌────────────────┐   ┌───────────────────┐
│ FIELD REPORT │◀──│ VERDICT       │◀──│ ACCUSATION     │◀──│ DISCOVER PHYSICAL │
│ (Away Ratio) │   │               │   │                │   │ EVIDENCE          │
└──────────────┘   └───────────────┘   └───────▲────────┘   └─────────┬─────────┘
                                               │                      │
                                       ┌───────┴────────┐   ┌─────────▼─────────┐
                                       │ NEW LEAD       │◀──│ BRIEF SCAN (2-5s) │
                                       │ UNLOCKED       │   │ + AI INTERPRETATION│
                                       └────────────────┘   └───────────────────┘

Demo

🔗 Live demo: https://wildcase-web.onrender.com

It is a PWA, so open it on your phone and add it to your home screen. It also works fully offline.

Code

Himanshu0250 / WILDCASE

AI-powered outdoor mystery investigation game — the world is the case file.

WILDCASE

"The world is the case file."
An outdoor mystery investigation game engineered to get players off screens and into the physical world.

Live Demo

[click here] https://wildcase-web.onrender.com

What is WILDCASE?

WILDCASE is an outdoor detective adventure where the player's physical environment is the game board and their mobile device is an intermittent field sensor instrument.

Instead of sitting in front of a screen, players receive a classified mystery dossier, put their phone away in their pocket, walk outdoors through parks or streets, observe real physical objects (metal gates, weathered bark, brick masonry, circular fasteners), verify them on-device, eliminate suspects, and deduce the true culprit.

CASE BRIEFING ➔ PUT PHONE IN POCKET ➔ WALK OUTDOORS ➔ OBSERVE SURROUNDINGS
      ➔ DISCOVER PHYSICAL EVIDENCE ➔ BRIEF SCAN (2-5s) ➔ AI INTERPRETATION
            ➔ UNLOCK NEW LEAD ➔ PHONE AWAY ➔ ACCUSATION ➔ VERDICT ➔ FIELD REPORT

The Architectural Invariant

$$\text{Device Senses Descriptors} \longrightarrow…

View on GitHub

The repo is a pnpm monorepo (apps/, packages/, docs/, fixtures/, scripts/), MIT licensed, with documentation covering the vision pipeline, evidence system, case design, privacy and offline behavior. Run it locally with pnpm install && pnpm dev. It needs no API keys to start.

How I Built It

WILDCASE is built on one architectural rule:

Device senses descriptors → Core engine matches predicates → AI interprets context.

Layer	Responsibility	Tech
On-device vision	Extracts statistical descriptors (`metal`, `rough`, `vertical`) from a short camera scan. No photo ever leaves the device.	HTML5 Canvas, Sobel gradients
Deterministic core (`@wildcase/core`)	Holds the immutable ground truth, unlocks clues progressively, and eliminates suspects by evaluating predicates.	TypeScript state machine
AI Game Master	Interprets verified evidence and writes atmospheric dispatches. It narrates; it never decides what is true.	Gemma 2 (open-weight) via Mastra workflows
API	Case delivery and orchestration.	Hono
Client	Installable, offline-first app with local persistence.	React 19, Dexie (IndexedDB), Service Worker
Audio	Procedural shutter clicks and stamp impacts, plus optional voiceover.	Web Audio, ElevenLabs / Web Speech

System Architecture and Trust Boundaries

The key design decision is who is allowed to decide what. Pixels never leave the device, the engine alone decides truth, and the AI only writes the story.

 PHYSICAL WORLD
      │  camera frames (never uploaded)
      ▼
┌──────────────────────────── DEVICE (PWA / React 19) ────────────────────────────┐
│                                                                                 │
│  ┌────────────────────────┐        ┌───────────────────────────┐                │
│  │ On-device Vision       │        │ Page Visibility Tracker   │                │
│  │ Canvas → color,        │        │ screen time vs away time  │                │
│  │ roughness, Sobel edges │        └─────────────┬─────────────┘                │
│  └───────────┬────────────┘                      │                              │
│              │ descriptors only                  │                              │
│              ▼                                   ▼                              │
│  ┌────────────────────────────────────────────────────────────┐                 │
│  │            Investigation State Machine (@wildcase/core)    │                 │
│  │   predicate matching • clue unlocking • suspect alibis     │                 │
│  └───────────┬───────────────────────────────┬────────────────┘                 │
│              ▼                               ▼                                  │
│  ┌────────────────────────┐     ┌──────────────────────────┐                    │
│  │ Dexie / IndexedDB      │     │ Deterministic Fallback   │                    │
│  │ offline cache + sync   │     │ Narrator (no network)    │                    │
│  └────────────────────────┘     └──────────────────────────┘                    │
└──────────────────────────────────────┬──────────────────────────────────────────┘
                                       │ verified facts + case text only (online)
                                       ▼
                         ┌───────────────────────────┐
                         │ WILDCASE API  (Hono)      │
                         └─────────────┬─────────────┘
                                       ▼
                         ┌───────────────────────────┐
                         │ Mastra Workflow Engine    │
                         └─────────────┬─────────────┘
                                       ▼
                         ┌───────────────────────────┐
                         │ Gemma 2 (open-weight)     │
                         │ → dramatic dispatch text  │
                         └───────────────────────────┘

Evidence Verification Flow

What happens in the 2-5 seconds when a player scans an object:

        ┌────────────────────┐
        │  Player scans item │
        └─────────┬──────────┘
                  ▼
        ┌────────────────────┐   no    ┌──────────────────────────┐
        │ Frame quality OK?  │────────▶│ "Hold steady / more light"│──┐
        │ (blur, brightness) │         └──────────────────────────┘  │ retry
        └─────────┬──────────┘                                       │
                  │ yes                                              │
                  ▼                                                  │
        ┌────────────────────┐                                       │
        │ Extract descriptors│◀──────────────────────────────────────┘
        │ metal / rough /    │
        │ vertical ...       │
        └─────────┬──────────┘
                  ▼
        ┌────────────────────┐   no    ┌──────────────────────────┐
        │ Predicate matches  │────────▶│ Evidence rejected,       │
        │ a clue in the case?│         │ no state change          │
        └─────────┬──────────┘         └──────────────────────────┘
                  │ yes
                  ▼
        ┌────────────────────┐
        │ Core eliminates    │
        │ suspects, unlocks  │
        │ next lead          │
        └─────────┬──────────┘
                  ▼
        ┌────────────────────┐  online   ┌──────────────────────────┐
        │ Narrate result     │──────────▶│ Gemma 2 via Mastra       │
        │                    │           └──────────────────────────┘
        │                    │  offline  ┌──────────────────────────┐
        │                    │──────────▶│ Deterministic narrator   │
        └────────────────────┘           └──────────────────────────┘

Key Code

The snippets below are simplified illustrations of the pattern each layer follows, trimmed for readability. The full implementations live in the repo.

1. On-device descriptors: no photo leaves the phone

Each frame is reduced to a few numbers (color, roughness, edge direction) in memory, then discarded.

type Descriptor = "metal" | "rough" | "smooth" | "vertical" | "horizontal";

export function extractDescriptors(img: ImageData): Descriptor[] {
  const { data, width: w, height: h } = img;

  // 1. Grayscale
  const gray = new Float32Array(w * h);
  for (let i = 0; i < w * h; i++) {
    gray[i] = 0.299 * data[i * 4] + 0.587 * data[i * 4 + 1] + 0.114 * data[i * 4 + 2];
  }

  // 2. Sobel gradients: edge strength (roughness) + dominant direction
  let magSum = 0, gxSum = 0, gySum = 0;
  for (let y = 1; y < h - 1; y++) {
    for (let x = 1; x < w - 1; x++) {
      const i = y * w + x;
      const gx =
        -gray[i - w - 1] + gray[i - w + 1] - 2 * gray[i - 1] + 2 * gray[i + 1] - gray[i + w - 1] + gray[i + w + 1];
      const gy =
        -gray[i - w - 1] - 2 * gray[i - w] - gray[i - w + 1] + gray[i + w - 1] + 2 * gray[i + w] + gray[i + w + 1];
      magSum += Math.hypot(gx, gy);
      gxSum += Math.abs(gx);
      gySum += Math.abs(gy);
    }
  }
  const roughness = magSum / ((w - 2) * (h - 2));

  // 3. Map statistics to a small, shared vocabulary
  const out: Descriptor[] = [roughness > 40 ? "rough" : "smooth"];
  if (gxSum > gySum * 1.4) out.push("vertical"); // strong horizontal gradient = vertical edges
  if (gySum > gxSum * 1.4) out.push("horizontal");
  return out;
}

2. The deterministic engine: truth is code, not a prompt

Suspects are eliminated by evaluating predicates against immutable case data. The same input always gives the same result, which is what makes the game testable.

interface Suspect {
  id: string;
  /** Descriptors that must NOT be present at the scene if this suspect is guilty */
  alibiContradicts: Descriptor[];
}

interface Clue {
  id: string;
  requires: Descriptor[]; // predicate: all must be observed
  unlocks: string[];      // next clue ids
  eliminates: string[];   // suspect ids ruled out by this evidence
}

export function applyEvidence(state: CaseState, observed: Descriptor[]): CaseState {
  const matched = state.caseFile.clues.filter(
    (c) => !state.found.has(c.id) && c.requires.every((d) => observed.includes(d)),
  );

  return matched.reduce<CaseState>(
    (s, clue) => ({
      ...s,
      found: new Set(s.found).add(clue.id),
      suspects: s.suspects.filter((x) => !clue.eliminates.includes(x.id)),
      available: [...s.available, ...clue.unlocks],
    }),
    state,
  );
}

export const solved = (s: CaseState) => s.suspects.length === 1;

3. The AI narrates, with a safe fallback

The model receives only verified facts and is told to add atmosphere, not new evidence. If it is unavailable, the game keeps working.

export async function narrate(event: VerifiedEvent, ctx: CaseContext): Promise<string> {
  try {
    const res = await gameMaster.generate({
      system:
        "You are a noir detective narrator. Use ONLY the facts provided. " +
        "Never invent clues, suspects or outcomes. Reply in 2-3 sentences.",
      input: JSON.stringify({ facts: event.facts, tone: ctx.tone }),
      signal: AbortSignal.timeout(4000),
    });
    return res.text;
  } catch {
    // Offline, rate-limited or timed out: deterministic template keeps the game playable
    return fallbackNarrator(event, ctx);
  }
}

4. Measuring the Away Ratio

The Page Visibility API turns "did you actually go outside?" into a number.

export function createAwayTracker() {
  let awayMs = 0, screenMs = 0;
  let last = performance.now();
  let hidden = document.hidden;

  const flush = () => {
    const now = performance.now();
    (hidden ? (awayMs += now - last) : (screenMs += now - last));
    last = now;
  };

  document.addEventListener("visibilitychange", () => {
    flush();
    hidden = document.hidden;
  });

  return {
    ratio: () => {
      flush();
      const total = awayMs + screenMs;
      return total ? awayMs / total : 0; // e.g. 0.874 → "87.4% Away"
    },
  };
}

Why Does Open Innovation Matter?

An outdoor game has constraints a closed API handles poorly:

Connectivity: parks, trails and old neighborhoods often have weak or no signal. Open-weight models and an offline-first architecture mean the experience doesn't depend on a live call to a vendor.
Privacy: because the model only sees abstract descriptors and case text, never images or locations, we can make a real zero-surveillance promise. That matters for a camera-based app that kids and families might use.
Cost and access: open weights let anyone self-host or run a small model without per-request fees, which matters for a free community game.
Community cases: the game's content is data. Because the engine, case format and docs are open (CASE_DESIGN.md), anyone can author a mystery for their own town, school or campus. That is the natural Hacktoberfest contribution path.

A closed API could have written the narration. Open innovation is what lets this run offline, stay private, cost nothing to scale, and be extended by people who live where the game is played.

Prize Categories

WILDCASE enters the categories below. Each one is a load-bearing part of the architecture, not a bolt-on, and each is tied to a specific job in the system.

Category	Prize tier	Its job in WILDCASE
Best Use of Gemma	Featured	The open-weight model behind the AI Game Master
Best Use of Render	Featured	Hosts the live PWA and the Hono API (`render.yaml` in the repo)
Best Use of Mastra	Partner	Workflow engine that orchestrates the narration pipeline
Best Use of ElevenLabs	Partner	Voice for the detective's field dispatches

Use of Gemma

Gemma 2 is the AI Game Master: it turns verified evidence into atmospheric, noir-style dispatches. The design makes an open-weight model the right choice rather than just an acceptable one:

It only sees abstract descriptors and case text, never photos or locations, so a self-hosted or locally served Gemma keeps the zero-surveillance promise intact.
It narrates, it never judges. The deterministic core decides what is true; Gemma only writes the voice, which keeps the mystery fair and the model swappable.
It can be replaced or run offline. Because the model is open-weight and sits behind a narrow interface, the game degrades to deterministic fallback narrators when there is no network.

Use of Render

The live demo runs on Render at https://wildcase-web.onrender.com, defined by a render.yaml blueprint in the repo, with the web app and the Hono API deployed as separate services. The deployment steps and environment reference are documented in docs/PRODUCTION_SETUP.md, so anyone can fork the repo and deploy their own copy.

Use of Mastra

The API hands every verified evidence event to a Mastra workflow, which assembles the grounded prompt, calls Gemma 2, and returns the narration. Using a workflow engine instead of an ad-hoc fetch gives the model call a clear, testable shape: verified facts in, constrained narration out, with a defined failure path to the offline narrator.

Best Use of ElevenLabs

Narration is delivered as voice dispatches, so a player can keep the phone in their pocket and listen to the investigation while walking, which is the core of the "touch grass" idea. When ElevenLabs is unavailable, the app falls back to the browser's Web Speech API, so the experience still works offline.

MemoryMate — An AI Memory Assistant Built for a Friend

Himanshu Gangwar — Sat, 03 Oct 2026 05:47:30 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

I built MemoryMate, a personal AI memory assistant designed for a friend who often forgets small but important details about people, conversations, events, and shared experiences.

The idea came from a simple problem: we remember major moments, but the small details that make relationships meaningful are often the easiest to forget.

MemoryMate gives users one place to store those details and interact with them through an AI-powered interface.

It can help users:

Save and organize personal memories
Store information about important people
Keep track of events and meaningful dates
Explore memories through a timeline
Ask questions about their stored memories through AI
View insights from their memories
Find information without manually searching through scattered notes

The goal isn't to replace human memory. It's to create a digital extension of memory that helps people remember the details that matter.

Demo

Live Demo:
Watch the MemoryMate Demo

https://memorymate-frontend.onrender.com

The application is deployed as a full-stack application:

React Frontend → FastAPI Backend → MongoDB Atlas

Code

GitHub Repository:
https://github.com/himanshugangwar5752-demo/MemoryMate

Project Structure

MemoryMate/
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── context/
│   │   └── services/
│   ├── package.json
│   └── vite.config.js
│
├── backend/
│   ├── app/
│   │   ├── api/
│   │   ├── core/
│   │   ├── database/
│   │   ├── schemas/
│   │   └── main.py
│   ├── tests/
│   └── requirements.txt
│
└── README.md

A small example of the backend API

from fastapi import APIRouter

router = APIRouter()

@router.get("/health")
async def health_check():
    return {
        "status": "healthy",
        "service": "MemoryMate"
    }

And the frontend communicates with the backend through a centralized API service:

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;

export const api = async (endpoint, options = {}) => {
  const response = await fetch(
    `${API_BASE_URL}${endpoint}`,
    {
      ...options,
      headers: {
        "Content-Type": "application/json",
        ...options.headers,
      },
    }
  );

  return response.json();
};

This separation keeps the frontend, backend, and AI functionality modular and makes the application easier to extend.

How I Built It

MemoryMate is a full-stack application built with:

Frontend

React
Vite
JavaScript
React Router

The frontend contains the main MemoryMate experience, including the dashboard, AI chat, memories, people, events, timeline, analytics, settings, and profile sections.

Backend

Python
FastAPI
Pydantic
REST APIs for application functionality and authentication

Database

MongoDB Atlas

MongoDB stores the persistent application data so memories aren't limited to a user's browser session.

AI

The AI component uses Gemma, an open-weight model.

Instead of treating the AI as a separate chatbot, MemoryMate is designed around the idea of connecting AI with the user's stored memories.

A simplified version of the concept looks like:

User
  ↓
MemoryMate UI
  ↓
FastAPI API
  ↓
Memory / Context Retrieval
  ↓
Gemma
  ↓
AI Response
  ↓
User

This architecture allows the AI experience to be built around the actual purpose of the application: helping users interact with their own memories.

Deployment

I deployed the project using:

Render → React frontend
Render → FastAPI backend
MongoDB Atlas → Database

Why Does Open Innovation Matter?

Open innovation mattered to this project because I wanted to understand what happens when AI is treated as a component that can be experimented with and adapted rather than simply calling a closed AI API.

Using an open-weight model such as Gemma gave me the opportunity to explore how an AI model can be integrated into a product built around a specific problem.

For MemoryMate, this is particularly interesting because the application deals with personal information.

Open models create possibilities for developers to experiment with:

Different inference providers
Custom AI workflows
Memory retrieval strategies
Prompt and context design
Future local or self-hosted inference

A closed API can make AI integration convenient, but open innovation gives developers more freedom to understand and control the technology underneath the application.

For me, the biggest takeaway was:

AI becomes much more interesting when it is built around a real human problem instead of being added just because a project needs AI.

My Agent Session

I used AI-assisted development throughout the project for:

Exploring the application architecture
Debugging frontend and backend issues
Improving the UI
Working through deployment problems
Iterating on features
Reviewing implementation decisions

Prize Categories

Render

MemoryMate is deployed on Render:

React frontend → Render Static Site
FastAPI backend → Render Web Service

The application uses MongoDB Atlas as its persistent database.

Final Thoughts

MemoryMate started with a simple question:

What if an AI assistant could help us remember the small things about the people and experiences that matter to us?

We already have tools for remembering tasks, passwords, appointments, and files.

MemoryMate explores a different kind of memory — human memory.

It's still an evolving project, but building it taught me that the most meaningful AI applications don't necessarily need to solve huge problems.

Sometimes, solving one small problem for one person is enough to build something worth sharing.

*Built for a friend. Built around memory. Built with open innovation. *