Home
Courses
Learn React 19: The Complete Guide to Modern Web Apps

Challenge: Real-Time Chat Dashboard

Learn how to build a chat dashboard that stays usable under continuous change, streams messages in real time, revalidates lists in the background, supports offline sending through an outbox, and keeps expensive client-side filtering from blocking rendering.

We'll cover the following...

Problem statement

You’re required tpo build a real-time chat dashboard UI with a room list and a message panel. The interface must remain responsive while messages stream in, while connectivity changes, and while background synchronization runs. When offline, Send must remain available, and queued messages must show a clear pending status. When connectivity returns, queued sends must be reconciled, and data must be revalidated without collapsing the interface into global spinners.

Success criteria

The following success criteria confirm that the chat dashboard remains responsive under continuous change and that real-time updates, background revalidation, offline sending, and worker-based filtering all work together correctly.

  • The room list and active rooms are update when new messages arrive, without refetching everything.

  • The UI shows cached data first, then updates quietly as revalidation completes.

  • The user can send messages while offline; messages appear immediately with a pending badge.

  • When connectivity returns, queued messages sync and become confirmed without losing ordering.

  • Searching messages in a large room stays responsive (typing does not stutter) because filtering is offloaded to a worker.

Technical requirements: Implement the following features step by step:

  • Task 1: Real-time subscription updates
    Subscribe to incoming messages from the fake server and update the active room’s message list immediately when new messages arrive.

  • Task 2: Rooms list with SWR behavior
    Load the rooms list from a cache seam that returns cached data immediately and revalidates in the background. The UI must not block on each refresh.

  • Task 3: Offline-first sending with an outbox
    When offline, Send commits locally and appends an operation to an outbox. When connectivity returns, flush the outbox and reconcile pending → confirmed.

  • Task 4: Background sync on reconnect and on a timer
    When online, revalidate the rooms list and the active room’s messages periodically (and immediately on reconnect) without global spinners or UI resets.

Project structure

Below is the hierarchy of the project files and folders: