MoatHero

My Hackathon Journey: Building MoatHero with Codex & ChatGPT 5.6 🏰

Hey everyone!

So, full disclosure: I’m a first-time Codex user. I had never actually touched or built anything with Codex before this hackathon. When the event was announced, it felt like the perfect playground to finally roll up my sleeves and see what all the hype was about.

A one-week timeline is incredibly short, especially when you are trying to learn a completely new workflow. But I had this idea floating around in my head for a while. It was actually inspired by a larger project I’ve been building called RankBeacon. RankBeacon is great for standard SEO, search tracking, and website health audits, but I kept seeing a massive gap in how modern search is evolving: Generative Engine Optimization (GEO) and AI Search Consensus.

How does a brand defend its narrative when ChatGPT, Gemini, and Perplexity are summarizing answers instead of just showing a list of links? That was the birth of MoatHero. I wanted to build a tool that could measure a brand's citation density, calculate its Share of Voice (SoV) across different AI search engines, audit social footprint alignment, and generate SameAs structured data schemas to lock in brand authority.

Since I only had seven days, I partnered up with ChatGPT, specifically utilizing the specialized Codex integration inside ChatGPT (running on the premium ChatGPT 5.6 model). And let me tell you, it was a wild and productive ride.

Here is exactly what we built and improved over this intense week:

1. Highly Defensible Citation & Scoring Math

In our early drafts, the scoring was based on loose heuristics. For this hackathon, we completely rebuilt the scoring pipeline inside api/citation_sov.ts to be highly transparent and legally defensible. Instead of just returning a single "Consensus Score", MoatHero now programmatically analyzes scraped search result snippets to compute:

Direct Citation Ratio: The exact percentage of scraped search snippets that verify your brand entity.

Semantic Density Weight: Measuring the co-occurrence and proximity of your brand name next to industry category keywords. Verification Confidence: The authority score of the citing domains (separating premium publications from generic forums). The final Consensus Index is calculated as a mathematically weighted combination of these real, auditable metrics, complete with proof lines so you can see exactly where the AI extracted its authority.

2. Zero-Friction, Local-First Implementation (No Firestore Required)

Initially, the application saved baseline snapshots exclusively to Google Cloud Firestore. While Firestore is great, requiring database permissions, credentials, and user logins makes it extremely high-friction for hackathon judges and quick demos.

With ChatGPT's help, we refactored the "Before & After" delta tracker to be completely local-first. It now writes and reads baseline snapshots directly from localStorage and client-side cookies. If Firestore is connected, it backs up the snapshots seamlessly in the background, but the entire core dashboard, audit pipeline, and delta comparison run flawlessly out of the box with zero setup. Anyone can open it, audit a domain, and lock in a baseline instantly.

3. Full Mobile Responsiveness & Robust Error States

We optimized the entire layout to look spectacular on any screen, from ultra-wide displays to mobile phones. We also built strict input validations and elegant, copper-colored error boundaries to handle network timeouts or API rate-limiting gracefully, offering clear, actionable troubleshooting guides instead of silent crashes.

This hackathon was an incredible test of what is possible when you pair a creative developer with powerful tools like Codex and ChatGPT 5.6. MoatHero went from a whiteboard concept to a fully polished, working application in a single week.

What we kept: Brand Continuity & Elite Aesthetics

We wanted MoatHero to look just as high-end, and unique as it's 'mom' RankBeacon, with a few tweaks here & there.

Color Palette: Strictly adhered to a premium matte black, dark charcoal, copper, and warm yellow-gold branding palette. Micro-Animations: All primary buttons and forward actions have organic hover micro-animations (where chevrons and arrow vectors slide forward smoothly on hover, and download icons slide down slightly). Clean Framing: We removed solid square border lines wrapping our branding icons, allowing our signature lighthouse vectors and layout elements to breathe freely.

I can't wait for you to try it out, measure your brand's AI Share of Voice, and start defending your narrative on the future of search!

Dorien Van den Abbeele X / Twitter: @DorienVibecodes Support: support@hero-apps.com

Built With

• antigravity
• chatgpt
• codex