🎓 LearnGitBranching

¡Bienvenido a LearnGitBranching! Esta es la herramienta web interactiva más visual, didáctica y aclamada para aprender y dominar los conceptos de Git. Mediante una representación gráfica en tiempo real y una terminal simulada, los usuarios pueden aprender desde los conceptos más básicos (como hacer commits y ramas) hasta flujos de trabajo avanzados y complejos (como rebase interactivo, cherry-picking y gestión de repositorios remotos).

El objetivo principal de este proyecto es ayudar a desarrolladores de todos los niveles a perder el miedo a la línea de comandos de Git a través del juego, desafíos guiados y una potente visualización del grafo de commits.

---

🚀 Características Principales

• Simulador Visual en Tiempo Real: Cada comando de Git que introduces en la terminal simulada se dibuja instantáneamente en un grafo interactivo de commits, ramas y etiquetas.
• Niveles Educativos Guiados: Una amplia colección de niveles estructurados por dificultad que guían al usuario paso a paso con explicaciones detalladas y retos específicos.
• Modo Sandbox: Un entorno libre donde los desarrolladores pueden experimentar con comandos complejos de Git sin temor a romper un repositorio real.
• Soporte Multilingüe: Preparado para ser traducido a múltiples idiomas mediante un sistema de plantillas de traducción dinámicas.
• Despliegue Rápido y Ligero: Construido sobre tecnologías web modernas para garantizar una carga instantánea y una experiencia de usuario fluida.

---

🛠️ Tecnologías y Librerías Utilizadas

El proyecto combina la potencia de librerías clásicas de manipulación gráfica y desarrollo ágil con frameworks modernos:

• Frontend Core: React (v17) para la estructura de la interfaz de usuario y jQuery / jQuery-UI para la interactividad de las ventanas flotantes y la terminal.
• Motor Gráfico: Raphael para la generación y animación dinámica de los nodos, ramas y elementos vectoriales SVG que representan el repositorio Git.
• Entorno de Desarrollo y Empaquetado:
  • Vite para el servidor de desarrollo rápido y HMR (Hot Module Replacement).
  • Gulp para la automatización de tareas de compilación clásicas (fastBuild), empaquetado y tests.
  • Browserify y Babel para la transpiliación de código Javascript ES6+.
• Lector de Markdown: Marked para renderizar las instrucciones de los niveles formateadas en Markdown.
• Pruebas unitarias: Jasmine junto con nyc para la cobertura de código.

---

📂 Estructura de Carpetas

A continuación se detalla la organización de los componentes clave dentro del repositorio:

.
├── .github/                     # Configuraciones de integración continua
├── generatedDocs/               # Documentación estática de los niveles generados
├── scripts/                     # Scripts de utilidad (extracción e importación de traducciones)
├── src/                         # Código fuente de la aplicación
│   ├── levels/                  # Definición y lógica de los niveles interactivos
│   │   ├── intro/               # Conceptos básicos (commits, branches, merge, rebase)
│   │   ├── rampup/              # Referencias relativas, checkout, reversión de cambios
│   │   ├── mixed/               # Malabarismos con commits, tags, describir commits
│   │   ├── rebase/              # Rebase avanzado y selectivo
│   │   ├── remote/              # Conceptos de repositorios remotos (push, pull, fetch, etc.)
│   │   └── index.js             # Punto de entrada y registro de todos los niveles
│   ├── template.index.html      # Plantilla base HTML de la aplicación
│   └── ...                      # Componentes React, hojas de estilo y lógicas del motor de Git
├── Dockerfile                   # Configuración de contenedorización para producción
├── nginx.conf                   # Servidor web Nginx optimizado para la SPA
├── package.json                 # Dependencias y scripts de construcción
└── yarn.lock                    # Bloqueo de versiones de dependencias (Yarn de uso obligatorio)

---

💻 Instalación y Ejecución Local

Requisitos Previos

• Node.js (Versión 20 recomendada)
• Yarn (Gestor de paquetes obligatorio para este repositorio)

⚠️ Importante: Este proyecto tiene un control estricto que impide el uso de npm install. Debes utilizar exclusivamente yarn.

Pasos para Configurar el Proyecto

1. Clonar el repositorio:

   git clone https://github.com/tu-usuario/learngitbranching.git
   cd learngitbranching
   

2. Instalar dependencias:

   yarn install
   

3. Iniciar el servidor de desarrollo (Vite):

   yarn dev
   

   Abre tu navegador en http://localhost:5173 para interactuar con la aplicación localmente con recarga rápida.

4. Compilar y construir para producción:

   yarn prepare
   

   Este comando ejecuta las tareas de Gulp necesarias para generar los bundles optimizados.

5. Ejecutar pruebas unitarias:

   yarn test
   

Ejecución mediante Docker 🐳

Si prefieres levantar el entorno utilizando contenedores, puedes construir la imagen que compila la aplicación y la sirve a través de un servidor Nginx ligero:

# Construir la imagen Docker
docker build -t learngitbranching .

# Levantar el contenedor en el puerto 8080
docker run -d -p 8080:80 learngitbranching

Accede a la aplicación en http://localhost:8080.

---

⚙️ Gobernanza e Integración de Calidad

Para mantener la excelencia técnica en cada contribución, este repositorio integra herramientas de validación que aseguran la robustez y calidad del software:

• Biome & Lefthook: El formateo y análisis estático del código están automatizados mediante Biome (biome.json), gestionado a través de hooks de pre-commit provistos por Lefthook para evitar la subida de código mal formateado.
• Gatekeeper "No-Mistakes": Control de calidad estricto implementado mediante .no-mistakes.yaml y scripts de validación locales (checkgit.sh) que previenen commits accidentales o que violen las directrices de contribución.
• Auditoría de Seguridad (Bumblebee): Contamos con auditorías de seguridad periódicas localmente a través de herramientas de escaneo estático para mantener las dependencias y el código libres de vulnerabilidades conocidas.

Si deseas contribuir traduciendo niveles o añadiendo nuevas funcionalidades, consulta los archivos CONTRIBUTING.md y TRANSLATING.md para conocer el flujo de trabajo del equipo.

---

Megacore - Automatizando y estandarizando la calidad del software en Megasoft.