ProyectosChat en tiempo real con Socket.IOene/2024

Esta app es un proyecto full-stack con MERN, con la finalidad de practicar el uso de Socket.IO para crear un chat en tiempo real. Cuenta con base de datos con MongoDB. El mayor desafío fue integrar Socket.IO con React, manejar los eventos del lado del cliente y del lado del servidor, y sincronizar los estados, aunque para ello Zustand me ayudó un montón.

A nivel técnico esta app tiene las siguientes características:

  • Cuenta con registro y login de usuarios, usando JWT para la autenticación.
  • Cuenta con un chat en tiempo real (sin refrescar la página web), donde los usuarios pueden intercambiar mensajes con cualquier usuario conectado.
  • Se recibe una notificación cuando llega un mensaje y la ventana se encuentra enfocada en otro chat.
  • Se puede ver la lista de usuarios conectados.
  • La campana de notificaciones tiene un contador de los mensajes no leídos.
  • Posibilidad de marcar todos los mensajes como leídos.

Sitio webEsta aplicación no tiene despliegue, pero podemos revisar el código en una entrevista presencial o virtual, y si gustan puedo hacer el despliegue en vivo a manera de prueba.

Código

Front-endReact, Vite, Javascript, Chakra-UI, Bootstrap, socket-io client, Wouter, Zustand

Back-endJavascript, cors, dotenv, express, node, socket-io, mongoose, MongoDB

A continuación podrán ver un video corto con una demo de la app: