skilltree

skilltree turns Twitch goals into interactive skill trees. Viewers vote on challenges, contribute to milestones, and watch progress unfold live through OBS overlays.

Comment

skilltree — Turn Every Stream Into Progress

Inspiration

Twitch has always been about interaction between streamers and their communities. However, most audience participation is temporary. Viewers send messages, vote in polls, or redeem channel points, but those interactions rarely contribute to something that lasts beyond the livestream.

We wanted to change that.

The idea behind skilltree was simple: What if a streamer's goals worked like a progression system in a video game, and their audience could help unlock it?

Whether someone is learning guitar, programming an application, completing a difficult game, or developing a new skill, their progress could become a shared experience.

Instead of watching someone accomplish something, viewers could become part of the journey.

What It Does

skilltree is a Twitch-integrated progression platform that transforms a streamer's goals into interactive, persistent skill trees.

Streamers can create customizable skill trees consisting of interconnected objectives, milestones, and challenges. Objectives can depend on one another, creating meaningful progression paths.

The platform includes:

  • Interactive Skill Trees: Create, edit, drag, and connect objectives using a visual node-based editor.
  • Progression and Unlocks: Complete objectives to automatically unlock dependent milestones.
  • Community Voting: Let viewers vote on which challenges or objectives the streamer should pursue next.
  • Community Contributions: Viewers can contribute toward shared milestones, with safeguards against duplicate participation.
  • OBS Integration: Display objectives, voting results, community progress, and achievement notifications directly on livestreams.
  • Persistent Progress: Skill trees and milestones remain saved between streams, allowing communities to follow long-term development.
  • Twitch Integration: OAuth authentication and EventSub integration support Twitch-connected interaction.

The streamer retains control over progression. Community contributions can advance an objective toward its target, but final completion requires streamer confirmation.

How We Built It

We developed skilltree using OpenAI Codex as our AI-assisted software engineering tool, working iteratively from an initial product concept toward a functional application.

Rather than building a static prototype, we focused on creating a working full-stack platform with persistent data, real-time updates, and a modular architecture.

Technology Stack

Frontend

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • React Flow (XYFlow)

Backend

  • Python
  • FastAPI
  • SQLAlchemy
  • Alembic
  • SQLite

Integrations

  • Twitch OAuth
  • Twitch EventSub WebSockets and webhook support
  • WebSockets for real-time updates
  • OBS Browser Sources

Architecture

The frontend provides a visual editor where streamers can create and manage skill trees.

The FastAPI backend manages objectives, dependencies, contributions, votes, authentication, and persistent application state.

A directed acyclic graph structure represents skill-tree dependencies. The backend validates connections, prevents circular dependencies, and controls which objectives become available as milestones are completed.

Community voting and contribution events update persistent records, while WebSocket connections synchronize changes with the livestream overlay.

We also developed a local demonstration environment to exercise the audience interaction workflow without requiring a live Twitch broadcast during every test.

Challenges We Faced

1. Building a Reliable Dependency System

A skill tree is more complex than a conventional checklist.

We needed to ensure objectives couldn't form circular dependencies, locked nodes couldn't be completed prematurely, and dependent objectives unlocked only when their requirements were satisfied.

We addressed this through server-side graph validation and automatic progression logic.

2. Synchronizing Multiple Interfaces

The streamer dashboard and OBS overlay need to reflect the same state.

We implemented real-time WebSocket updates so changes to objectives, votes, and contributions could appear without refreshing the overlay.

We also encountered a React Flow rendering issue where live updates caused node measurements to be discarded, making nodes disappear. We traced the issue and corrected the state-update behavior.

3. Integrating Twitch Authentication and Events

Twitch integration required careful handling of OAuth callbacks, access tokens, user identity, EventSub subscriptions, and reconnect behavior.

We also encountered a local development conflict because another application occupied our original backend port.

We resolved this by moving skilltree's backend to port 8001 and updating the related configuration.

Although our OAuth request generation and EventSub processing passed local tests, real Twitch authentication and live chat delivery remain unverified. We have kept simulated testing explicitly labeled rather than presenting it as a successful live integration.

4. Preventing Duplicate Community Participation

Viewer interaction creates opportunities for repeated votes, duplicate event delivery, and unintended progression.

We implemented persistent participation records, stable viewer identifiers, message deduplication, and contribution limits.

Streamers must also confirm milestone completion, ensuring that community participation doesn't automatically override their control.

5. Developing Efficiently With Codex

One of our biggest lessons was learning how to structure AI-assisted development.

Initially, we considered large development instructions containing many features simultaneously. However, we found that splitting work into smaller, verifiable milestones provided greater control.

We adopted a workflow of implementation, targeted testing, reviewing results, and advancing to the next feature.

This helped us diagnose problems without repeatedly rebuilding functioning components.

What We Learned

Building skilltree reinforced several important software engineering lessons.

Real-time applications require more than a good interface. Persistent state, concurrency, authorization, and reliable event handling are just as important as visual design.

AI-assisted development still requires engineering judgment. Codex helped implement and troubleshoot the application, but architecture decisions, feature prioritization, testing expectations, and acceptance criteria remained essential.

Small development iterations are easier to verify. Targeted testing and clearly defined milestones made it easier to identify regressions and preserve working functionality.

Gamification is most useful when it supports an existing goal. Rather than introducing arbitrary XP systems, skilltree uses progression mechanics to make actual creator achievements more engaging.

Accomplishments

We completed a functional local application featuring an interactive skill-tree editor, database persistence, graph validation, community voting, community contributions, and real-time OBS overlays.

Our local end-to-end browser demonstration successfully exercised the following workflow:

  1. Create or load a skill tree.
  2. Start a community vote.
  3. Record viewer choices.
  4. Approve the winning objective.
  5. Contribute toward a community milestone.
  6. Confirm objective completion.
  7. Unlock dependent objectives.
  8. Observe real-time overlay updates.
  9. Reload the application and preserve progression.

We also implemented authentication safeguards, encrypted token storage, ownership checks, and private, revocable overlay access links.

Automated backend tests, frontend checks, browser testing, production builds, and database migration validation were used throughout development.

These accomplishments represent a verified local workflow; actual Twitch chat participation has not yet been confirmed in a live environment.

What's Next?

Our immediate priority is completing real Twitch OAuth and EventSub verification using an actual Twitch channel.

Beyond that, we want to expand skilltree with:

  • Stream history and achievement timelines.
  • Customizable OBS overlay layouts.
  • Skill-tree templates for different creator categories.
  • Improved onboarding.
  • Public-facing progression profiles.
  • Production hosting and PostgreSQL support.

Our longer-term vision is for skilltree to become a progression platform that creators can use across months or years of streaming.

Closing Thoughts

A livestream ends. Progress shouldn't.

skilltree is built around the idea that communities should be able to accomplish something together and return to see how far they've come.

Instead of limiting engagement to individual broadcasts, we want to make every stream contribute to a larger journey.

Built With

Share this project:

Updates

Submission history