Merge pull request #117 from codeurjc-students/docs-phase3-documentation

Docs phase3 documentation

Author: DavidMorenoo

DocFiles/images/phase3/dashboard1.png

@@ -1,16 +1,16 @@
 FROM node:20-alpine AS frontend-build
 WORKDIR /app/frontend
-COPY LogArtApp/frontend/LogArt-frontend/package*.json ./
+COPY frontend/LogArt-frontend/package*.json ./
 RUN npm install --legacy-peer-deps
-COPY LogArtApp/frontend/LogArt-frontend/ ./
+COPY frontend/LogArt-frontend/ ./
 RUN npm run build
 
 FROM node:20-alpine AS backend-build
 WORKDIR /app/backend
 RUN apk add --no-cache make gcc g++ python3
-COPY LogArtApp/backend/package*.json ./
+COPY backend/package*.json ./
 RUN npm install --legacy-peer-deps
-COPY LogArtApp/backend/ ./
+COPY backend/ ./
 RUN npm rebuild bcrypt --build-from-source
 RUN npm prune --production
 RUN npm cache clean --force

DocFiles/images/phase3/dashboard2.png

@@ -28,7 +28,7 @@ services:
       - "27017:27017"
     restart: unless-stopped
   app:
-    image: davidmorenoo/logartapp:latest17
+    image: davidmorenoo/logartapp:latestManual
     ports:
       - "8443:8443"
     healthcheck:

DocFiles/images/phase3/dashboard3.png

@@ -121,122 +121,248 @@ Si en cualquier momento intentamos acceder a una URL no encontrada, nos mostrar
 
 ## Diseño Final:
 
-### Pantalla Hero (home)
+## Pantalla Hero (home)
 
 Pantalla principal de la aplicación para usuarios no logueados
 
 ![Imagen de hero1](/DocFiles/images/phase2/hero1home.png)
 
-### Pantalla Hero (FAQ)
+## Pantalla Hero (FAQ)
 
 Si bajamos, nos encontramos con la sección de preguntas comunes
 
 ![Imagen de faq](/DocFiles/images/phase2/hero2faq.png)
 
-### Pantalla Hero (carrusel)
+## Pantalla Hero (carrusel)
 
 Más abajo tenemos un carrusel infinito de imágenes en formato disco de vinilo
 
 ![Imagen de carrusel](/DocFiles/images/phase2/hero3infcarousel.png)
 
-### Pantalla Hero (slider)
+## Pantalla Hero (slider)
 
 Por último tenemos un slider de imágenes que representan las disciplinas de la app
 
 ![Imagen de slider](/DocFiles/images/phase2/hero4imgslider.png)
 
-### Pantalla de Registro
+## Pantalla de Registro
 
 Si en cualquier momento durante el hero clicamos en "Registrarse" llegaremos a esta pantalla
 
 ![Imagen de registro](/DocFiles/images/phase2/register.png)
 
-### Pantalla de Login
+## Pantalla de Login
 
 Si en cualquier momento clicamos en iniciar sesión, o nos registramos, llegaremos a esta pantalla
 
 ![Imagen de login](/DocFiles/images/phase2/login.png)
 
-### Pantalla de Galería
+## Pantalla de Galería
 
 Después de iniciar sesión llegaremos a esta pantalla, donde podremos interactuar con los objetos y crear nuevos
 
 ![Imagen de galería 1](/DocFiles/images/phase2/gallery1.png)
 
-### Pantalla de Galería (continuación)
+## Pantalla de Galería (continuación)
 
 En la parte de arriba podemos ver una opción para filtrar por nombre, y abajo la paginación
 
 ![Imagen de galería 2](/DocFiles/images/phase2/gallery2.png)
 
-### Pantalla de selector de disciplina
+## Pantalla de selector de disciplina
 
 Si clicamos en el nombre de la disciplina actual, se abre el selector
 
 ![Imagen de selector de disciplina](/DocFiles/images/phase2/disciplineSelector.png)
 
-### Pantalla de Crear objeto
+## Pantalla de Crear objeto
 
 Si clicamos en el botón de crear objeto, nos saldrá el modal de creación, donde introducir los datos
 
 ![Imagen de crearObjeto](/DocFiles/images/phase2/createObject.png)
 
-### Pantalla Editar objeto
+## Pantalla Editar objeto
 
 Si en lugar de clicar en crear objeto, clicamos en "Editar" dentro de la tarjeta del objeto, veremos el modal de edición
 
 ![Imagen de editarObject](/DocFiles/images/phase2/updateObject.png)
 
-### Pantalla de detalles del objeto
+## Pantalla de detalles del objeto
 
 Si clicamos en la tarjeta de un objeto, o su nombre, llegaremos a la pantalla de detalles
 
 ![Imagen de detalles1](/DocFiles/images/phase2/objectDetail1.png)
 
-### Pantalla de detalles del objeto (continuación)
+## Pantalla de detalles del objeto (continuación)
 
 Podemos ver también la paginación implementada
 
 ![Imagen de detalles2](/DocFiles/images/phase2/objectDetail2.png)
 
-### Pantalla de editar comentario
+## Pantalla de editar comentario
 
 Si clicamos en el botón de editar, podremos modificar nuestro comentario
 
 ![Imagen de editar comentario](/DocFiles/images/phase2/editComment.png)
 
-### Pantalla de perfil
+## Pantalla de perfil
 
 Si clicamos en "perfil" desde el navbar llegaremos a esta pantalla
 
 ![Imagen de perfil1](/DocFiles/images/phase2/profile1.png)
 
-### Pantalla de perfil (continuación)
+## Pantalla de perfil (continuación)
 
 Como se puede ver, podemos editar cualquier valor menos la contraseña
 
 ![Imagen de perfil2](/DocFiles/images/phase2/profile2.png)
 
-### Pantalla de detalles como admin
+## Pantalla de detalles como admin
 
 Si somos admin, desde nuestro dashboard (fase avanzada), llegaremos al objeto de un usuario y podremos moderarlo
 
 ![Imagen de detalles admin](/DocFiles/images/phase2/objectDetailAdminView1.png)
 
-### Pantalla de detalles como admin (continuación)
+## Pantalla de detalles como admin (continuación)
 
 Como se puede ver, los comentarios de un administrador tendrán un color diferente para diferenciarlos
 
 ![Imagen de detalles admin2](/DocFiles/images/phase2/objectDetailAdminView2.png)
 
-### Pantalla de Error
+## Pantalla de Error
 
 Si en cualquier momento introducimos una url no válida, llegaremos a la pantalla de error
 
 ![Imagen de error](/DocFiles/images/phase2/404error.png)
 
-# 🗺️ Diagrama de Navegación
+## Pantalla de Recuperación de contraseña 1
+
+Ahora podemos dar a la opción de recuperar contraseña en la pestaña de login
+
+![Imagen de recuperacion1](/DocFiles/images/phase3/pass1.png)
+
+## Pantalla de Recuperación de contraseña 2
+
+Donde deberemos introducir un correo de la aplicación
+
+![Imagen de recuperacion2](/DocFiles/images/phase3/pass2.png)
+
+## Pantalla de Recuperación de contraseña 3
+
+Y obtendremos un mensaje de éxito, independientemente de si el gmail existe o no, para evitar que se puedan hacer acciones maliciosas y sacar correos de usuarios por fuerza bruta
+
+![Imagen de recuperacion3](/DocFiles/images/phase3/pass3.png)
+
+## Pantalla de Recuperación de contraseña 4
+
+Entonces recibiremos en nuestro correo un mensaje como el siguiente
+
+![Imagen de recuperacion4](/DocFiles/images/phase3/pass4.png)
+
+## Pantalla de Recuperación de contraseña 5
+
+Y si aceptamos, nos dará la opción de cambiar la contraseña
+
+![Imagen de recuperacion5](/DocFiles/images/phase3/pass5.png)
+
+## Pantalla de verificación de registro
+
+De manera similar, debemos verificar nuestra cuenta por gmail después de registrarnos, donde al hacerlo iremos a la siguiente pestaña
+
+![Imagen de verificacion mail](/DocFiles/images/phase3/verificacion1.png)
+
+## Pantalla de compartir objeto 1
+
+Ahora, podemos compartir nuestros objetos con cualquier persona, incluso si no tienen cuenta en la aplicación, lo haremos desde dentro del objeto a compartir, y clicando en el botón
+
+![Imagen de share1](/DocFiles/images/phase3/share1.png)
+
+## Pantalla de compartir objeto 2
+
+Ahora veremos el link
+
+![Imagen de share2](/DocFiles/images/phase3/share2.png)
+
+## Pantalla de compartir objeto 3
+
+Este link podrá ser usado por cualquier persona, y si lo usa mientras el dueño sigue compartiendo el objeto, verá la siguiente página
+
+![Imagen de share3](/DocFiles/images/phase3/share3.png)
+
+## Pantalla de compartir objeto 4
+
+Pero si lo usa cuando el dueño ha dejado de compartir el objeto, verá lo siguiente
+
+![Imagen de share4](/DocFiles/images/phase3/share4.png)
+
+## Pantalla de favoritos 1
+
+Se ha añadido la opción de marcar objetos como favoritos para tenerlos siempre a mano en caso de tener muchos objetos, para agregar un objeto a favoritos, lo haremos desde la propia card del objeto, clicando en el corazón
+
+![Imagen de fav1](/DocFiles/images/phase3/fav1.png)
+
+## Pantalla de favoritos 2
+
+Una vez que el objeto está en favoritos, para mostrarlo simplemente debemos clicar en el filtro de favoritos, justo al lado del selector de disciplina
+
+![Imagen de fav2](/DocFiles/images/phase3/fav2.png)
+
+## Pantalla de dashboard de administrador 1
+
+También se ha añadido el dashboard de administrador, que será accesible desde su header
+
+![Imagen de dashboard1](/DocFiles/images/phase3/dashboard1.png)
+
+## Pantalla de dashboard de administrador 2
+
+Una vez aquí, tenemos varias pestañas, la de overview, donde se muestra un resumen general de la aplicación
+
+![Imagen de dashboard2](/DocFiles/images/phase3/dashboard2.png)
+
+## Pantalla de dashboard de administrador 3
+
+La de Usuarios, donde podemos ver unas estadísticas de usuarios, y la gestión de los usuarios por parte de los administradores
+
+![Imagen de dashboard3](/DocFiles/images/phase3/dashboard3.png)
+
+## Pantalla de dashboard de administrador 4
+
+La de Contenido, donde veremos unas estadísticas sobre el contenido de la aplicación y la creación de objetos y comentarios
+
+![Imagen de dashboard4](/DocFiles/images/phase3/dashboard4.png)
+
+## Pantalla de dashboard de administrador 5
+
+La de Actividad, donde veremos las estadísticas de creación de objetos en forma de gráfico de barras, con diferentes pestañas para "Semanal", "Mensual", y "Trimestral"
+
+![Imagen de dashboard5](/DocFiles/images/phase3/dashboard5.png)
+
+## Pantalla de dashboard de administrador 6
+
+La de Crecimiento, donde veremos el análisis de crecimiento para Usuarios, Objetos y Comentarios, comparando diferentes periodos de tiempo, con su respectivo periodo anterior
+
+![Imagen de dashboard6](/DocFiles/images/phase3/dashboard6.png)
+
+## Pantalla de dashboard de administrador 7
+
+La de Objetos, donde podemos ver los objetos de la aplicación, y la gestión de los objetos por parte de los administradores
+
+![Imagen de dashboard7](/DocFiles/images/phase3/dashboard7.png)
+
+## Pantalla de notificación de webSocket 1
+
+Si un usuario comparte un objeto, los administradores recibirán una notificación y el link al objeto, para poder ver y moderar que están compartiendo los usuarios
+
+![Imagen de websocket1](/DocFiles/images/phase3/websocket1.png)
+
+## Pantalla de notificación de webSocket 2
+
+Si clicamos, iremos al objeto
+
+![Imagen de websocket2](/DocFiles/images/phase3/websocket2.png)
+
+## 🗺️ Diagrama de Navegación
 
 Este diagrama muestra cómo se navega entre las diferentes páginas de la aplicación.
 
-![Imagen de wireframe](/DocFiles/images/phase2/wireframe.png)
+![Imagen de wireframe](/DocFiles/images/phase3/wireframe.png)

DocFiles/images/phase3/dashboard4.png

@@ -17,7 +17,7 @@ La aplicación LogArt se desarrolla usando un stack de tecnologías MERN, para m
 
 - [Blog LogArt: Un giro radical hacia el MERN Stack](https://medium.com/@davidmorenom17/logart-un-giro-radical-hacia-el-mern-stack-060ebde31bc5)
 
-Nota: Las versiones pueden no ser exactas
+Nota: Las versiones pueden no ser exactas debido al continuo desarrollo/actualización de las mismas
 
 ### Entorno de Desarrollo Backend
 
@@ -92,13 +92,13 @@ La aplicación React se inicia en modo desarrollo en http://localhost:5173
 
 Este diagrama muestra las clases de la aplicación y las relaciones entre ellas. (se han excluido clases como seeders o configuración de base de datos, .env, server, etc.)
 
-![Imagen de clasesBackend](/DocFiles/images/phase2/final.svg)
+![Imagen de clasesBackend](/DocFiles/images/phase3/final.drawio.svg)
 
 ## 📝 Diagrama de clases del frontend
 
 Este diagrama muestra las páginas y componentes de la aplicación, junto con archivos de contexto y utilidades. Tambien muestra las relaciones entre todos estos. (se han excluido cosas como tailwind, configuración de base de datos, .env, server, etc.)
 
-![Imagen de clasesSPA](/DocFiles/images/phase2/finalspa.svg)
+![Imagen de clasesSPA](/DocFiles/images/phase3/finalspa.drawio.png)
 
 ## Uso de la API REST en Desarrollo
 
@@ -179,30 +179,27 @@ Situarse en la carpeta raíz del proyecto
 cd 2024-logart/LogArtApp
 ```
 
-Construir la imagen con tag "dev"
+Construir la imagen con tag "latestManual" o cualquier otro
 
 ```
-docker build -t
-
-davidmorenoo/logartapp:dev -f
-docker/Dockerfile .
+docker build -t davidmorenoo/logartapp:latestManual -f docker/Dockerfile .
 ```
 
-### Ejecución con docker-compose-dev.yml
+### Ejecución con docker-compose.yml
 
 Navegar a la carpeta docker
 
 ```
 cd docker
 ```
 
-Ejecutar con docker-compose-dev.yml
+Ejecutar con docker-compose.yml
 
 ```
-docker compose -f docker-compose-dev.yml up
+docker compose up
 ```
 
-La aplicación estará disponible en https://localhost
+La aplicación estará disponible en https://localhost:8443
 
 ## Publicar una Release
 

DocFiles/images/phase3/dashboard5.png

@@ -36,7 +36,7 @@ Mode                 LastWriteTime         Length Name
 docker compose up
 ```
 
-- Ahora, tenemos acceso a la aplicación desde el navegador dirigiendonos a https://localhost
+- Ahora, tenemos acceso a la aplicación desde el navegador dirigiendonos a https://localhost:8443
 
 -Notas, al usar certificados SSL autofirmados, el navegador puede mostrar una advertencia de seguridad. Deberás clicar en "configuración avanzada" y en "Acceder a localhost (sitio no seguro)".