Tenryou

Tenryou is a Genshin Impact companion website that brings together game data from genshin-db, Enka.Network, and Ambr.top. Players can look up characters, weapons, artifacts, materials, achievements, and more, view their in-game profiles, and build teams with AI-powered recommendations from Google Gemini.

Built with Next.js and TypeScript, Tenryou pulls data from multiple external sources to keep game information up to date. genshin-db provides character, weapon, artifact, and material data, Enka.Network handles live player profiles and character builds, and Ambr.top provides additional game data. Tailwind CSS powers the UI with a custom theme, while Motion handles page and component transitions. The AI Team Builder uses Google Gemini through the Vercel AI SDK to generate team suggestions and build recommendations. Cypress covers the main user flows with end-to-end tests.

Every character has a dedicated page with data from genshin-db, including base stats, talent descriptions, constellations, namecards, outfits, and voiceovers. Pages are statically generated and revalidated daily to keep load times fast while keeping information up to date.

The goal is to give players one place to look up character details without having to jump between different websites. The roster also covers characters released through Natlan and Nod-Krai.

The Team Builder lets players drag characters from the full roster into up to eight slots across two teams. Players can mark which characters they own to get recommendations tailored to their roster, or put together their own teams and ask Gemini for a breakdown of team synergy and build recommendations through the Vercel AI SDK.

There are also element and weapon filters, a randomizer, and a clear button to make building teams easier. Selections are saved to localStorage, so teams are still there after refreshing the page.

Players can enter their Genshin Impact UID to pull their public profile from Enka.Network. The profile page displays Adventure Rank, World Level, achievements, Spiral Abyss progress, and showcased characters with their equipped artifacts, weapons, talent levels, constellations, and detailed stats.

There is also a namecard menu for viewing collected namecards and a stats explanation modal to help players understand what each stat means. Enka.Network requires Show Character Details to be enabled in-game, and the profile reflects changes to the player's showcase as they happen.

At its peak, it reached around 1,000 monthly users before the domain lapsed.

One of the biggest challenges is keeping everything up to date as the game changes. Enka.Network API changes can break profile data, and event information needs to match the current patch. Fetching data server-side through Next.js helps keep information fresh without relying on client-side polling. I also added Cypress end-to-end tests for critical user flows to catch regressions before they make it into production.