Become the #1 EN/VI knowledge base
Deliver data-verified character rankings, build guides, and weapon analytics in both English and Vietnamese.
Product Case Study
Duet Night Abyss — GachaBuild3
A bilingual game database and guide built to close the gap between scattered player discussions, stale patch data, and the need for fast, answer-first character decisions.
120+
Organic keywords
~38%
Tier list CTR
~99.8%
Uptime
EN / VI
Bilingual delivery
Strategic Vision
The product closed a gap that every competing wiki ignored.
When Duet Night Abyss launched in 2024/2025, the global and Vietnamese player communities suffered from fragmented tier lists, absent bilingual support, and stale patch data. GachaBuild3 was built to close this gap within 90 days — establishing first-mover authority in both language markets.
“The definitive English + Vietnamese DNA encyclopedia — built by the community, for the community.”
Authoritative answers in under 3 seconds
The only bilingual, real-time-updated, mode-ranked tier list and character database. Every page optimized for the exact question a player is asking.
Pain Points
Players needed confidence, speed, and trustworthy localized answers.
The biggest product opportunity was not another wiki. It was reducing uncertainty at the exact moments players had to make roster and resource decisions.
Decision paralysis
New players pulled a 5-star character and had no fast way to know if it was actually meta — scattered Reddit threads and Discord debates offered no consensus.
Language barrier
60%+ of DNA's SEA player base is Vietnamese; English wikis left them behind. Machine-translated community posts created frequent inaccuracies.
Stale patch data
Community spreadsheets and hobby wikis lagged behind balance changes by days or weeks. Players made roster decisions on outdated truth.
Fragmented builds
Weapon pairings, team comps, and skill priorities were scattered across Discord and YouTube instead of searchable, structured data.
Product Pillars
Three operating pillars turned a fan problem into a production system.
Product
A mode-ranked, answer-first experience. Homepage opened on highest-intent answer: S/A/B/C tier bands scannable in under two seconds.
Content Ops
Sanity schemas with EN + VI inline fields. Webhook-driven ISR revalidation kept rankings fresh in under five seconds.
Engineering
Next.js App Router, static search, Docker Compose, Nginx, GA4, and SEO hardening created a production system that ran itself with 99.8% uptime.
Pillars Decision
“The most consequential decision was pairing schema-level bilingual content with ISR revalidation. That made freshness and accessibility native capabilities of the product — not cleanup work after launch.”
— Duet Night Abyss Product Pillars
System Architecture
A lean stack optimized for freshness, SEO, and low-maintenance operations.
Next.js 15 · App Router
SSR, SSG, and ISR with React Server Components — client JS only where interactivity mattered.
Sanity CMS v4
Structured content with real-time editing, GROQ queries, and automatic webhook revalidation pipelines.
Docker + Nginx
3-service production stack with SSL termination, path-based routing, and unless-stopped restart policy.
React 19
Concurrent features, improved SSR hydration, and Context-based EN/VI language state management.
TailwindCSS 3.4
Utility-first styling with custom professional-card patterns and a Geist type system for zero layout shift.
GA4 + SEO
Bilingual hreflang, JSON-LD structured data, per-page OpenGraph, and 6 custom event trackers.
Screenshot Gallery
A complete view of the product surfaces and analytics that carried the user journey.
Homepage · Mode selector · Tier bands
Mode-based tier list
The answer-first homepage. Players land on mode-ranked S/A/B/C tiers — no hero banner, no carousel.
Database · Element × Role × Weapon
Faceted filter system
Multi-dimensional filter chips update the character grid instantly — no page reload.
Build guide · Profile · Recommendations
Character detail page
Structured character pages gave players one place for profiles, build decisions, and upgrade context.
Navigation · Language switcher · Mobile drawer
Persistent sidebar navigation
Global sidebar anchors game switching, IA, and the EN/VI toggle.
Analytics · User growth · Engagement
GA4 audience overview
High-level GA4 reporting tracked audience growth and engagement after launch.
Analytics · Organic search · Direct traffic
Acquisition channels
Acquisition reports showed how search and direct discovery drove the early traffic mix.
Results & KPIs
Early traction proved the value of bilingual, answer-first product design.
~99.8%
Launch Uptime
3-service Docker stack with unless-stopped restart policy
~1.8s
Largest Contentful Paint
Fast enough for mobile-first organic traffic
120+
Organic Keywords
Strong early bilingual SEO footprint in 30 days
~38%
Tier List CTR
High clickthrough from scannable rankings into details
~15–20%
VI Adoption
Meaningful bilingual usage from VN audiences
< 5s
ISR Latency
Fresh content shortly after CMS edits
Legacy
Decommissioning is part of product ownership.
This project closed with the same discipline it used to launch.
Content preserved
Export Sanity content, images, and final structured records via CSV and JSON before shutdown.
Analytics retained
Preserve GA4 data, uptime notes, and operational context for future audits or case-study verification.
Domain handled cleanly
Point the project toward a static archive if discoverability still matters after decommissioning.
Secrets revoked
Invalidate API tokens, webhook secrets, and deployment credentials after the final takedown.
Back to Portfolio
Explore the rest of the work.
Return to the homepage for the full portfolio, PM journey, and supporting work.
Back to Portfolio