🗺️ MapsReconstruct

Una aplicación web moderna que permite reconstruir código fuente original a partir de archivos Source Map (.js.map), ideal para recuperar proyectos perdidos o analizar aplicaciones compiladas.

🌟 Características

• 🔍 Reconstrucción automática: Extrae y reconstruye archivos fuente originales desde source maps
• 📁 Gestión de proyectos: Organiza y almacena múltiples proyectos reconstruidos
• 🎨 Interfaz moderna: UI elegante con Material-UI y tema oscuro
• 📋 Visualizador de código: Syntax highlighting con Prism.js para múltiples lenguajes
• 🏷️ Sistema de etiquetas: Organiza proyectos con etiquetas personalizadas
• 🔍 Búsqueda y filtros: Encuentra proyectos y archivos rápidamente
• 📊 Estadísticas detalladas: Métricas sobre archivos recuperados por carpeta
• 💾 Base de datos SQLite: Almacenamiento local persistente

🛠️ Tecnologías Utilizadas

Backend

• Node.js + Express.js - Servidor web
• SQLite3 - Base de datos
• source-map - Procesamiento de source maps
• Multer - Upload de archivos
• CORS - Cross-origin resource sharing

Frontend

• React - Biblioteca de UI
• Material-UI (MUI) - Componentes de interfaz
• Prism.js - Syntax highlighting
• MUI X Tree View - Navegador de archivos tipo árbol

🚀 Instalación y Configuración

Prerrequisitos

• Node.js (v16 o superior)
• npm o yarn

1. Clonar el repositorio

git clone https://github.com/raa2015/MapsReconstruct.git
cd MapsReconstruct

2. Configurar el Backend

cd backend
npm install

3. Configurar el Frontend

cd ../frontend
npm install

🎯 Uso

Iniciar la aplicación

Opción 1: Desarrollo separado

# Terminal 1 - Backend
cd backend
npm run dev

# Terminal 2 - Frontend
cd frontend
npm start

Opción 2: Producción

# Backend
cd backend
npm start

Acceso

• Frontend: http://localhost:3000
• Backend API: http://localhost:4000

📖 Guía de Uso

1. Crear un Nuevo Proyecto

1. Ve a la pestaña "Nuevo Proyecto"
2. Ingresa un nombre y descripción
3. Añade etiquetas (opcional)
4. Sube uno o más archivos .js.map
5. Haz clic en "Procesar Archivos"

2. Explorar Proyectos

1. Ve a la pestaña "Mis Proyectos"
2. Navega por la lista o usa la búsqueda
3. Haz clic en un proyecto para ver detalles
4. Explora la estructura de archivos recuperados

3. Visualizar Código

1. Dentro de un proyecto, navega por el árbol de archivos
2. Haz clic en cualquier archivo para ver su contenido
3. El código se mostrará con syntax highlighting automático
4. Usa el botón "Copiar" para copiar el contenido

🗂️ Estructura del Proyecto

MapsReconstruct/
├── backend/                    # Servidor Node.js
│   ├── src/
│   │   ├── server.js          # Servidor Express principal
│   │   └── reconstruct.js     # Lógica de reconstrucción
│   ├── maps/                  # Source maps cargados
│   ├── recovered_projects/    # Proyectos reconstruidos
│   ├── projects.sqlite        # Base de datos
│   └── package.json
├── frontend/                  # Aplicación React
│   ├── src/
│   │   ├── App.js            # Componente principal
│   │   └── ...
│   └── package.json
└── README.md

🔧 API Endpoints

Proyectos

• GET /proyectos - Listar todos los proyectos
• POST /proyectos - Crear nuevo proyecto (multipart/form-data)
• GET /proyectos/:id - Obtener detalles de un proyecto
• DELETE /proyectos/:id - Eliminar proyecto

Archivos

• GET /proyectos/:id/archivo?ruta=<path> - Obtener contenido de archivo

🎨 Características de la UI

• Tema oscuro moderno con colores personalizados
• Animaciones fluidas y transiciones suaves
• Responsive design para diferentes dispositivos
• Tree view interactivo para navegación de archivos
• Syntax highlighting para 20+ lenguajes de programación
• Notificaciones con feedback visual
• Sistema de filtros y búsqueda en tiempo real

🧪 Casos de Uso

✅ Ideal para:

• Recuperación de proyectos perdidos cuando solo tienes los bundles
• Análisis de aplicaciones compiladas o minificadas
• Auditoría de código en aplicaciones web
• Educación y investigación sobre bundling y source maps
• Backup y archivo de código fuente

⚠️ Limitaciones:

• Requiere source maps válidos y completos
• La calidad de reconstrucción depende del bundler usado
• Algunos archivos pueden no recuperarse si faltan en el source map

🤝 Contribuir

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📝 Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.

🆘 Soporte

Si encuentras algún problema o tienes preguntas:

1. Revisa los Issues existentes
2. Crea un nuevo issue con detalles del problema
3. Incluye los source maps de ejemplo si es posible

🚧 Próximas Características

• Export de proyectos como ZIP
• Soporte para más tipos de source maps
• Integración con Git
• Comparación entre versiones
• Métricas avanzadas de código
• Plugin para navegadores

---

⭐ Si este proyecto te resultó útil, no olvides darle una estrella!