React on Rails · OSS Flagship Demo
Flagship Task Board
A real CRUD app, server-rendered by Rails. The board below arrives as HTML
from the server (prerender: true), then React 19 hydrates it and a
Redux Toolkit store takes over. ActiveRecord owns the data; React owns the UI.
To do2 Break something on purpose Stop the Rails server and try to add a task: the UI shows the error state instead of failing silently.
To do Doing Done Delete
Read the React on Rails docs https://reactonrails.com - SSR, auto-registration, and the full configuration reference.
To do Doing Done Delete
Doing2 Add a task with optimistic UI Use the form above. The thunk POSTs to /api/tasks and the slice reconciles the server response.
To do Doing Done Delete
Drag a task to Done Status changes PATCH /api/tasks/:id. Errors roll back and surface in the banner.
To do Doing Done Delete
Done2 Render the first screen on the server This very list arrived as HTML from Rails. View source: the markup is there before any JavaScript runs.
To do Doing Done Delete
Hydrate with Redux Toolkit The same props that fed SSR seed the Redux store, so the client picks up exactly where the server left off.
To do Doing Done Delete
Server-rendered by Rails at 2026-06-20T01:36:08Z — view the page source: this board is in the HTML before any JavaScript runs.
Prove SSR to yourself
Run curl -s localhost:3000 | grep task-card — the task markup
is in the raw HTML response, not injected by client JavaScript.
bin/smoke automates exactly that check.
Where to look
app/controllers/tasks_controller.rb builds the props,
app/views/tasks/index.html.erb mounts the component, and
app/javascript/src/TasksApp/ holds the React + Redux Toolkit code.
Error states included
Submit an empty title to see Rails validations surface in the banner, or stop
the server and try a change to see the network error path.