Building a REAL Production App from scratch - Klipshow - React/Rails Episode 2

We also have a discord! https://discord.gg/MvCUVVbYbP

🚀 Building ClipShow 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!

🎯 What We Built:
✅ Complete dashboard layout with responsive design
✅ Hot Module Reloading with Docker (development productivity boost!)
✅ Full clips database architecture with joins tables
✅ Streamer model using Single Table Inheritance (STI)
✅ React toast notifications integrated with Rails backend
✅ Turbo integration for smooth user experience
✅ Complete clip creation workflow from web interface
✅ System testing with Cuprite for end-to-end validation
✅ Strong migrations gem for safe database changes

🛠️ 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

This isn't just a tutorial - we're making real architectural decisions for a production app that handles real money transactions!
🔴 LIVE DEVELOPMENT: All coding happens live on https://twitch.tv/awdjob - join for real-time Q&A and influence technical decisions!
Next Episode: Payment integration, live stream overlays, and clip approval workflows.

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

#rails #ruby #reactjs #webdevelopment #docker #tailwindcss #vitejs #softwareengineer #postgresql #turbo

Видео Building a REAL Production App from scratch - Klipshow - React/Rails Episode 2 канала Higher Theory Dev