We’re excited to announce that Hotwire Essentials is now live! This interactive tutorial guides you through building a dynamic podcast player using Hotwire.
Hotwire Essentials is designed for developers eager to learn Hotwire. The tutorial takes you step-by-step through building a functional podcast player that progressively teaches you how to apply Hotwire patterns to solve real-world problems.
Why learn Hotwire?
Hotwire has quickly become the preferred front-end technology for Ruby on Rails developers, and for good reason. It leverages the strengths of Rails like speed, simplicity, convention and enhances it with modern, real-time interactivity.
It enables fast, dynamic user experiences without relying on client-side JavaScript-heavy frameworks like React or Vue. Instead, Hotwire leverages server-rendered HTML, Turbo Frames, and Stimulus controllers to create highly interactive, real-time web applications.
By learning Hotwire, you’ll gain skills that make it easier to:
- Build applications with seamless navigation and interactivity
- Reduce the complexity of client-side JavaScript while boosting performance
- Implement real-time features like infinite scroll, typeahead search, and more
- Work with modern web patterns for responsive, dynamic applications
With Hotwire Essentials, you’ll gain hands-on experience with these patterns as you work through a real, functional project.
What is Botcasts?
Botcasts is the app you’ll be building as part of Hotwire Essentials. Botcasts is a simple, interactive podcast player that allows you to search for episodes, listen to them, and control playback across the app. Through this project, you’ll learn how to apply Hotwire’s Turbo and Stimulus libraries to create a polished user experience.
By the end of the tutorial, you’ll have a fully functional podcast player and a deep understanding of Hotwire, ready to apply to your own projects.
What you’ll learn in Hotwire Essentials
Hotwire Essentials guides you through four key lessons:
- Our first lines of JavaScript - We’ll ease into the concept of Hotwire by creating a ⌘ k-powered keyboard shortcut.
- The audio player - You’ll make the audio player persist across page visits, ensuring a seamless user experience while dynamically updating the episode being played.
- Infinite scroll - Learn to replace traditional pagination with infinite scrolling, ensuring smooth navigation and real-time updates using Turbo Frames.
- Typeahead search - Add typeahead functionality to the search page, providing instant search results as users type.
Each lesson builds on the previous one, with challenges that guide you through Turbo’s capabilities, Stimulus controllers, and best practices for server-driven interactivity.
Get started today
Hotwire Essentials is completely free and open source, hosted on GitHub for you to dive in at your own pace. We’ve designed it to be approachable for developers of all experience levels, from beginners to seasoned Rails developers.
Get started today and unlock the full potential of Hotwire in your web development toolkit. Check out the Hotwire Essentials tutorial.