CotoJs | Aplicación web

Introducción

Este proyecto fue creado en 22 de septiembre de 2024, es un proyecto que consiste en una red social de salas (grupo de conversaciones) en tiempo real, con la funcionalidad de un sistema de autenticación, es decir, el sistema permite verificar la identidad de un usuario (con login y register).

La aplicación web cuenta con una conexión a base de datos, es decir, que almacena información en la nube, y se puede recuperar en cualquier momento.

Cada usuario se puede registrar con su nombre, correo electrónico y una contraseña, y dentro del sistema cada perfil/cuenta puede crear, editar, eliminar y ver sala de conversación, adicionalmente cada usuario tiene su foto de perfil, cada sala tiene su portada y sus miembros visibles.

La aplicación web, para el lado de BackEnd fue desarrollada usando : NodeJS + Express + MongoDB + Mongoose + JW Token + Socket.io + CORS + etc. Además de incluir módulos de npm como : bcryptjs, express-sesion, morgan, dotenv, http, multer, sharp, nodemon, etc.

La aplicación web, para el lado de FrontEnd fue desarrollada usando : Vite + React + Axios + Tailwind CSS + Socket.io Cliente + etc. Además de incluir módulos de npm como: dayjs, js-cookie, sweetalert2, sweetalert2-react-content, react-tippy, react-spinners, react-infinite-scroll-component, etc.

Ver proyecto (GitHub)

Funciones

Conjunto de tecnologías y características para este aplicación web:

Proyecto con infraestructura virtualizada o proyecto Vagrantizado.
Proyecto dockerizado.
Proyecto de RectJS + Axios (FrontEnd).
Proyecto de NodeJS + Express + Mongoose (BackEnd).
Base de datos usando MongoDB
Mapeador de Documentos a Objetos (ODM con Mongoose).
Notificaciones de sistema (con Toastify y SweetAlert2).
CRUD para usuarios (crear, leer, eliminar, actualizar).
CRUD para salas (crear, leer, eliminar, actualizar).
CRUD para mensajes (crear, leer, eliminar, actualizar).
Sistema de Login (con express-session).
Encriptación de contraseña (con bicrytjs).
CORS solo origines permitidos (con cors).
Chat en tiempo real (con socket.io)
Sistema de token usando JSON Web Token (con jsonwebtoken)
Sistema de inactividad de 30 minutos (en FrontEnd y BackEnd).

¿Cómo funciona?

Para hacer funcionar la aplicación web es necesario tener instalado Node JS y MongoDB, en sus máquina de host, posteriormente puede seguir las siguientes instrucciones para poder usarlo de forma local.

Configurar variables de entorno (Obligatorio) Para BackEnd Acceder a la carpeta de `/express-api` y crear un copia de `.env.example` con nombre de `.env`. Para FrontEnd Acceder a la carpeta de `/react-vite` y crear un copia de `.env.example` con nombre de `.env`. NOTA: En caso de que prefiera usar docker o docker-compose para arrancar el proyecto es necesario modificar `localhost` por el IP de la máquina host, por ejemplo: ``192.168.63.80``, para la máquina de Vagrant + Ubuntu20.04.

Las variables de entorno en este caso sería lo siguiente: Archivo `.env` para BackEnd ```text # Ambiente de desarrollo APP_PORT=5880 APP_URL=http://192.168.63.80 APP_ENV=local NODE_ENV=development # MongoDB URI APP_MONGODB_URI=mongodb://root:secret@service_db/db-cotojs?authSource=admin # Clave secreta APP_SECRET_KEY=ssh # CORS APP_CORS_1=http://192.168.63.80:5880 APP_CORS_2=http://192.168.63.80:5173 APP_CORS_3=http://192.168.63.80:5173/api/v1 # API Socket.io APP_CLIENT_SOCKET_IO=http://192.168.63.80:5173 ```

Archivo `.env` para FrontEnd ```text # API Express VITE_API_URL=http://192.168.63.80:5880/api/v1 # API Socket.io VITE_SOCKET_IO_DOMAIN=http://192.168.63.80:5880 VITE_SOCKET_IO_PATH=/api/v1/socket.io ``` Usando pnpm (BackEnd y FrontEnd) Paso 1) Ejecuta el siguiente comando desde el directorio `/express-api` para instalar las dependencias. ```shell $ pnpm install ``` Paso 2) Ejecuta el siguiente comando desde el directorio `/express-api` para correr el servicio API RestFul. ```shell $ pnpm run dev ``` Paso 3) Ejecuta el siguiente comando desde el directorio `/react-vite` para instalar las dependencias. ```shell $ pnpm install ``` Paso 4) Ejecuta el siguiente comando desde el directorio `/react-vite` para correr el servicio React + Vite. ```shell $ pnpm run dev ``` Usando docker (BackEnd y FrontEnd) Paso 1) Ejecuta el siguiente comando desde el directorio `/express-api` para crear una red y correr el servidor mongodb ```shell $ docker network create cotojs-network $ docker run --network cotojs-network --name cotojs-mongodb-run -p 27017:27017 -d mongo:4.4` ``` Paso 2) Ejecuta el siguiente comando desde el directorio `/express-api`, para crear una imagen y crear un contenedor docker con: Express + Mongoose + Socket.io + JWT + CORS + Multer + etc ```shell $ docker build -t cotojs-api-build -f api.Dockerfile . $ docker run --network cotojs-network --name cotojs-api-run -p 5880:5880 -d cotojs-api-build ``` Paso 3) Ejecuta el siguiente comando desde el directorio `/react-vite`, para crear una imagen y crear un contenedor docker con: React + Vite ```shell $ docker build -t cotojs-react-build -f react.Dockerfile . $ docker run --network cotojs-network --name cotojs-react-run -p 5173:3000 -d cotojs-react-build ``` Usando docker-compose (BackEnd y FrontEnd) Paso 1) Ejecuta el siguiente comando desde el directorio raíz `/`, para crear servicios, volúmenes y redes de docker-compose ```shell $ docker-compose up --build -d ``` Paso 2) Ejecuta el siguiente comando desde el directorio raíz `/`, para eliminar servicios, volúmenes y redes de docker-compose ```shell $ docker-compose down ```