DEV Community

julianrubisch
julianrubisch

Posted on

You Know Hotwire Basics. Now What?

#hotwire #turbo #stimulus #webdev

There's no shortage of "Getting Started with Hotwire" content. Install Turbo, add a <turbo-frame>, watch the page update without a full reload. Great. You've done the tutorial.

But then you're back in your app, staring at a real problem — optimistic UI updates, race conditions on rapid clicks, progressive image loading — and the tutorial didn't cover any of that.

That gap is why I started the Hotwire Club.

What It Is

A biweekly coding challenge series. Every two weeks, a new challenge goes up. Each one isolates a single problem — the kind you'd actually run into building a production app — and strips it down to first principles.

No video courses. No 40-part curriculum. Just a focused problem, a live coding environment on StackBlitz, and your brain.

We've published 45+ challenges since April 2023, covering Turbo Drive, Turbo Frames, Turbo Streams, and Stimulus.

What a Challenge Looks Like

Every challenge follows the same structure: Premise, Starting Point, Challenge.

The Premise frames the problem. Take our most popular challenge, Optimistic UI with Turbo 8 Morphs. It opens with a bit of napkin math:

Let's assume our server lives in Chicago, and the client is in Amsterdam. That's 6,604 km. Taking the speed of light into account, the lowest possible latency is 22ms, one way. Round it up to 50ms. Where does that put us?

  • User clicks a button → 50ms until it reaches the server
  • Server calculates response → 100ms (fast)
  • Answer is returned → again 50ms

That's 200ms already. Way beyond the "perceived as instant" limit of 100ms.

The Starting Point gives you a pre-built scaffold on StackBlitz — a working app with a deliberate gap. You don't build from scratch. You fill in the missing piece.

The Challenge tells you exactly what to implement. In this case: render an inline <turbo-stream> to swap the UI immediately on click, then let Turbo 8's morph reconcile the DOM when the server responds. The favorite button updates instantly. The server catches up in the background.

Another popular one: Progressive Image Loading with Blurhash. It takes a real performance problem — images tanking your Largest Contentful Paint — and turns it into a Stimulus controller challenge. Paint a blurhash to a canvas, fade in the real image when it loads. Practical, visual, and you walk away with a pattern you can drop into a real app.

No Rails Required

Here's a thing that gets lost in the discourse: Turbo and Stimulus are JavaScript libraries. They're not welded to Rails.

All our challenges run on StackBlitz with a Node.js backend. You don't need a Ruby environment. You don't need to set up a Rails app. Open the link, read the challenge, write code. If you use Django, Laravel, Phoenix, or plain HTML — the patterns still apply.

We do use Rails conventions as reference points (you have to imagine that the Node handler is a Rails controller), but the actual code you write is JavaScript and HTML.

Who It's For

You already know what <turbo-frame> does. You've read the Stimulus handbook. You want to go deeper.

As Teddy Valente, CTO at Wobee, put it:

"The Hotwire Club is a fantastic resource for anyone who already has a good knowledge of Hotwire and wants to deepen their mastery. The exercises are always interesting and very well written. The answers are always detailed and to the point. You can even find exercises that will be useful in your work and for new features."

If that sounds like where you're at, this is for you.

Free Challenges, Optional Extras

Every challenge is free. The write-up, the StackBlitz environment, the problem — all open. About 2/3 of all solutions are free too.

If you want sample solutions and access to a private Discord where people discuss approaches, there's a Patreon starting at $5/month. But the challenges themselves? Those are yours.

Try One

Pick a challenge and see if it clicks:

See you in the club.

Top comments (0)