You have likely heard of HoYoverse (formerly miHoYo), one of the largest game development companies in the world. They achieved massive success with the free-to-play, open-world game Genshin Impact in 2020. Released during the global COVID-19 lockdown, the game captivated players with its similarities to Nintendo's The Legend of Zelda: Breath of the Wild and its stylized anime graphics.

Following this success, miHoYo rebranded as HoYoverse and released Honkai: Star Rail in 2023, which was another massive hit thanks to its unique twist on the turn-based RPG genre.

Finally, in 2024, HoYoverse launched Zenless Zone Zero (ZZZ), a retro-urban-themed game targeting a more mature audience. The game was praised for its high-tier animations and gameplay. Notably, it features a relationship-building mechanic called "Trust Events." Whenever you obtain a new Agent, your Main Character (MC) can hang out with them to increase their trust level. However, this system has a few pain points:

• Unpredictable Triggers: Some events require you to pick a destination, while others are completely random encounters.
• Tracking is Difficult: If you are a completionist, figuring out if you have finished an Agent's events requires digging through wikis or guide threads.
• High Stakes: Most events feature a dialogue choice system where you must pick the correct response to earn points. You are limited to only 3 hangouts per day, meaning a wrong answer wastes your time.
• Rewards are Locked Behind Max Trust: Earning enough points unlocks exclusive missions, and maxing out an Agent's trust yields a special item that makes them more powerful in combat.

The Project Solution
I created this project to solve a specific problem: finding the correct dialogue answers is currently a hassle. Players usually have to use the official ZZZ wiki, which has poor UX design and is plagued by banner ads if you don't use an adblocker. Alternative resources, like the "Agent Guide" threads by 나히아, are incredibly helpful but require excessive scrolling to find a specific Agent—which is a major inconvenience considering the game releases two to three new Agents every version.

I built this tool to make the process more efficient, giving users a seamless experience when searching for the right answers.

Full Tech-Stack

• React JS
• Next JS
• TypeScript
• Tailwind CSS
• Zustand (State Manegement)

Design Process
When I first conceptualized the project, I sketched a simple User Interface on a piece of paper and listed the core features I wanted to include. From there, I used Figma to create a proper, high-fidelity design.

Concept Design Samples:

The final project includes multiple theme variations to choose from, with more planned for the future. You can view the deployed project here.