Скачать или смотреть Rails 8 Chat App – Part 1: Setup, Hotwire, Keyboard & Drawer Navigation

Welcome to Part 1 of my Rails 8 Chat App series!

In this first episode, I walk you through the initial setup of Raindy — a minimalist Rails 8 chat app using:
Tailwind CSS
Hotwire (Turbo + Stimulus)
A fully accessible drawer-based UI
Rails Authentication (the new rails g authentication)

We’ll explore:
Setting up Rails with UUIDs and Tailwind
Building an accessible drawer using a dialog and Stimulus
Adding a main navigation dropdown with full keyboard support
Structuring your Rails app using concerns, Turbo Frames, and Stimulus controllers
First glance at the chat model and scaffold setup

If you're starting a modern Rails app and want a clean, accessible UI — this is for you.

---
Chapters:
00:00 - Introduction to Raindy
00:15 - Creating the app with `rails new`
03:24 - The app in the browser: drawer, chats, navigation
04:18 - PWA: Adjusting layout for standalone mode
05:00 - First look into Stimulus
06:25 - Chat views
09:15 - ChatsController
11:25 - ApplicationHelper
12:33 - Chat model
13:05 - Main navigation and Stimulus
14:44 - The DrawerController
15:15 - Starting event dispatch
17:15 - Target lifecycle methods
19:30 - Dispatch from the ChatEditController
21:18 - Back to the browser — using the app
22:15 - The AlertController
23:30 - Coffee break
---

Related Resources

▶️ Watch Part 2: Testing the App with Minitest + Capybara
   • Rails 8 Chat App – Part 2: Testing with Mi...  

▶️ Watch Part 3: Documenting for Humans & AI
   • Rails 8 Chat App – Part 3: Documentation w...  

▶️ Watch Part 3: Documenting for Humans & AI
   • Rails 8 Chat App – Part 3: Documentation w...  

▶️ Watch Part 3.1: Lazy AI • Refactored Docs • Final Push
   • Rails 8 Chat App – Part 3.1: Refactoring D...  

▶️ Watch Part 4: Copy to Clipboard with Dispatch and Flash Messages
   • Rails 8 Chat App – Part 4: Copy to Clipboa...  

▶️ GoRails: How to use params.expect in Rails 8+
   • How to use params.expect in Rails 8+  

💻 Raindy GitHub Repo
https://github.com/aindy-eu/raindy

💻 Tailwind Stimulus Slideover (from excid3)
https://github.com/excid3/tailwindcss...

📚 Rails 8 Getting Started Guide
https://guides.rubyonrails.org/gettin...

📚 The Dialog Element – Mozilla Developer Docs
https://developer.mozilla.org/en-US/d...

📚 Dropdown Patterns & Accessibility
https://www.w3.org/WAI/ARIA/apg/patte...
https://www.w3.org/WAI/tutorials/menu...
https://www.w3.org/WAI/ARIA/apg/patte...
https://216digital.com/web-accessibil...

---

#ChatApp #DevSetup #DrawerNavigation #Hotwire #Rails #Rails8 #RailsTutorial #RubyOnRails #Stimulus #StimulusJS #TailwindCSS #TurboStreams #UIDesign #WebAccessibility #WebDevelopment