Rails

If you’re building a mobile app with Hotwire Native and Rails 8, you’ll eventually hit issues that don’t show up in development but break things in production — especially on real iOS devices running inside WKWebView. This post documents 7 real-world pitfalls I encountered while shipping a tournament management app (Turbo + Stimulus + ERB + Tailwind CSS 4) as a Hotwire Native iOS app. Each issue includes the symptom, root cause analysis, fix, and lessons learned. ...

Three real-world problems encountered while building a real-time dashboard with Rails 8 + Hotwire, and how each was solved. 1. Turbo Stream + Stimulus DnD: Events Vanish After DOM Replacement Problem Built a drag-and-drop interface where player chips can be dragged onto court cards. On drop, a POST request fires, and the server responds with Turbo Stream to replace the court card and player list. First drag works. Second drag doesn’t respond at all. ...

When you’re designing three features simultaneously, they start bleeding into each other. This time I added the following to a tournament bracket management app: FAB Feedback Button — floating button bottom-right → Telegram notification Role-Based Bracket Edit Permissions — tournament vs. friendly mode determines whether regular participants can edit the bracket Audit Log — records who changed what and when, with before/after data Each is simple on its own, but doing them together forced a lot of decisions: where to check permissions, where to write logs, and how much to expose in the UI. ...

When you think about implementing a theme system, the first instinct is to add conditional classes to every component. But what if you could swap the entire app’s color palette by changing a single CSS block — without touching any HTML? In Tailwind v4, that’s exactly what you can do. How Tailwind v4 Compiles Utility Classes Tailwind v4 compiles utility classes as CSS variable references: /* CSS generated by Tailwind v4 */ .bg-emerald-700 { background-color: var(--color-emerald-700); } .text-emerald-600 { color: var(--color-emerald-600); } .border-emerald-500 { border-color: var(--color-emerald-500); } bg-emerald-700 doesn’t hard-code #047857 — it references var(--color-emerald-700). Change that variable and every element using bg-emerald-700 updates instantly. ...

I was adding two features to the dashboard of a sports tournament management app: DnD card reordering — drag cards to rearrange sections (My Matches / Bracket / Match List) Card collapse/expand — fold away sections you don’t need Each sounds simple, but add Turbo Frame lazy loading and a requirement that layout state survives page reloads, and there’s more to think about than it first appears. 1. Choosing a DnD Library My first attempt used the native HTML5 Drag & Drop API directly — dragstart, dragover, drop. It works fine on desktop, but the problem is touch devices. The HTML5 drag API has incomplete support on iOS Safari; touch-dragging simply doesn’t work there. ...

I added click-to-highlight interactivity to an SVG-based tournament bracket built with Rails 8 and ViewComponent. Here’s what I ran into. The goal: click a player’s row in the bracket → all matches featuring that player get a subtle color highlight. Background: SVG-rendered bracket The bracket isn’t HTML divs — it’s a pure SVG rendered by a BracketTreeComponent (ViewComponent). The component calculates coordinates for each match slot and emits <rect>, <text>, <circle>, and connector <path> elements. ...

Two problems solved while building a Rails 8 + Hotwire Native iOS app. Real-time notification badge — instantly update the app icon badge and bell button the moment a notification is created on the server Side menu navigation failure — correctly navigate to URLs that require dynamic parameters like a resource ID 1. Background Notification Badge Without setting the badge field in APNs push notifications, no number appears on the iOS app icon. And even when notifications are read, the badge doesn’t clear. ...

Running an iOS app built with Rails 8 + Hotwire Native, I hit a series of issues in a single day. What started as a small UI distortion spiraled into a full permission system redesign. Here’s the record. 1. Card Images Distorted in Mobile WebView Symptom Tournament discovery cards looked fine in a desktop browser, but badges and icons were squished inside the iOS app’s WKWebView (375px viewport). Root Cause The deployed view used a desktop-first layout (max-w-[1400px], responsive grid). The WKWebView rendered all of it in 375px, causing badge overlap. ...

While documenting UX flows with Rails + Lookbook, I hit a moment of “something feels off.” Each Step only showed wireframe fragments, so looking at the Lookbook list gave zero sense of the overall flow. I fixed two things: Add a Mermaid flowchart Overview step to each flow Redesign all Step template structures The Problem: Lookbook Step Previews Feel Like “Context-Free Fragments” # @label Admin UX Flow # @logical_path ux_flows class UxFlows::AdminFlowPreview < ViewComponent::Preview # @label 1. Login -> Admin Dashboard def step_1_login_dashboard render_with_template end # ... end Each step_* method renders an ERB template via render_with_template. The ERB contains a wireframe with a simple step navigation bar at the top. ...

I migrated 47 ViewComponents in a Rails 8 project to a warm orange theme and built a full Lookbook preview system. Here are the real issues I ran into. Background The project already had: 47 ViewComponents across 15 categories (input, layout, navigation, card, typography, etc.) CSS Custom Properties based design tokens (tokens.css) Tailwind CSS 4 + Propshaft asset pipeline The goal was to adopt a BMC (Buy Me a Coffee) inspired warm orange theme with a dark sidebar and stone palette, and build comprehensive Lookbook previews. ...