Bracket FAB Audit Log Rails

Adding a FAB Feedback Button, Edit Permissions, and Audit Log to a Tournament Bracket — Rails 8 Notes

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. ...

2026-03-17 · 6 min read · Seunghan
Stimulus DnD Collapse Dashboard

Dashboard Card DnD Reordering + Collapse in Rails — SortableJS + Stimulus + CSS Trick

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. ...

2026-03-17 · 5 min read · Seunghan

Player Highlight on SVG Bracket with Stimulus.js — Rails 8 + ViewComponent

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. ...

2026-03-17 · 4 min read · Seunghan
ViewComponent Design System Lookbook Migration

Migrating a ViewComponent Design System to Lookbook — Rails 8 + Tailwind CSS 4 War Stories

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. ...

2026-03-10 · 4 min read · Seunghan
Rails Devise Multistep Signup Resend Email

Rails 8 + Devise Multi-Step Signup & Resend Email Debugging

This documents the problems encountered while integrating role-based multi-step signup and the Resend email service on a Rails 8 + Inertia.js + Svelte 5 stack. 1. Role-Based Conditional Multi-Step Signup Form Requirements In a service with two user roles, the signup flow needed to differ: Role A: Basic info -> Work selection -> Organization info (3 steps) Role B: Basic info -> Work selection (2 steps, organization info unnecessary) Implementing Conditional Steps with Svelte 5 Runes Used $derived to dynamically handle total step count and button behavior based on role. ...

2025-12-20 · 4 min read · Seunghan
Rails8 Deploy Lessons

5 Issues from First Rails 8 Deployment: Security, Migration, Compatibility

Rails 8 프로젝트를 처음 클라우드 서비스에 배포하면서 하루 동안 연속으로 5가지 문제를 만났다. 각각 독립적인 문제처럼 보였지만, 하나를 고치면 다음 문제가 드러나는 패턴이었다. 기록으로 남긴다. 1. 공개 저장소에 민감한 파일이 들어간 경우 Symptoms git log --all --full-history -- config/secrets.yml 같은 명령으로 확인해보면, 예전 커밋에 secret_key_base가 하드코딩된 파일, 앱 서명 키스토어 파일 등이 포함되어 있다. Solution: git filter-repo로 히스토리에서 완전 삭제 pip install git-filter-repo # 특정 파일들을 히스토리 전체에서 제거 git filter-repo --path config/secrets.yml --invert-paths git filter-repo --path app-release.keystore --invert-paths # 강제 푸시 git push origin main --force 주의: --force 는 팀 작업 중이라면 사전 공지 필수. 모든 팀원이 re-clone해야 한다. ...

2025-11-11 · 4 min read · Seunghan
Privacy Policy Terms Disclaimer Contact