Building a REAL Production App from scratch - Klipshow - React/Rails Episode 3
We also have a discord! / discord
🚀 Building ClipShow 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!
🎯 What We Built:
✅ Full TikTok iframe API integration for clip validation and preview
✅ Complete public clip library with browsable clips
✅ Seamless "add to collection" workflow for streamers
✅ Hybrid Rails-React architecture with proper state management
✅ CSRF token security implementation across Ajax requests
✅ Advanced toast notification system bridging Rails and React
✅ Complex database relationships with has_many :through associations
✅ Comprehensive model validations and callback systems
✅ Smart Turbo integration with React component mounting
✅ Complete RSpec test coverage for all new functionality
🛠️ 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
This gets us to the core functionality needed before integrating with OBS browser sources - the really exciting stuff is coming next!
🔴 LIVE DEVELOPMENT: All coding happens live on / awdjob - join for real-time Q&A and influence technical decisions!
Next Episode: OBS browser source integration and live clip display functionality.
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
#rails #ruby #reactjs #webdevelopment #tiktok #postgresql #rspec #softwareengineer #turbo #csrf