React 19 de Cero a Experto / Proyecto final

Reto: de demo a producto (extiende el chat)

Reto50 min100 XP

Tu chat funciona, pero un demo que funciona no es un producto listo. Le faltan los toques de calidad que un usuario espera: que recuerde tu sesión al recargar, que te avise de mensajes NO LEÍDOS en otras salas, y que sea accesible. Este reto extiende tu capstone con esas tres mejoras —las que separan "anda en mi máquina" de "listo para gente real"—. Aplicas persistencia (M3), estado derivado (M6) y accesibilidad (M8) sobre la app que ya construiste.

Reto

Pule tu chat

Difícil50 min100 XP(×2 sin mirar la solución)

Qué debes construir

Tres mejoras de calidad sobre el chat colaborativo:

Persistir la sesión: guarda el nombre de usuario en localStorage (con useLocalStorage, M3) para que al recargar sigas dentro, sin volver a hacer login. Con un botón "Salir" que lo limpie.
Badges de no leídos: cuando llega un mensaje a una sala que NO estás viendo, incrementa un contador; muéstralo como un badge junto a la sala. Al entrar a la sala, se pone a cero.
Accesibilidad: la lista de mensajes como región en vivo (role="log" / aria-live="polite"), el input con aria-label, y la sala activa marcada con aria-current.

Reglas

El no leído se deriva/actualiza al RECIBIR mensajes de salas distintas a la actual.
La persistencia vive en useLocalStorage (el componente no toca localStorage directo).
Nada de romper lo que ya funcionaba (mensajes, presencia, optimista).

50:00

Cuando estés listo, arranca el reloj.

Estas tres mejoras son justo lo que distingue un producto:

Persistencia (M3): useLocalStorage hace que la sesión sobreviva a recargas —el usuario no vuelve a loguearse cada vez—. La lógica de localStorage vive en el hook, no en el componente.
No leídos (M6, estado derivado del flujo de eventos): un contador por sala que reacciona a los mensajes entrantes de salas inactivas. Es el tipo de "estado calculado del servidor" que hace la app sentirse viva.
Accesibilidad (M8): una región en vivo anuncia los mensajes nuevos a quien usa lector de pantalla —un chat inaccesible deja fuera a mucha gente—.

Autoevaluación: entra, y RECARGA el preview —¿sigues dentro sin re-loguearte? (persistencia). Quédate en #general y espera unos segundos —¿aparece un badge rojo con el número de avisos no leídos en #avisos? Entra a #avisos —¿se pone a cero? (no leídos). Y con teclado/lector: el input tiene su aria-label, la sala activa su aria-current, y los mensajes están en una región role="log" que se anuncia. Fíjate en el detalle del salaRef: el manejador del socket necesita saber la sala ACTUAL sin re-suscribirse en cada cambio —un ref resuelve leer un valor fresco desde un closure viejo (M4)—. Estos toques son los que convierten un demo en algo que darías a usar.

Qué sigue

Tu chat es ya un producto: en tiempo real, con salas, presencia, persistencia, no leídos y accesible. Solo queda una cosa: mirar atrás y ver TODO lo que construiste. La última lección cierra el supercurso —un repaso de tu viaje por React 19 y hacia dónde seguir (Next.js, el backend real, tu propio proyecto)—.