EVORIX - Nmap Learning Lab

 Simulador interactivo para aprender Nmap desde cero

Nmap Learning Lab es un simulador web interactivo para aprender los fundamentos de Nmap sin ejecutar escaneos reales. Incluye lecciones guiadas, escenarios de práctica, exámenes, sistema de progreso y logros, todo con interfaz tipo terminal hacker. Desarrollado con React, TypeScript, Vite y desplegado en GitHub Pages.

¿Qué es Nmap Learning Lab?

Es una aplicación web tipo “laboratorio virtual” donde el usuario puede aprender los conceptos básicos de Nmap de forma guiada, segura y gamificada.
No ejecuta Nmap real: funciona como simulador educativo para entender comandos, sintaxis y escenarios típicos de ciberseguridad.

La app está organizada en:

• Dashboard: resumen de progreso, lecciones completadas, escenarios y exámenes.

• Aprender: lecciones teóricas sobre Nmap, sintaxis básica, tipos de escaneo, banderas, etc.

• Practicar: escenarios tipo “casos reales” donde el usuario interpreta salidas simuladas de Nmap.

• Exámenes: evaluaciones de nivel básico e intermedio.

• Logros: sistema de “achievements” que reconoce el avance del estudiante.

• Acerca de: explicación del propósito del proyecto y uso ético.

---

Tecnologías utilizadas

Frontend

• React + TypeScript (componentes reutilizables y tipados estrictos)

• Vite (bundler rápido para desarrollo y build)

• Tailwind CSS (estilos en modo dark / terminal verde)

• React Router (navegación entre Dashboard, lecciones, exámenes, etc.)

Herramientas de desarrollo

• Git + GitHub (control de versiones)

• GitHub Pages (deploy estático del sitio)

• Node.js + npm (manejo de dependencias y scripts de build)

---

Cómo se construyó (flujo técnico)

1. Inicialización del proyecto

   • Creación de app con Vite + React + TypeScript.

   • Configuración de Tailwind para el tema oscuro tipo terminal.

2. Arquitectura de la app

   • Páginas principales: Dashboard, Learn, Practice, Exams, Achievements, About.

   • Componentes reutilizables para tarjetas de progreso, logros, paneles y layout.

3. Lógica de aprendizaje

   • Configuración de lecciones y escenarios mediante objetos en TypeScript.

   • Sistema de exámenes con preguntas, respuestas y feedback inmediato.

   • Cálculo de progreso general (lecciones, escenarios, exámenes).

4. Gamificación

   • Definición de logros (completar todas las lecciones, pasar exámenes, etc.).

   • Resumen visual del progreso en el Dashboard y sección de Logros.

5. Deploy

   • Configuración de vite.config.ts con base: '/nmap-learn/' y outDir: 'docs'.

   • Build con npm run build.

   • Deploy en GitHub Pages usando la carpeta docs/ desde la rama main.

---

Qué aprendí con este proyecto

• Frontend serio con React + TypeScript
  Tipar componentes, props y lógica de estado para evitar errores y tener un código más mantenible.

• Organización de un proyecto educativo
  Convertir contenido técnico (Nmap) en lecciones, preguntas, escenarios y logros claros para principiantes.

• Uso real de Git y GitHub
  Inicializar repositorio, hacer commits limpios, configurar remoto y subir cambios de forma ordenada.

• Deploy profesional con GitHub Pages
  Entender cómo funciona el build de Vite, configurar rutas (base) y servir el proyecto como sitio estático.

• Manejo de errores y configuración del entorno
  Resolver problemas con Node, npm, políticas de PowerShell, TypeScript estricto y configuración de Vite.

---

Pendientes y mejoras futuras 

🔹 Base de datos / backend ligero

• Persistir:

  • Progreso del usuario

  • Lecciones completadas

  • Exámenes aprobados

  • Logros desbloqueados

• Posibles opciones:

  • Firebase / Supabase (BaaS rápido)

  • API propia sencilla con Node + Express + alguna DB (PostgreSQL, MongoDB, etc.)

  • Autenticación básica para que cada usuario tenga su perfil de avances.

🔹 Panel de administración

• Sección para agregar nuevas lecciones, preguntas y escenarios sin tocar código.

🔹 Modo “laboratorio avanzado”

• Integrar, a futuro, ejemplos reales controlados (capturas, salidas reales de Nmap) sin ejecutar Nmap en el navegador.

---

• 🔗 Demo: https://erickddp.github.io/nmap-learn/

• 🔗 Código: https://github.com/Erickddp/nmap-learn

-

-