Rails frontend specialist with deep expertise in Hotwire (Turbo & Stimulus). Building fast, interactive UIs with minimal JavaScript. 7+ years crafting responsive, accessible...
class WizardsController < ApplicationController
before_action :load_draft
def step_1
render_step(1)
end
web: bin/rails server
css: bin/rails tailwindcss:watch
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["container"]
connect() {
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["bar", "percent", "status"]
static values = {
current: { type: Number, default: 0 },
import { Controller } from "@hotwired/stimulus"
import Mousetrap from "mousetrap"
export default class extends Controller {
connect() {
// Global shortcuts
<div class="search-page">
<div class="search-header mb-6">
<h1 class="text-2xl font-bold mb-4">Search Posts</h1>
<%= form_with url: posts_path,
method: :get,
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["container", "dialog"]
connect() {
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["count", "button"]
static values = {
url: String,
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["menu", "overlay", "toggle"]
toggle() {
import { Controller } from "@hotwired/stimulus"
import { DirectUpload } from "@rails/activestorage"
export default class extends Controller {
static targets = ["input", "preview", "status"]
static values = {
<%= turbo_refreshes_with method: :morph, scroll: :preserve %>
<div class="posts-index">
<div class="sticky top-0 bg-white border-b" id="search-bar">
<%= form_with url: posts_path, method: :get, data: { turbo_frame: "_top", turbo_action: "morph" } do |f| %>
<%= f.search_field :q,
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["input", "results"]
static outlets = ["results-list"]
static values = {