React 19 de Cero a Experto / Proyecto final

Proyecto: chat colaborativo en tiempo real

Proyecto90 min150 XP

Es el momento: construyes el chat colaborativo completo —login, salas, mensajes en tiempo real, presencia y "está escribiendo…"— ensamblando todo React 19 que dominaste. Corre en vivo con el socket simulado (mismo modelo mental que Socket.io); en tu proyecto real, cambiarías esa línea por io("https://...") conectado al backend que construirás en el supercurso de Node/NestJS (SC-10). Este es tu capstone: la prueba de que sabes armar una app real de principio a fin.

Reto

Chat colaborativo

Difícil90 min150 XP(×2 sin mirar la solución)

Qué debes construir

Un chat con salas, presencia y tiempo real, sobre el plan de la lección anterior:

Login: una pantalla para elegir tu nombre antes de entrar (estado local que actúa de "auth").
Salas: una lista de salas (#general, #diseño, #random); al elegir una, te unes (emit("unir_sala")) y ves sus mensajes.
Mensajes en tiempo real: recibir el historial al entrar, y los mensajes nuevos (propios y ajenos) por el socket, filtrados por sala.
Envío optimista: tu mensaje aparece al instante (dedup por id al confirmarse).
Presencia: la lista de quién está en la sala actual.
"Escribiendo…": indicador cuando alguien teclea en la sala.

Reglas

Clasifica el estado como planeaste: local (nombre, sala, input), de servidor (mensajes, presencia, escribiendo), conexión en un ref.
Cada socket.on(...) con su socket.off(...) en el cleanup.
Mensajes con id de cliente para deduplicar el optimista; todo tipado.

90:00

Cuando estés listo, arranca el reloj.

Este capstone ensambla, en una sola app, casi todo el curso:

Componentes y props (M1), estado (M2), efectos y cleanup (M3) para la conexión.
Estado clasificado (M6): local, de servidor (socket), y la conexión en un ref.
Tiempo real (M9): salas, mensajes, presencia, "escribiendo…", envío optimista.
Render derivado (M3): los mensajes visibles se DERIVAN filtrando por sala; nada duplicado.

En tu proyecto real, crearSocketSimulado() sería io("https://tu-servidor.com"), y el servidor (SC-10) haría el io.to(sala).emit(...). La estructura del cliente —esta— no cambiaría.

Autoevaluación: entra con un nombre, cambia entre salas —¿cada una tiene su historial y su presencia?—, envía mensajes —¿aparecen al instante con ⏳ y se confirman? ¿el bot "está escribiendo…" y responde en la sala correcta? ¿los mensajes de una sala NO se mezclan con los de otra? Si todo eso funciona, acabas de construir una app de tiempo real completa. Cada pieza —el login condicional, el estado clasificado, el socket con su cleanup, el filtrado por sala, el envío optimista, la presencia— es algo que aprendiste en un módulo, ahora trabajando en conjunto. Eso es ser desarrollador React.

Qué sigue

Tienes el chat funcionando. Pero "funciona" no es "listo para producción": falta persistir la sesión, avisar de mensajes no leídos en otras salas, y pulir la accesibilidad. La próxima lección es un reto para EXTENDER tu capstone con esos toques de calidad —lo que separa un demo de un producto—.