Aplicación Web de Chat en tiempo real con React y Node.js utilizando APIREST Full y Socket.io
La aplicación se basa en la interacción entre usuarios pudiendo enviarse mensajes en tiempo real y enviar solicitudes a otras personas
Desarrollado con React y Vite, utiliza la libreria de socket.io-client para el cliente manejando la funcionalidad de chat en tiempo real conectandose a un servidor para atender la solicitud con otros clientes y servicio web propio APIRest Full desarrollado en .NET con C# para la funcionalidad de inicio de sesion, registro de usuario, envio y gestión de solicitudes, y poder guardar su foto de perfil, esta ultima apoyandose con la api de imgbb para el guardado de imagenes en la nube
Página de Bienvenida para Iniciar Sesión o Registrarse
Pantalla de Inicio con los usuarios para chatear
Pantall de chat con una persona
Pantalla de respuesta del chat
Indicativo de usuario desconectado
Página para buscar usuarios registrados y enviar solicitud de amistad
Página para aceptar o rechazar solicitudes de amistad
Página de ajustes del perfil como cambiar foto, contraseña y actualizar datos
![](https://private-user-images.githubusercontent.com/75767835/242452587-7d7766a2-3680-4dd8-a3df-9d6fb933a684.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NjY5MTEsIm5iZiI6MTcyNDU2NjYxMSwicGF0aCI6Ii83NTc2NzgzNS8yNDI0NTI1ODctN2Q3NzY2YTItMzY4MC00ZGQ4LWEzZGYtOWQ2ZmI5MzNhNjg0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDA2MTY1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTExZmQwM2RmMzA0M2Y2YzE5ZDQyZWQ4ZWY4OGQ4NmY1YmVjY2IyYjJkNTFmZTUwZTkxNjQ2Mzk2MTQ0OTRlNTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Pfr4BBZaX6HB3Zc-20sbbs4OdTDj6JUTWZdb0XJuqpo)
![](https://private-user-images.githubusercontent.com/75767835/242448841-f82bb3e1-315a-495e-9394-9dc9d1d59010.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NjY5MTEsIm5iZiI6MTcyNDU2NjYxMSwicGF0aCI6Ii83NTc2NzgzNS8yNDI0NDg4NDEtZjgyYmIzZTEtMzE1YS00OTVlLTkzOTQtOWRjOWQxZDU5MDEwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDA2MTY1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTAwNDMyNTg5ODFlMWUyYmMwZTJlMTIzZjY2ZDk2NDFlZWFiZjkyNDZkNWQ4YzI2YjkzYTRlNTM5NWNjZjZiYmYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.eDCOXjs-5339hzt395HlRsadiQT5nfzf2lcQmK4fX_s)
![](https://private-user-images.githubusercontent.com/75767835/242461942-c1634d4b-6c9e-4afd-8f0f-6f0e46a86f1c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NjY5MTEsIm5iZiI6MTcyNDU2NjYxMSwicGF0aCI6Ii83NTc2NzgzNS8yNDI0NjE5NDItYzE2MzRkNGItNmM5ZS00YWZkLThmMGYtNmYwZTQ2YTg2ZjFjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDA2MTY1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNjZGM0ZDUzNmJhMTRjOGUwM2E0ODJkOTYxMjA5YzVjOTc4Y2I1YTk3YzhlN2NlYTM1MmZjNjAxMzY5OTJiOGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.fS6WXxqRW6N3sOWvs1CKPmaQ2_1AWBHzAt7vwIZYgXc)
![](https://private-user-images.githubusercontent.com/75767835/242454534-2dea7b73-d136-4088-a988-bd89ad5697fc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NjY5MTEsIm5iZiI6MTcyNDU2NjYxMSwicGF0aCI6Ii83NTc2NzgzNS8yNDI0NTQ1MzQtMmRlYTdiNzMtZDEzNi00MDg4LWE5ODgtYmQ4OWFkNTY5N2ZjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDA2MTY1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk0MDQ1MmE5NTYyOWMxYjA1YjU0ZjJjYjJiZjAwMGExMDc4ODM4YmM0OTY2MWQxM2I2YzYzOTE0NThkYzhlOGImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.y8fh4Bfg5yxDqOx-DTDEyeg9kRYAbFZaYmQH0ZYNfwI)
![](https://private-user-images.githubusercontent.com/75767835/242452858-cc4b42c6-64e9-49e0-91de-aa34dc0ab4a3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NjY5MTEsIm5iZiI6MTcyNDU2NjYxMSwicGF0aCI6Ii83NTc2NzgzNS8yNDI0NTI4NTgtY2M0YjQyYzYtNjRlOS00OWUwLTkxZGUtYWEzNGRjMGFiNGEzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDA2MTY1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJhYmZkM2IyNmFjYTU5ZWM4MGIzZTVmZTMwODFiN2U3YjZkOTU2MWJhYTllMTExYWI4OTk5YzgxY2QwMjMzZmYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.JSG68bSDM2wk97q0FBtVhR8EHrCFdM4LlCPd5yEdlQY)
![](https://private-user-images.githubusercontent.com/75767835/242452513-e4946c81-8b5b-4479-99ad-37f6f06b908d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NjY5MTEsIm5iZiI6MTcyNDU2NjYxMSwicGF0aCI6Ii83NTc2NzgzNS8yNDI0NTI1MTMtZTQ5NDZjODEtOGI1Yi00NDc5LTk5YWQtMzdmNmYwNmI5MDhkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDA2MTY1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWYwY2RlNGQxMTNmMWFmYzUzNGNlODJjMzk3NmRlN2MyMWU2NTEzODQ1Y2MzMTM1NzI3NGNkY2I3NDllNGExOTYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.2g9DmIjpHbRQlafOSvbujMMB1PYYN6Q0SQml9FudinA)
Desarrollado en nodejs utilizando la librería socket.io para servidores proporcionando funcionalidad al chat
Debe clonar el proyecto en su directorio
git clone https://github.com/eliascando/ChatExpress.git
Moverse en la consola al directorio donde se clonó el proyecto
cd C://Users/user/ChatExpress
Debe instalar las dependencias del proyecto
npm install
Luego se puede ejecutar el proyecto en modo desarrollo
npm run dev
Nota: Debe tener instalado git y node.js para poder instalar las dependencias y ejecutar el proyecto