Skip to main content / Saltar al contenido principal

Chat App - Mensajería Instantánea en Tiempo Real

Aplicación Full-Stack distribuida de comunicación bidireccional en tiempo real con canales grupales, chats directos y autenticación híbrida.

Tecnologías utilizadas: React 19, TypeScript, Node.js, Express, Socket.IO, Redux Toolkit, Tailwind CSS v4, MongoDB, JWT, Google OAuth 2.0, Cloudinary.

Sobre el proyecto

Plataforma moderna de mensajería distribuida desarrollada para ofrecer comunicación instantánea sin latencia. Integra soporte para salas/canales de chat y conversaciones directas, gestión de contactos, envío de archivos multimedia y sincronización fluida entre clientes gracias a una arquitectura basada en WebSockets.

Stack Tecnológico & Arquitectura

  • Frontend: SPA desarrollada con React 19 y TypeScript para una interfaz reactiva, modular y con tipado estático estricto.
  • Backend & Real-Time: Servidor Node.js con Express y Socket.IO desplegado en Render para la gestión de eventos bidireccionales en tiempo real.
  • Base de Datos & Persistencia: MongoDB Atlas con Mongoose, optimizando la persistencia mediante operaciones atómicas ($addToSet, $pull).
  • Autenticación & Seguridad: Sistema híbrido mediante tokens JWT y Google OAuth 2.0 para un acceso seguro y flexible.
  • Estado Global & Estilos: Redux Toolkit para una gestión centralizada del estado de la aplicación, estilizado con Tailwind CSS v4.
  • Multimedia & Storage: Integración con Cloudinary para la carga, optimización y almacenamiento eficiente de archivos multimedia.

Características Principales

  • Comunicación Bidireccional en Tiempo Real: Emisión y recepción instantánea de mensajes y eventos a través de WebSockets (Socket.IO).
  • Autenticación Híbrida (JWT + Google OAuth): Permite inicio de sesión tradicional o autenticación social rápida mediante Google.
  • Salas & Canales Dinámicos: Creación y gestión de canales grupales y chats directos entre usuarios.
  • Gestión Atómica de Contactos: Operaciones eficientes a nivel de base de datos para agregar o eliminar contactos garantizando consistencia de datos.
  • Soporte Multimedia: Envío e intercambio de imágenes optimizadas y alojadas en la nube.

Calidad de Código & Configuración

El desarrollo mantuvo un enfoque estricto en buenas prácticas de arquitectura web y estándares de desarrollo moderno.

  • Tipado Estricto con TypeScript: Cobertura de tipos e interfaces para garantizar la integridad del flujo de datos en cliente y servidor.
  • Despliegue Distribuido: Configuración de integración continua con el frontend alojado en Vercel y el servicio backend en Render.
  • Linter & Reglas Estrictas: Configuración de ESLint para asegurar estándares de código limpios y consistentes en todo el repositorio.