TrueFan

TrueFan turns any franchise into an interactive constellation. See where to start, watch in order, unlock entries as you go, and ask AI about confusing lore. Never watch out of order again.

Comment

Inspiration

Have you ever tried to get into a show everyone is talking about, only to find out it has four seasons, two movies, a prequel, three OVAs, and a spin-off that takes place between season 2 and season 3?

So you search "what order should I watch it in?" and land on a forum thread with five conflicting answers, a wiki page the length of a novel, and a Reddit comment that spoils the ending in the first line.

Now scale that up to franchises like Gundam, Fate, Star Wars, Doctor Who, or the Marvel Cinematic Universe. Some have dozens of entries across decades, multiple timelines, and characters who show up in the middle of one series and only make sense if you watched another. New fans give up before they start, and longtime fans still argue about the "right" order.

We asked a simple question: what if figuring out a franchise felt like exploring its universe, instead of reading its homework?

What it does

TrueFan is an interactive visual guide that turns an anime franchise into a constellation of connected nodes. Every season, movie, OVA, and spin-off becomes a star you can explore, instead of a line in a boring list.

What a fan wants What TrueFan does
"I want to get into this show" Search any anime or franchise and explore its connected universe
"Where do I even start?" A clear, highlighted starting point for new fans
"What do I watch next?" A guided viewing path, one connected node at a time
"Don't spoil anything" Entries unlock as you mark them complete, so you only see what you've reached
"Who is this character again?" An episode-aware character relationship view showing how characters connect
"Wait, how does this connect to that?" AI-assisted character graphs that reveal relationships based on your viewing progress

The result: you can go from "I've never seen this" to "I know exactly what to watch tonight" in under a minute, without opening a wiki.

Beyond the watch order

  • Progress that feels like a game. Completing an entry lights up its node and reveals what's newly unlocked, so working through a franchise feels like charting a map.
  • Spoiler-safe by design. Locked nodes stay hidden or blurred, and character information is filtered based on your episode progress to avoid revealing future events.
  • Characters, not just episodes. Fans can explore characters and their relationships within an anime, revealing new information as they progress.
  • AI-assisted connections, not AI spoilers. Our system uses AI to extract character relationships from episode descriptions, then filters those connections according to what the user has watched.

TrueFan turns a confusing pile of titles into one connected story: for new fans who don't know where to start, and longtime fans who want to see it all fit together.

How we built it

Franchise data. We pull titles, release dates, and relationships for each franchise from the AniList GraphQL API. Each entry becomes a node, and each "sequel," "prequel," "side story," or "spin-off" relationship becomes an edge. For example, searching Fate reveals a connected universe containing Fate/Zero, Fate/stay night, Unlimited Blade Works, Heaven's Feel, and related entries.

Building the watch order. We treat a franchise as a directed graph. We use relationship metadata and release dates to organize the main storyline and related works, while acknowledging that there isn't always one definitive viewing order. Unlocking follows progression rules: an entry becomes available once its prerequisites are completed, with manual unlocking available when needed.

The galaxy view. The universe is drawn using React Flow, ELK.js, and Motion for React. Main-story entries form the core, and spin-offs and side stories branch away from the entries they connect to, so the shape of the galaxy shows the shape of the franchise. Users can navigate between worlds, view the overall constellation, and enter an anime to explore its characters.

Character relationships. Characters are linked to each other through relationships such as allies, rivals, and family. We retrieve episode descriptions through Kitsu and TVmaze where available, use Hugging Face inference to extract character information, and cache the results in Neon PostgreSQL. Character profile pictures come from AniList. Fans can switch from the watch view to a character view that reveals information based on their episode progress.

The AI guide. Our current AI functionality focuses on automatically extracting character information and relationships from episode descriptions. Each extracted fact is associated with the episode where it was revealed, allowing the backend to filter out information beyond the user's progress. We're also interested in expanding this into a conversational AI guide that can answer lore and relationship questions without revealing future events.

Stack: React, TypeScript, Vite, Tailwind CSS, React Flow, ELK.js, Motion for React, Python, FastAPI, Hugging Face Inference, AniList GraphQL, Kitsu, TVmaze, Neon PostgreSQL, and Neon Auth. Frontend deployed on Vercel, backend deployed on Railway.

Challenges we ran into

  • There is no single "correct" order. Release order, chronological order, and fan-recommended order often disagree. We had to decide which to recommend by default and how to show connected stories without implying that one order is universally correct.
  • Franchise data is messy. Titles change between regions, OVAs and specials are listed inconsistently, and some relationships ("takes place between episodes 12 and 13") aren't captured in any database.
  • Making a big universe readable. A franchise with 50+ entries turns into a hairball fast. We iterated on layout, clustering, and zoom levels until the galaxy stayed clear.
  • Keeping AI spoiler-free. An AI that knows everything will happily spoil everything. We had to filter extracted character information based on each user's progress and make sure advancing or rewinding episodes updated the visible graph correctly.
  • Deployment and API reliability. We ran into issues with deployment configuration, custom-domain updates, and networks blocking our Railway API hostname. We addressed this by routing production API requests through Vercel and improving our deployment setup.

Accomplishments that we're proud of

  • Turning a franchise's tangled history into a constellation you can understand at a glance.
  • An unlock system that makes watching through a franchise feel like progress, not homework.
  • AI-assisted character relationship graphs that reveal information as viewers progress, instead of exposing the entire story at once.
  • Mapping complex franchises like Fate, with 28 connected anime entries appearing in our demo constellation.
  • Building researched early-story graphs covering 7 series, 37 story units, 86 character nodes, and 132 directed relationships during the hackathon.

What we learned

  • Data visualization is about decisions, not just drawing. Choosing what to hide matters as much as what to show.
  • Fans care deeply about spoilers, so trust is a feature.
  • AI is most helpful when it's grounded in structured data instead of answering from memory.

What's next for TrueFan

  • Add more franchises, and let fans suggest and vote on viewing orders.
  • Switch between release, chronological, and "essentials only" paths.
  • Sync progress with watch-tracking services like AniList, Trakt, and Letterboxd.
  • Show where to stream each entry.
  • Build a conversational AI guide that explains lore and relationships using only information the user has unlocked.
  • Expand beyond TV and film to games, manga, and books that share the same universe.

Tagline: Always feel like a TrueFan.

Built With

Share this project:

Updates

Submission history