planetazuzu/codigo0
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity
codigo0/docs/consolidado/ANALISIS_TECNOLOGICO_PROYECTO.md

585 lines
16 KiB
Markdown
Raw Blame History

# 📊 Análisis Tecnológico Completo del Proyecto
**Proyecto:** EMERGES TES - Protocolo Rápido
**Fecha de Análisis:** 2025-12-23
**Ruta del Proyecto:** `/home/planetazuzu/guia-tes`
---
## 1. 🎯 TECNOLOGÍAS PRINCIPALES
### 1.1 Lenguaje de Programación
- **TypeScript 5.8.3** (lenguaje principal)
- Configuración: `tsconfig.json`, `tsconfig.app.json`, `tsconfig.node.json`
- Modo: ESNext modules, bundler mode
- JSX: `react-jsx`
- Target: ES2020 (app), ES2022 (node)
### 1.2 Framework Frontend
- **React 18.3.1** (framework principal)
- React DOM 18.3.1
- React Router DOM 6.30.1 (navegación SPA)
- React Hook Form 7.61.1 (formularios)
- React Markdown 10.1.0 (renderizado Markdown)
### 1.3 Herramientas de Build y Empaquetado
- **Vite 5.4.19** (build tool principal)
- Plugin: `@vitejs/plugin-react-swc` 3.11.0 (compilación rápida con SWC)
- Code splitting configurado (manual chunks)
- Soporte para PWA
- Configuración para GitHub Pages
### 1.4 Estilos y UI
- **Tailwind CSS 3.4.17** (framework CSS)
- Plugins:
- `tailwindcss-animate` 1.0.7
- `@tailwindcss/typography` 0.5.16
- PostCSS 8.5.6
- Autoprefixer 10.4.21
- **shadcn/ui** (sistema de componentes)
- Basado en Radix UI
- Componentes accesibles y personalizables
- 40+ componentes UI implementados
- **Radix UI** (primitivos UI accesibles)
- 30+ componentes @radix-ui/*
### 1.5 Procesamiento de Contenido
- **Markdown Processing:**
- `react-markdown` 10.1.0
- `remark-gfm` 4.0.1 (GitHub Flavored Markdown)
- `remark-frontmatter` 5.0.0
- `rehype-highlight` 7.0.2 (syntax highlighting)
- `rehype-raw` 7.0.0
- `rehype-sanitize` 6.0.0
- `unified` 11.0.5
### 1.6 Gestión de Estado y Datos
- **TanStack Query 5.83.0** (React Query)
- Gestión de estado del servidor
- Caché y sincronización
- **LocalStorage/SessionStorage**
- Favoritos (localStorage)
- Historial de búsqueda (sessionStorage)
- Configuración de tema
### 1.7 PWA (Progressive Web App)
- **Service Worker** (`public/sw.js`)
- Estrategia: Cache First
- Versionado de caché
- Actualizaciones automáticas
- **Web App Manifest** (`public/manifest.json`)
- Configuración PWA completa
- Iconos y temas
### 1.8 Utilidades y Librerías Clave
- **Validación:** Zod 3.25.76
- **Fechas:** date-fns 3.6.0
- **Iconos:** lucide-react 0.462.0
- **Temas:** next-themes 0.3.0
- **Notificaciones:** sonner 1.7.4
- **Gráficos:** recharts 2.15.4
- **Carousel:** embla-carousel-react 8.6.0
- **Comandos:** cmdk 1.1.1
- **Utilidades CSS:** clsx 2.1.1, tailwind-merge 2.6.0
---
## 2. 🏗️ ESTRUCTURA DEL PROYECTO
### 2.1 Tipo de Arquitectura
**SPA (Single Page Application)**
- Arquitectura: Frontend monolítico
- Routing: Client-side (React Router)
- Build: Estático (Vite)
- Despliegue: Archivos estáticos en `dist/`
### 2.2 Carpetas Principales
```
protocolo-r-pido/
├── .github/ # GitHub Actions workflows
│ └── workflows/
│ └── deploy.yml # Auto-deploy a servidor
├── public/ # Archivos estáticos públicos
│ ├── assets/ # Imágenes e infografías
│ │ └── infografias/ # Imágenes organizadas por bloque
│ ├── manual/ # Archivos Markdown del manual (78 archivos)
│ ├── manifest.json # PWA manifest
│ ├── sw.js # Service Worker
│ ├── favicon.svg # Favicon
│ └── robots.txt # SEO
├── src/ # Código fuente principal
│ ├── components/ # Componentes React
│ │ ├── content/ # MarkdownViewer
│ │ ├── drugs/ # Componentes de fármacos
│ │ ├── layout/ # Header, Footer, Navigation
│ │ ├── procedures/ # Protocolos
│ │ ├── tools/ # Calculadoras médicas
│ │ └── ui/ # Componentes shadcn/ui (40+)
│ ├── data/ # Datos estáticos TypeScript
│ │ ├── drugs.ts # Vademécum
│ │ ├── procedures.ts # Protocolos
│ │ ├── manual-index.ts # Índice del manual (2500+ líneas)
│ │ └── image-registry.ts # Registry de imágenes
│ ├── hooks/ # Custom React hooks
│ │ ├── useFavorites.ts
│ │ ├── usePWAInstall.ts
│ │ ├── useServiceWorker.ts
│ │ └── useSearchHistory.ts
│ ├── lib/ # Utilidades
│ │ └── utils.ts # Funciones helper
│ ├── pages/ # Páginas principales (20+)
│ ├── utils/ # Utilidades específicas
│ ├── App.tsx # Componente raíz
│ ├── main.tsx # Entry point
│ └── index.css # Estilos globales
├── scripts/ # Scripts Python y shell
│ ├── verificar-manual.ts # Verificación TypeScript
│ └── *.py # Scripts de organización
├── docs/ # Documentación
├── _BACKUP_MD/ # Backups (203 archivos)
├── imagenes-pendientes/ # Imágenes pendientes (60 archivos)
└── [Archivos de configuración]
```
### 2.3 Configuraciones Detectadas
**Build & Development:**
- `vite.config.ts` - Configuración Vite (code splitting, aliases, PWA)
- `tsconfig.json` - TypeScript base
- `tsconfig.app.json` - TypeScript para app
- `tsconfig.node.json` - TypeScript para Node (configs)
**Estilos:**
- `tailwind.config.ts` - Configuración Tailwind (tema, colores, animaciones)
- `postcss.config.js` - PostCSS (Tailwind + Autoprefixer)
**Linting:**
- `eslint.config.js` - ESLint 9.32.0 (flat config)
- `eslint-plugin-react-hooks` 5.2.0
- `eslint-plugin-react-refresh` 0.4.20
- `typescript-eslint` 8.38.0
**Deployment:**
- `ecosystem.config.js` - PM2 (puerto 8607)
- `deploy.sh` - Script de despliegue
- `webhook-deploy.sh` - Webhook handler
- `.github/workflows/deploy.yml` - GitHub Actions
- `vercel.json` - Configuración Vercel
- `netlify.toml` - Configuración Netlify
- `nginx.conf.example` - Ejemplo Nginx
- `public/_redirects` - Netlify redirects
- `public/.htaccess` - Apache config
**PWA:**
- `public/manifest.json` - Web App Manifest
- `public/sw.js` - Service Worker
- `vite-plugin-manifest.js` - Plugin personalizado
**UI Components:**
- `components.json` - Configuración shadcn/ui
---
## 3. 📦 DEPENDENCIAS
### 3.1 Gestión de Dependencias
- **Sistema:** npm (Node Package Manager)
- **Archivo:** `package.json`
- **Type:** `module` (ESM)
- **Node.js:** Requiere 18+
### 3.2 Dependencias de Producción (75 paquetes)
**Core:**
- react ^18.3.1
- react-dom ^18.3.1
- react-router-dom ^6.30.1
**UI Framework:**
- @radix-ui/* (30+ componentes)
- tailwindcss ^3.4.17
- tailwindcss-animate ^1.0.7
- @tailwindcss/typography ^0.5.16
**Markdown:**
- react-markdown ^10.1.0
- remark-gfm ^4.0.1
- remark-frontmatter ^5.0.0
- rehype-highlight ^7.0.2
- rehype-raw ^7.0.0
- rehype-sanitize ^6.0.0
- unified ^11.0.5
**State & Data:**
- @tanstack/react-query ^5.83.0
- react-hook-form ^7.61.1
- zod ^3.25.76
**Utilities:**
- date-fns ^3.6.0
- lucide-react ^0.462.0
- next-themes ^0.3.0
- sonner ^1.7.4
- clsx ^2.1.1
- tailwind-merge ^2.6.0
**Other:**
- recharts ^2.15.4
- embla-carousel-react ^8.6.0
- cmdk ^1.1.1
- vaul ^0.9.9
### 3.3 Dependencias de Desarrollo (15 paquetes)
**Build Tools:**
- vite ^5.4.19
- @vitejs/plugin-react-swc ^3.11.0
- typescript ^5.8.3
**Linting:**
- eslint ^9.32.0
- @eslint/js ^9.32.0
- typescript-eslint ^8.38.0
- eslint-plugin-react-hooks ^5.2.0
- eslint-plugin-react-refresh ^0.4.20
**CSS Processing:**
- tailwindcss ^3.4.17
- postcss ^8.5.6
- autoprefixer ^10.4.21
**Type Definitions:**
- @types/node ^22.16.5
- @types/react ^18.3.23
- @types/react-dom ^18.3.7
**Utilities:**
- tsx ^4.21.0 (TypeScript execution)
- raw-loader ^4.0.2
- globals ^15.15.0
### 3.4 Versiones de Herramientas
- **Node.js:** 18+ (recomendado)
- **npm:** Compatible con Node 18+
- **TypeScript:** 5.8.3
- **React:** 18.3.1
- **Vite:** 5.4.19
---
## 4. 🛠️ ENTORNO DE DESARROLLO
### 4.1 Archivos de Configuración de IDE
**VSCode:**
- `.vscode/extensions.json` (si existe)
- Configuración TypeScript en `tsconfig.json`
**Otros:**
- `.idea/` (ignorado en .gitignore)
- `.DS_Store` (ignorado)
### 4.2 Scripts de Ejecución
**package.json scripts:**
```json
{
"dev": "vite", // Desarrollo (puerto 8096)
"build": "vite build", // Build producción
"build:dev": "vite build --mode development",
"build:github": "GITHUB_PAGES=true ...", // Build para GitHub Pages
"build:production": "NODE_ENV=production vite build",
"preview": "vite preview --host", // Preview build
"start:production": "npx serve -s dist -l 8607", // Servir producción
"lint": "eslint .", // Linter
"verify:manual": "tsx scripts/verificar-manual.ts" // Verificación
}
```
**Scripts Shell:**
- `deploy.sh` - Deploy completo (git pull + build + PM2)
- `docker.sh` - Deploy con Docker
- `webhook-deploy.sh` - Handler webhook
### 4.3 Variables de Entorno
**Archivos:**
- `.env` (ignorado, no existe en repo)
- `.env.local` (ignorado)
- `.env.production` (ignorado)
- `.env.development` (ignorado)
- `env.example` (ejemplo, existe)
**Variables usadas:**
- `GITHUB_PAGES` - Para builds de GitHub Pages
- `GITHUB_REPOSITORY_NAME` - Nombre del repo
- `NODE_ENV` - Entorno (development/production)
- `BASE_URL` - Base path dinámico (Vite)
### 4.4 Configuración de Desarrollo
**Puertos:**
- Desarrollo: `8096` (vite.config.ts)
- Preview: `4173` (Vite default)
- Producción: `8607` (ecosystem.config.js, package.json)
**Hot Reload:**
- ✅ Habilitado en desarrollo (Vite HMR)
- ✅ Fast Refresh (React)
**Code Splitting:**
- ✅ Configurado en `vite.config.ts`
- ✅ Lazy loading de páginas (React.lazy)
- ✅ Manual chunks por librería
---
## 5. 📁 ESTRUCTURA DE ARCHIVOS ESPECÍFICA
### 5.1 Archivos de Configuración Raíz
```
├── package.json # Dependencias y scripts
├── vite.config.ts # Configuración Vite
├── tsconfig.json # TypeScript base
├── tsconfig.app.json # TypeScript app
├── tsconfig.node.json # TypeScript node
├── tailwind.config.ts # Tailwind CSS
├── postcss.config.js # PostCSS
├── eslint.config.js # ESLint
├── components.json # shadcn/ui config
├── ecosystem.config.js # PM2 config
├── deploy.sh # Script deploy
├── webhook-deploy.sh # Webhook handler
├── vercel.json # Vercel config
├── netlify.toml # Netlify config
├── nginx.conf.example # Nginx example
├── .gitignore # Git ignore
└── README.md # Documentación
```
### 5.2 Contenido Estático
**Markdown Manual:**
- `public/manual/` - 78 archivos .md organizados por bloques
- `MANUAL_TES_DIGITAL/` - 110 archivos .md (backup/alternativo)
**Imágenes:**
- `public/assets/infografias/` - 46+ imágenes PNG/SVG organizadas
- `imagenes-pendientes/` - 60 imágenes pendientes de organizar
**Otros:**
- `_BACKUP_MD/` - 203 archivos de backup (129 .md, 62 .docx, 7 .py)
### 5.3 Scripts y Utilidades
**Python Scripts:**
- `analisis_profundo_contenido.py`
- `buscar_multimedia_exhaustivo.py`
- `buscar_multimedia_faltante.py`
- `copiar_archivos_manual.py`
- `generar_documento_word.py`
- `generar_indice_app.py`
- `generar_reportes_app.py`
- `mejorar_reporte_1.py`
- `scripts/*.py` - Scripts de organización
**TypeScript Scripts:**
- `scripts/verificar-manual.ts` - Verificación de manual
**Shell Scripts:**
- `deploy.sh` - Deploy
- `docker.sh` - Deploy con Docker
- `webhook-deploy.sh` - Webhook
- `reorganizar_proyecto.sh` - Reorganización
---
## 6. 🔍 CARACTERÍSTICAS TÉCNICAS DETECTADAS
### 6.1 Arquitectura de Código
- ✅ **Component-based:** React components
- ✅ **Type-safe:** TypeScript en todo el código
- ✅ **Modular:** Separación clara de concerns
- ✅ **Lazy Loading:** React.lazy para páginas
- ✅ **Code Splitting:** Manual chunks en Vite
### 6.2 PWA Features
- ✅ Service Worker con versionado
- ✅ Web App Manifest completo
- ✅ Offline-first strategy
- ✅ Install banner
- ✅ Update notifications
### 6.3 Performance Optimizations
- ✅ Code splitting (manual chunks)
- ✅ Lazy loading de páginas
- ✅ Image lazy loading
- ✅ Memoization (React.memo, useMemo, useCallback)
- ✅ Optimización de INP (Interaction to Next Paint)
### 6.4 SEO y Accesibilidad
- ✅ Meta tags en index.html
- ✅ robots.txt
- ✅ Semantic HTML
- ✅ ARIA labels (Radix UI)
- ✅ Dark mode support
---
## 7. 📊 ESTADÍSTICAS DEL PROYECTO
### 7.1 Archivos por Tipo
- **TypeScript/TSX:** ~136 archivos en `src/`
- **Markdown:** 78 archivos en `public/manual/` + 110 en backup
- **Imágenes:** 46+ en `public/assets/` + 60 pendientes
- **Componentes UI:** 40+ componentes shadcn/ui
- **Páginas:** 20+ páginas React
- **Hooks:** 4 custom hooks
- **Data Files:** 12 archivos TypeScript de datos
### 7.2 Líneas de Código (estimado)
- `src/data/manual-index.ts`: 2500+ líneas
- `src/App.tsx`: ~130 líneas
- `vite.config.ts`: ~168 líneas
- Total TypeScript/TSX: ~15,000+ líneas (estimado)
### 7.3 Dependencias
- **Producción:** 75 paquetes
- **Desarrollo:** 15 paquetes
- **Total:** 90 paquetes npm
---
## 8. 🚀 DESPLIEGUE Y CI/CD
### 8.1 Plataformas de Despliegue Configuradas
1. **Servidor Propio (PM2)**
- Puerto: 8607
- Script: `deploy.sh`
- Config: `ecosystem.config.js`
2. **GitHub Actions**
- Workflow: `.github/workflows/deploy.yml`
- Auto-deploy en push a main
3. **Vercel**
- Config: `vercel.json`
- SPA routing configurado
4. **Netlify**
- Config: `netlify.toml`
- Redirects: `public/_redirects`
5. **GitHub Pages**
- Build script: `build:github`
- Base path dinámico
6. **Apache**
- Config: `public/.htaccess`
- SPA routing
7. **Nginx**
- Example: `nginx.conf.example`
- Reverse proxy
### 8.2 Estrategias de Despliegue
- ✅ **Static Build:** `dist/` con archivos estáticos
- ✅ **SPA Routing:** Configurado para todas las plataformas
- ✅ **Auto-deploy:** GitHub Actions
- ✅ **Manual Deploy:** Scripts shell
---
## 9. 📝 DOCUMENTACIÓN
### 9.1 Archivos de Documentación (40+ archivos .md)
**Despliegue:**
- `DEPLOYMENT_SERVER.md`
- `DEPLOYMENT_GITHUB.md`
- `VERCEL_DEPLOYMENT.md`
- `RESUMEN_DEPLOY_8607.md`
**PWA:**
- `VERIFICACION_PWA.md`
- `TEST_PWA.md`
- `CHECKLIST_PWA_COMPLETA.md`
- `GUIA_DEBUG_PWA_INSTALL.md`
- `RESUMEN_PWA_INSTALACION.md`
**Contenido:**
- `FASE_1_FALTANTE_DETALLADO.md`
- `ANALISIS_COMPLETO_FALTANTE.md`
- `SISTEMA_MEDIOS_VISUALES.md`
- `PLAN_ESTRUCTURA_PSIQUIATRIA.md`
**Otros:**
- `README.md`
- `ESTADO_FUNCIONALIDADES.md`
- `SPA_ROUTING_CONFIG.md`
- Y muchos más...
---
## 10. ✅ RESUMEN EJECUTIVO
### Stack Tecnológico Principal
```
Frontend: React 18 + TypeScript 5.8
Build: Vite 5.4
Styling: Tailwind CSS 3.4 + shadcn/ui
Routing: React Router 6.3
State: TanStack Query 5.8 + LocalStorage
PWA: Service Worker + Manifest
Markdown: react-markdown + remark/rehype
Deploy: PM2 (puerto 8607) + GitHub Actions
```
### Tipo de Proyecto
- **Aplicación:** SPA (Single Page Application)
- **Arquitectura:** Frontend monolítico
- **Build:** Estático (archivos estáticos)
- **Target:** PWA offline-first
- **Uso:** Médico/emergencias (crítico)
### Puntos Clave para Limpieza
1. **Backups:** `_BACKUP_MD/` (203 archivos) - considerar mover/eliminar
2. **Imágenes pendientes:** `imagenes-pendientes/` (60 archivos)
3. **Documentación:** 40+ archivos .md (algunos pueden consolidarse)
4. **Scripts Python:** 10+ scripts (algunos pueden estar obsoletos)
5. **Configuraciones múltiples:** 7 plataformas de deploy (mantener solo las usadas)
---
**Análisis completado:** 2025-12-23
**Próximo paso:** Identificar archivos obsoletos y redundantes para limpieza
Reference in a new issue View git blame Copy permalink