Higher Theory Dev

Klipshow

Interactive viewer-driven clip reactions for streamers

Klipshow is a tool for Twitch streamers that lets viewers pay to trigger approved short clips from YouTube, TikTok, and other platforms.

Streamers have full control over what clips are allowed, when they play, and how much they cost to trigger. Viewers interact in real time using a queue system with approved clips.

This project shows how we built a creator-friendly revenue tool using Rails, JavaScript, and background jobs — with real payment processing and stream-safe logic.

Watch Us Live Discord Join the Community

Episodes

Building KlipShow Episode 1: Rails 8 + Docker + Twitch OAuth Setup

In this first episode, we build the complete authentication foundation for KlipShow — a Twitch platform where viewers pay to trigger social media clips on stream. Includes full Twitch OAuth, JWT session management, Vite + React + Tailwind setup, and backend tests.

Tech Stack

  • Ruby on Rails 8.0.2
  • Docker & PostgreSQL
  • React with Vite Ruby
  • Tailwind CSS
  • OmniAuth
  • RSpec testing

Key Highlights

  • Setting up modern Rails development environment
  • Tricky Vite Ruby + React integration (solved!)
  • Real OAuth flow with Twitch API
  • Professional testing practices from day one

Timestamps

00:00 – Introduction
02:15 – Application/Mockup Overview
05:34 – Episode 1 Outline
08:36 – RVM/Ruby/Rails Install
13:02 – Generate Rails App + Docker Setup
19:53 – Twitch OAuth Overview
25:32 – Rails Credentials Setup
27:13 – Rails Routes Overview
28:36 – OAuth Controller Setup
42:44 – User Record Setup
47:22 – Encrypted Token Migration
52:10 – User Creation from OAuth + RSpec
59:45 – JWT Overview
1:02:40 – First Commit
1:04:30 – Frontend System Design
1:06:30 – Vite Integration
1:11:21 – TailwindCSS Installation
1:11:52 – React Setup
1:18:59 – Klipshow Lore
1:19:18 – Simplify Signin Component
1:19:59 – Client-Side OAuth Setup
1:26:11 – Outro

Building KlipShow Episode 2: Dashboard Architecture + Clips System + Database Design

In this power-packed episode, we build the core dashboard infrastructure and complete clips management system for ClipShow — where Twitch viewers pay real money to display social media clips on live streams!

Tech Stack

  • Ruby on Rails 8.0.2
  • Docker with HMR
  • React + Vite Ruby
  • Tailwind CSS
  • Turbo for SPA-like experience
  • PostgreSQL with advanced associations
  • Cuprite for system testing
  • React-Toastify for notifications

Key Highlights

  • Multiple strategic pivots: SCSS → Tailwind, localStorage → cookies
  • Advanced Rails associations between clips and streamers
  • Real-time feedback system with React toast integration
  • Professional database design for monetized clip system
  • Docker development environment optimization
  • Comprehensive testing strategy for payment-integrated features

Timestamps

00:00 - Episode introduction
01:00 - Getting dashboard layout working
05:41 - Pivot - moving away from scss
09:15 - getting Hot Module Reloading working with Docker
13:28 - Adding React sidebar component
15:22 - Pivot - moving away from localStorage and to cookies
22:16 - Replacing sidebar React component
25:15 - Building out Clips view and models
28:00 - Small pivot to system design detail on approach for dashboard controllers
29:58 - Adding and wiring up Turbo
33:13 - Rails partials - adding heading partial
35:40 - Adding feather icons and other work for clips views
36:52 - Database design for clips and joins table
39:53 - Creating migration for new clips tables
41:45 - Adding strong_migrations gem
42:30 - Setting up "Streamer" using STI
44:00 - Setting up associations between clips and streamers
47:16 - Setting up routes and views for Clips
51:03 - Showing new clip creation process from web
55:04 - Clip form demo and adding react-toastify
57:36 - Adding cuprite and system tests
01:04:53 - Outro

Building KlipShow Episode 3: TikTok API Integration + Public Clip Library + Hybrid Architecture

In this marathon episode, we achieve a major milestone - building the complete public clip library system for ClipShow where Twitch viewers pay real money to display social media clips on live streams!

Tech Stack

  • Ruby on Rails 8.0.2
  • TikTok iframe API
  • React with advanced state management
  • PostgreSQL with optimized associations
  • CSRF token security
  • Turbo with React hybrid approach
  • RSpec for comprehensive testing
  • Custom Ajax wrapper service

Key Highlights

  • TikTok iframe API replaces complex OAuth - smart architectural decision!
  • Public library vs private collection dual-system architecture
  • Real-time clip validation through iframe loading events
  • Professional security with CSRF tokens on all requests
  • Seamless user experience - add clips without page refreshes
  • Production-ready error handling and validation patterns
  • Advanced Rails nested attributes for complex form submissions

Timestamps

00:00 - Episode introduction and progress overview
03:16 - TikTok iframe API implementation walkthrough
08:45 - Hybrid Rails-React form architecture decisions
15:22 - Building the clip creation workflow with validation
22:30 - CSRF token security implementation
28:15 - Toast notification system across Rails and React
35:40 - Database migration changes and relationship optimization
42:20 - Streamer clip model validations and callbacks
48:10 - Public clip library vs private collection system
55:30 - React component architecture for clip cards
01:02:15 - AJAX requests and state management patterns
01:08:40 - Turbo integration challenges and solutions
01:15:25 - Adding clips from library to personal collection
01:22:10 - Route configuration for dual clip systems
01:28:50 - Component testing with RSpec and system specs
01:35:20 - Database cleaner removal and test optimization
01:42:30 - Model spec coverage for clips and streamer clips
01:48:15 - Episode wrap-up and next steps

Building KlipShow Episode 4: Real-Time WebSocket Alerts + OBS Integration + AnyCable Architecture

This episode gets us to a working MVP — streamers can now receive real-time clip alerts in OBS when viewers interact with their stream! Features include AnyCable replacing ActionCable for massive WebSocket scaling, secure token-based authentication without traditional login flows, live OBS integration demo, HTTP broadcast method for Redis deprecation-proofing, professional error handling, real-time testing for streamers, and production-ready encryption for sensitive alert tokens.

Tech Stack

  • Ruby on Rails 8.0.2
  • AnyCable for WebSocket scaling
  • ActionCable with HTTP broadcast
  • React with WebSocket integration
  • TikTok iframe API with post-message
  • PostgreSQL
  • Docker Compose multi-service setup
  • RSpec + Capybara + Cuprite
  • Tailwind CSS

Key Highlights

  • AnyCable replaces ActionCable for massive WebSocket scaling potential!
  • Secure token-based authentication without traditional login flows
  • Live OBS integration demo - clips actually playing on stream!
  • HTTP broadcast method future-proofs against Redis deprecation
  • Smart time-boxing decisions - knowing when to move forward
  • Professional error handling across WebSocket connections
  • Real-time testing functionality for streamers to preview alerts
  • Production-ready encryption for sensitive alert tokens
  • This episode gets us to a working MVP - streamers can now receive real-time clip alerts in OBS when viewers interact with their stream!

Timestamps

0:00 – Episode recap and Chrome debugging issues overview
1:15 – Lessons learned about time-boxing and resource management
2:30 – Overview of current testing specs and functionality
3:45 – Reviewing streamer clip upload and sharing functionality
4:30 – Explaining the clip library and shareable flag system
5:15 – Demo of dynamic clip adding without page reloads
6:00 – Walkthrough of system specs and mock OAuth implementation
7:30 – OAuth controller deep dive and Twitch integration
8:45 – Mocking HTTP requests for testing
9:30 – Factory usage and test database management
11:00 – Current Docker setup without remote Chrome debugging
11:45 – Chromium installation in Docker container
12:15 – Decision to move forward with current working solution
13:00 – Planning the OBS browser source integration
14:15 – Adding alert_token to streamers table
15:30 – Database migration and indexing considerations
16:45 – Strong migrations gem and concurrent indexing
18:00 – Encryption setup for alert tokens
19:30 – Creating the widgets controller and routes
20:45 – Setting up authenticated vs unauthenticated endpoints
22:00 – Building the widget URL display component
23:15 – Implementing copy-to-clipboard functionality
24:30 – Adding reset token functionality
25:45 – Using Cursor AI for UI component generation
27:00 – Refining the widget preview interface
28:15 – Adding OBS integration instructions
29:30 – Implementing the token reveal/hide functionality
31:00 – Architecture overview: Heroku apps and scaling strategy
33:15 – AnyCable connection and authentication setup
35:00 – Troubleshooting Redis vs HTTP broadcast methods
36:45 – WebSocket connection establishment and testing
38:30 – Building the test clip functionality
40:00 – TikTok iframe integration and autoplay handling
41:15 – Post-message event handling for TikTok player
42:30 – Opacity transitions and display timing
44:00 – Setting up browser source in OBS
45:15 – Live demonstration of test clip triggering
46:00 – Audio and video synchronization issues
46:45 – Successful proof of concept completion
47:30 – Removing Redis dependency and simplifying setup
49:00 – AnyCable YAML configuration walkthrough
50:15 – Docker compose service configuration
51:30 – HTTP broadcast URL setup and port configuration
52:45 – Final OBS demonstration with working alerts
53:30 – Reflecting on time management and technical decisions
54:15 – Planning future development priorities
54:45 – Moving toward MVP completion