← All projects
Tsugi / Product + recommendation

Discover, organize, and choose your next anime.

Catalog, library, and progress with a contextual recommendation extension.

Explore the full demo ↗
Next.jsTypeScriptCacheCatálogo
● ● ● Tsugi · synthetic demonstration
Tsugi demo screenshot
01 / THE PROBLEM

What needed to work

Data from different catalogs needs to support a coherent discovery and tracking experience.

02 / CONTRIBUTION

My contribution

A catalog and library product with integrations and caching. For the portfolio, I preserved the screens, replaced services with fixtures, and added a clearly labeled demo assistant.

03 / ARCHITECTURE

How the pieces connect

  1. 01Normalized synthetic catalog
  2. 02Original discovery interface
  3. 03Library + progress + tierlist
  4. 04Contextual demo assistant
  5. 05Validated IDs → manual choice
04 / DECISIONS

Engineering choices

  • Catalog, summaries, and images prepared for the demo.
  • Recommendations may only reference IDs available in context.
  • Users choose what to add to their library.
05 / DEMO SCRIPT

Two ways to explore

1Catalog → details → library → progress → tierlist.

2Preferences → recommendations → reasons → review → manual addition.

06 / SOURCE AND ADAPTATION

What the demo demonstrates

Original: Catalog, library, progress, tierlist, community, and cached integrations.

Demo: Visitor fixtures, reset, translation, and a validated recommendation assistant.

GitHub · source repositories may be private ↗
07 / LIMITATIONS

Clear boundaries

The original project integrates catalogs and translation; it has no generative recommender. The AI assistant is a portfolio extension. It does not access Jikan, AniList, MAL, translation services, or the production database.

State belongs to your visitor session. Restart from the demo bar.

See it working.

Open demo ↗