Klipshow

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

Building KlipShow Episode 5: Live Klip Queue System + Real-Time WebSocket Management + Advanced Rails Architecture

In this marathon episode, we build the most complex feature yet - a complete real-time klip queue system that lets streamers manage their alerts live! This is the heart of what makes KlipShow revolutionary for Twitch streaming!

Tech Stack

Ruby on Rails 8.0.2 with advanced namespacing
AnyCable with isolated test environments
Custom React hooks for WebSocket state management
Polymorphic ActiveRecord associations
PostgreSQL with optimized queue positioning
Docker multi-service architecture
RSpec system tests with WebSocket integration
OBS remote debugging capabilities
ActionCable with HTTP RPC broadcasting

Key Highlights

Real-time klip queue that updates across all connected clients!
Polymorphic associations allowing both streamers and viewers to trigger klips
Custom React hooks for reusable WebSocket state management
{"Advanced Rails namespacing"=>"StreamerKlip::Queue model architecture"}
OBS remote debugging setup for production-level troubleshooting
Sophisticated queue management with position-based ordering
ActiveRecord callbacks driving real-time UI updates
{"Two-step authentication"=>"cookie-based dashboard vs token-based alerts"}
Batch queue operations preventing WebSocket spam
Complete MVC separation with reusable concerns

Timestamps

0:00 – Episode introduction and overview

1:25 – Live control dashboard setup and namespacing decisions

3:55 – Rails namespacing decisions and controller architecture

7:10 – Building reusable klip card components with conditional rendering

9:40 – Creating trigger live functionality with AJAX requests

12:55 – ActionCable broadcasting and WebSocket message handling

15:45 – StreamerKlip::Queue model development with validations

20:10 – Polymorphic associations for flexible user triggering

23:40 – Database queue positioning and automatic cleanup logic

27:55 – Custom React hooks for WebSocket state management

31:40 – Real-time queue updates across multiple alert consumers

36:10 – OBS browser source integration and authentication separation

39:45 – Remote debugging setup for OBS browser sources

43:40 – Pause, skip, and play functionality implementation

47:55 – UI state management with React and WebSocket synchronization

52:10 – Queue clearing with batch operations and confirmation dialogs

55:45 – Advanced system testing with isolated AnyCable environments

59:40 – Race condition handling in WebSocket subscription testing

62:55 – Production-ready architecture patterns and scaling considerations

76:56 – Episode wrap-up and next steps

Building KlipShow Episode 6: Production Deployment with Kamal + CI/CD Pipeline + Critical Bug Fixes

In this episode, we tackle mysterious WebSocket authentication issues, deploy to production with Kamal on DigitalOcean, and build a complete CI/CD pipeline with GitHub Actions. Plus, we fix critical performance bugs and add validation to prevent duplicate klips!