Regístrese en Hostinger y obtenga un servidor VPS. Utilice el código KISHAN para obtener un 10 % de descuento: https://www.hostg.xyz/SHF8O
‍ Código fuente: https://topmate.io/kishansheth/1076639

Hola chicos, en este video crearemos una aplicación de chat responsiva de pila completa utilizando sockets para comunicación en tiempo real. También podremos crear grupos y subir archivos y descargar archivos. Hemos utilizado React, Node.js, Express, MongoDB, Socket.io, Zustand y muchas más tecnologías increíbles para crear esta aplicación. Al final, también implementaremos la aplicación MERN en Hostinger.

Discord para cualquier problema/error/error: https://discord.com/invite/gr3JYgUFzQ

Contacto para Colaboraciones/Freelancing/Proyectos: [email protected]

Recursos y enlaces:
————————————————– ——————————
Activos: https://drive.google.com/file/d/1_rre9UqQq_iQyoKjpTSslxBF3licSS7s/view?uspdrive_link
Componente multiselect.jsx: https://gist.github.com/koolkishan/b186b8eab5dbbaee383fd8f79f25eca9
Logotipo: https://gist.github.com/koolkishan/8b590127ab27e3bdea1f39649f3ee8e9

Sígueme aquí:
————————————————– ——————————
Únase a nuestra comunidad de Discord: https://discord.com/invite/gr3JYgUFzQ
Sígueme en Twitter: https://twitter.com/thekishansheth
️ Sígueme en Instagram: https://www.instagram.com/thekishansheth/
Sígueme en LinkedIn: https://www.linkedin.com/in/koolkishan/

¿QUIERES APOYAR EL CANAL?
————————————————– ——————————
https://buymeacoffee.com/koolkishansheth

Características de la aplicación:
————————————————– ——————————
Frontend: Construido con React ️
Componentes de la interfaz de usuario: ShadCN
Estilo: CSS de viento de cola
Capacidad de respuesta: diseño totalmente responsivo
Autenticación: tokens JWT
Manejo de archivos: Multer para almacenamiento de archivos e imágenes
Descarga de archivos: descarga fácil de archivos
Mensajería en tiempo real: sockets para comunicación instantánea
Soporte por chat: chats grupales y mensajes personales
Conversaciones divertidas: compatibilidad con emojis
Backend: Node.js y Express ️
Base de datos: MongoDB para almacenamiento de datos eficiente ️
Gestión de estados: Zustand para una gestión de estados perfecta
Llamadas API: Axios para interacciones API fluidas
Calidad del código: código estructurado y mantenible

️ Marcas de tiempo
————————————————– ——————————
00:00 Demostración
05:29 Hostinger
07:47 Configuración del entorno
20:00 Configuración de ruta
23:50 IU de autenticación
45:40 Configuración del servidor
01:02:40 Modelo de autenticación
01:09:05 Integración de autenticación
01:43:30 Configuración de Zustand
01:49:10 Verificación de tokens JWT y middleware
02:07:56 Interfaz de usuario de perfil
02:30:22 API de perfil
02:42:10 Imagen de perfil
03:11:30 Diseño de chat
03:15:40 Pantalla de chat vacía
03:24:40 Contenedor de contactos
03:28:50 Contenedor de chat
03:54:55 Componente de información de perfil
04:05:00 Cerrar sesión
04:10:25 Modal de mensajes directos
04:22:10 Buscar contactos
04:41:50 Información de contacto
04:52:00 Configuración del socket
04:59:10 Interfaz de configuración de socket
05:05:00 Esquema de mensajes
05:09:40 Enviar/recibir mensaje
05:41:10 Obtener todos los mensajes
05:49:50 Obtener contactos de usuario
06:15:10 Enviar/recibir archivos
06:35:30 Descargar archivos mediante programación
06:39:25 Descarga de imágenes
06:45:15 UI de descarga/carga de archivos
06:56:08 Obtener la API de todos los contactos
06:59:30 Crear interfaz de usuario modal de canal
07:12:03 Modelo de canal
07:16:52 Crear API de canal
07:29:38 Obtener canales de usuario
07:37:15 Enviar/recibir mensaje de canal
08:02:40 Enviar/recibir archivos de canal
08:04:30 Obtener mensajes del canal
08:18:30 Despliegue

Aproveche la oportunidad para conectarse y compartir este video con sus amigos y familiares si lo encuentra útil.