Andrea Fomera/Learn Hotwire by Building a Forum

Thank you! Learn Hotwire by Building a Forum is now free!

While the installation steps in the first few videos are a bit different in Rails 7+, this is still a great introduction into Hotwire if you're looking for one.

For Rails 7 to get started, I recommend starting your app with the following command:
rails new hotwire-forums -j esbuild --css bootstrap

Then you should be able to pick up from lesson 3 (Setting up our User system).

Thanks to everyone who supported me when the course released for making this possible.

- Andrea

  • Free

Learn Hotwire by Building a Forum

  • Course
  • 43 Lessons

Want to learn how to use Hotwire to progressively enhance your applications? In this course we'll build a real-time forum and get into use-cases that aren't as simple as the Hotwire chat demo. 

What even is Hotwire?

Hotwire can be thought of as a methodology of building web applications using HTML Over The Wire.

It's comprised of three different parts:
  • Stimulus
  • Turbo
  • Strada (maybe premiering in the 2020's  🤷‍♀️)
Strada isn't out yet but it largely will revolve around mobile applications taking advantage of HTML over the wire too.

Turbo is the magic behind the scenes that powers Hotwire. There's a few different parts of Turbo, but we'll get into that later.

Stimulus provides the sprinkles of JavaScript when you really need those little extra touches.

What does the course cover?

We'll take a progressive enhancement approach to building our application with Hotwire. 

We're building a basic forum system where Users can start discussions and post them. We'll put finishing touches on the app by adding pagination, Turbo and then adding Notifications (and the ability to opt-in/opt-out!)

By the end of the course you'll have...
  • Added user authentication with Devise (and added support for Usernames)
  • Added Discussions
  • Gave users the ability to add/update/delete Posts in Discussions
  • Added Categories to section off your discussions
  • Added notifications using Noticed
  • Used Turbo to add that real-time ✨for when new posts are created, discussions are updated or categories are moved.
  • Written zero JS to achieve this reactive of an app. 

We're only going to include a few gems on top of the default Rails stack, so you'll find just how far you can get without many additions.

FAQs

Who is this course for?

This course is aimed at those who’ve made a few Rails apps before, and deployed to production. You should be familiar enough with Ruby to understand things like Instance Variables, Classes, Hashes and Arrays. If you’re new to Rails, check out my first course Learn Rails by Building Instagram or GoRails: Start

What will I learn in this course?

After you complete this course you'll have learned...
  • How to avoid writing Javascript until you want the finishing touches
  • How Turbo Streams work / how to leverage them.
  • How to use Turbo Frames
  • Turbo Drive Basics
  • When Turbo may not be a good fit
  • How to use Noticed for Rails-like notifications

What if I'm not sold on the Hotwire approach?

That’s okay! It’s not for everyone, but while you’re here... Jason Charnes has a really good course on Interactive Rails with StimulusReflex so maybe check it out to see if it is more of your style?

If you change your mind and want to give Hotwire another look down the road, check back here 😁.

Can I get my money back if it's not a good fit?

Don't you hate it when you buy something and it doesn't meet expectations? Me too! If the course doesn't live up to your expectations I will provide a full refund within the first 14 days from purchase. Just tell me how I can meet your expectations next time. Here’s how to request a refund.

Do you offer parity pricing for my country?

Yup! Send me an email or a Twitter DM with your country and what you think would be a fair price. I can offer my standard parity pricing discount I've given to a number of countries. We'll work something out. 

About the Author

My name is Andrea Fomera, I'm a Senior Developer at Podia. I've been coding with Ruby on Rails since 2014, and started my professional career in 2016. 

When Hotwire was released in December 2020, I fell in love with the progressive enhancement approach and I want you to do the same after this course.

Why am I qualified to teach this course?

I’m in a bit of an interesting spot. 

At work we are heavily invested in StimulusReflex and CableReady, which are another approach to making your Rails apps reactive without needing the complex JavaScript Webpacker soup. So I’m fortunate to have a chance to think in a similar mindset to that working in Hotwire provides. 

BUT I need to be clear, there are differences between the Hotwire approach and StimulusReflex/CableReady. This course won’t cover the differences, but if you’re interested check out Jason Charnes’s course on Interactive Rails with StimulusReflex.

Because I work with StimulusReflex regularly I’ve seen us do some pretty cool things, and so when Hotwire was announced I set about to try and recreate those same experiences with only the pieces from the creators of Rails. I’ve also been able to recognize some places we maybe should have used/waited for Turbo instead 😬. (If only it had been out when we built that stuff!)

Therefore, I feel like I can give a realistic picture of how you can use Hotwire to solve problems in a modern straightforward manner.

Hear what a customer said...

"I really enjoyed your Hotwire course. I was having a hard time getting my head around some of the Turbo concepts - but much clearer now! I started learning rails at the start of the year, so also learnt a lot of good non-Hotwire practices following how you built the app"

A recent customer

Join my newsletter

Not ready to buy yet? Sign up to get product updates, price changes, launch announcements and more by joining my newsletter. 

You're signing up to receive emails from Andrea Fomera

Table of contents

Getting started

Bootstrapping our Rails app
Installing Hotwire
Setting up our User system (Devise)
Adding a basic Navbar
Flash Messages
Current Attributes

Discussions

Create discussion model
Discussion List
Creating discussions
Edit Discussions
Remove discussions
Discussion show with inline editing
Preview
to_param for friendly links
Realtime Discussions (for everyone!)

Posts

Installing ActionText + ActiveStorage
Adding our Post model
Create a post when you create a Discussion
Create posts on discussion show
Showing posts
Realtime post creation for everyone.
Edit posts (+ realtime)
Removing posts (+ realtime)

Adding Categories

Creating Categories (Category CRUD)
Add Categories to Discussion Index
Category Filtering
Moving Discussions between Categories

Enhancements

Close discussions in Realtime
Pin posts to the top
Reducing N+1s
Lazy load post actions
Install Pagy
Paginating Discussions
Paginating Posts on Discussions
Refactoring DiscussionsController#update

Notifications

Create DiscussionSubscription model
DiscussionSubscription toggle method
Display subscription status
Updating a subscription status from the UI
Install Noticed / Generating our first notification
Notifications UI
Sending the new post notification email

Deployment

Final touches before Deployment
Deploy to Heroku