GROQ & Dagger🕵️‍♂️⚡: 그래프 관계형 쿼리로 사이버 느와르 콜드 케이스 해결하기

This is a submission for the Sanity Challenge, Path Two: Vibe-Code Something Strange

What I Built

Imagine stepping into a neon-soaked, retro-terminal precinct where every suspect dossier, physical evidence locker, and conflicting testimony is bound together in a live graph database.

GROQ & Dagger is an atmospheric cyber-noir interactive crime investigation board. Designed for digital detectives, mystery enthusiasts, and developers exploring structured content, it replaces static corkboards with a dynamic terminal desk.

Instead of running heavy client-side loops or complex database joins, GROQ & Dagger leverages Sanity’s GROQ (Graph Relational Object Queries) engine to dereference deeply linked document references in a single query payload. Click on any suspect, and the entire desk dynamically isolates every piece of tied physical evidence, alibi flaw, and testimony contradiction in real time.

Demo

• 🌐 Live Application: https://groq-and-dagger.vercel.app/

⚡ Key Features & Interface Highlights

• 🚨 CRT Terminal & Cyber-Noir Aesthetic: Dark mode grid overlay, glowing scanlines, and neon caution indicators (⚠️ CRIME SCENE DO NOT CROSS).
• 🕵️️ Suspect Dossier Vault: Inspect suspect profiles, aliases, alibis, and real-time status badges (PRIME SUSPECT, CLEARED, UNDER WATCH).
• 🔍 Interactive Evidence Locker: High-resolution physical and digital evidence assets fetched from Sanity CDN.
• ⚡ Contradiction Matrix: Automated flags highlighting conflicting alibis cross-referenced directly against physical evidence.
• ⏳ Chronological Timeline Engine: Sequential step-by-step breakdown of verified factual crime scene events.
• 🎯 One-Click Cross-Referencing: Selecting any suspect dynamically highlights and isolates their connected evidence and contradictions across the entire dashboard.
• 📊 Live Case Metrics Bar: High-visibility header counters tracking total suspects, evidence items, contradictions, and timeline events on file.

Code

• 📁 GitHub Repository: https://github.com/rimshacodes5/groq-and-dagger

My Build Process

Building GROQ & Dagger was an experiment in vibe-coding an immersive retro-tech interface using Next.js (App Router with Turbopack), Tailwind CSS, and Sanity Studio v3.

1. Vibe-Coding the UI & Interactivity

I wanted the dashboard to feel like a high-stakes investigation terminal. Iterating with AI prompts, we focused on:

• Designing custom Tailwind CSS utilities for CRT scanline overlays and glowing neon status badges (Amber for suspects, Cyan for evidence, Red for contradictions, Emerald for verified facts).
• Building responsive React state logic for multi-directional cross-filtering—clicking a suspect highlights their connected evidence cards seamlessly without breaking the layout.

2. Obstacles & Course-Corrections

During the build and deployment pipeline, we navigated three key engineering hurdles:

• Git Index Cache Cleanup: Build artifacts (.next and node_modules) were initially tracked in git history. We updated .gitignore and purged the index using git rm -r --cached . to ensure a clean commit repository.
• The .next Output Directory Build Fix: The initial Vercel deployment failed because package.json was executing "build": "sanity build". Re-routing the script to "build": "next build" allowed Next.js to compile production bundles cleanly on Vercel edge servers.
• Sanity CORS Whitelisting: Production deployment required authorizing the live Vercel domain (https://groq-and-dagger.vercel.app) inside the Sanity Management Dashboard under API settings with credentialed access enabled.

Sanity Project Details

• Sanity Project ID: ur1wyqmd
• Dataset: production

Structured Content Schema

The content model comprises 4 interconnected schema types linked via reference arrays (type: 'reference'):

1. suspect: Name, alias, alibi, status, background notes, and photo asset.
2. evidence: Title, type (physical/digital), location found, description, photo asset, and connectedSuspects reference array.
3. contradiction: Title, description, severity score, suspectInvolved reference, and evidenceInvolved reference array.
4. timelineEvent: Timestamp, title, description, and verification status.

Querying the Web of Clues with GROQ

GROQ’s -> dereferencing operator allowed us to resolve multi-level document graphs effortlessly in a single request:

groq
// Dereferencing Suspects & Linked Evidence inside Contradictions
*[_type == "contradiction"] {
  _id,
  title,
  description,
  severity,
  suspectInvolved-> {
    _id,
    name,
    alias
  },
  evidenceInvolved[]-> {
    _id,
    title
  }
}

// Resolving Connected Suspect Profiles for Physical Evidence
*[_type == "evidence"] {
  _id,
  title,
  type,
  description,
  locationFound,
  "imageUrl": image.asset->url,
  connectedSuspects[]-> {
    _id,
    name,
    status
  }
}

Enter fullscreen mode Exit fullscreen mode