👿 BossFlow ⚔

CI/CD

Descripción

BossFlow es una aplicación web que permite a los jugadores crear, compartir y gestionar diagramas de flujo interactivos con estrategias para derrotar jefes finales (bosses) en videojuegos. La plataforma facilita la colaboración entre gamers, permitiendo documentar de forma visual y estructurada las mecánicas, patrones de ataque, fases de combate y estrategias óptimas para superar los desafíos más difíciles de sus juegos favoritos.

La aplicación combina un editor de diagramas intuitivo con funcionalidades sociales, permitiendo a los usuarios registrarse, crear diagramas personalizados con diferentes tipos de nodos (información, acción, decisión, fase), gestionar sus estrategias y compartirlas con la comunidad. Los usuarios pueden exportar sus diagramas en formato JSON o como imágenes, facilitando el intercambio de conocimiento y la mejora colaborativa de estrategias.

BossFlow resuelve el problema de la fragmentación de información sobre estrategias de videojuegos, ofreciendo una herramienta centralizada y visual que sustituye las guías de texto estático por diagramas interactivos y fáciles de seguir durante las partidas. Ideal para comunidades de jugadores que buscan optimizar su rendimiento y compartir tácticas efectivas de forma clara y accesible.

Índice

• Tecnologías utilizadas
• Características principales
• Enlace a la aplicación desplegada
• Capturas de pantalla
• Instalación y ejecución
• Despliegue y demo
• Cómo contribuir
• Contacto
• Información del equipo
• License
• Documentación adicional

Tecnologías utilizadas

BossFlow está construido sobre el stack MERN como base (MongoDB, Express, React, Node). El enfoque MERN ofrece: MongoDB para el almacenamiento de datos, Express y Node.js para la API backend y React para la interfaz. Dentro se usan herramientas y librerías que facilitan el desarrollo, el despliegue y la experiencia de usuario.

MERN (stack principal)

• MongoDB: base de datos NoSQL que almacena usuarios, diagramas y metadatos.
• Express: framework minimalista para la API REST del backend.
• React: biblioteca para construir la interfaz (frontend) y manejar el estado y la navegación.
• Node.js: runtime que ejecuta el servidor backend.

Frontend

• Vite: bundler y dev server para React (rápido y moderno).
• React Flow: editor de diagramas (lienzo con nodos y conexiones).
• react-router-dom: enrutado del frontend.
• axios: cliente HTTP para comunicarse con la API.
• react-icons: iconos usados en la interfaz.

Backend

• mongoose: ODM para modelar y validar documentos en MongoDB.
• express: manejo de rutas, middleware y controladores.
• jsonwebtoken / JWT: autenticación basada en tokens.

DevOps / Infra

• Docker: contenedores para aislar frontend y backend.
• Docker Compose: orquestación local y despliegue del stack.
• nginx: proxy y servidor estático (configuración en frontend/nginx.conf).

Autenticación y seguridad

• JWT (JSON Web Tokens): gestión de sesiones y rutas protegidas.
• Buenas prácticas: variables de entorno para secretos y URIs.

Tests

• Tests automatizados en backend/tests (comprobaciones de endpoints, validaciones y flujos principales).

Características principales

• Editor visual de diagramas con soporte para nodos personalizados y arrastrar/soltar.
• CRUD completo de diagramas (crear, editar, eliminar, leer).
• Gestión de usuarios y autenticación por JWT (registro/login/protected routes).
• Dashboard completo para moder gestionar los diagramas.
• Exportación de diagramas en formato PNG.
• Exportación / importación de diagramas en JSON.
• Soporte para subir imágenes asociadas a nodos.
• Sistema de plantillas reutilizables.

Enlace a la aplicación desplegada

https://bossflow.app/

Capturas de pantalla

1. Al acceder a la aplicación (home y banner):

2. Pantalla de registro:

3. Polica de privacidad (vista a página políticas):

4. Modal para crear diagrama:

5. Editor:

6. Modal de exportación de diagramas:

7. Modal de importación de diagramas:

8. Vista Dashboard:

9. Perfil de usuario:

10. Modal eliminación de cuenta:

Instalación y ejecución

Requisitos previos:

• Node.js 18+ y npm (solo para desarrollo local).
• Docker y docker-compose (recomendado para despliegue o para levantar todo el stack fácilmente).

1. Clonar el repositorio

git clone https://github.com/GunterMagno/BossFlow.git
cd BossFlow

2.1 Desarrollo local (sin Docker)

• Backend:

cd backend
npm install
# configurar variables de entorno (ver sección variables de entorno)
npm run dev

• Frontend:

cd frontend
npm install
npm run dev

2.2 Levantar con Docker Compose (modo desarrollo)

docker compose -f docker-compose.dev.yml up --build

2.3 Levantar con Docker Compose (modo desarrollo)

docker compose -f docker-compose.prod.yml up --build -d

Variables de entorno (ejemplos)

Backend (archivo .env en backend/):

MONGO_URI=mongodb://mongo:27017/bossflow
JWT_SECRET=tu_secreto_jwt
PORT=4000

Frontend (archivo .env en frontend/ o en tu entorno):

VITE_API_URL=http://localhost:4000/api

Enlaces despliegue y demo

Enlace al despliegue: Despliegue de la aplicación - Documentación de despliegue.

Enlace a la demo de la aplicación: https://youtu.be/gMY0KOfktd0

Cómo contribuir

¡BossFlow es un proyecto de código abierto y nos encanta recibir contribuciones! Ya sea que quieras corregir un error, añadir un nuevo tipo de nodo al editor o mejorar la documentación, tu ayuda es bienvenida.

Para mantener la calidad y consistencia del proyecto, hemos preparado una guía detallada:

Consulta nuestra Guía de Contribución completa aquí

Contacto

Para dudas o colaboración abre un Issue o contacta al creador del repositorio.

Información del equipo

• Alejandro Borrego Cruz - Perfil Github
• Jesús López Pérez - Perfil Github
• Daniel Montes Iglesias - Perfil Github

License

Este proyecto está licenciado bajo MIT, los términos están descritos en el archivo LICENSE.

Documentación adicional

La documentación adicional se encuentra en ./docs.

Enlace a la WIKI

👉 Ver índice completo de documentación

La carpeta docs/ contiene la documentación técnica y de proyecto organizada por áreas.