codigo0/docs/ANALISIS_STACK_TECNOLOGICO.md

# 🔍 Análisis del Stack Tecnológico - EMERGES TES

**Fecha:** 2026-01-15  
**Tipo:** Análisis READ-ONLY  
**Método:** Evidencia basada en archivos del repositorio

---

## 1) FRONTEND FRAMEWORK

### ✅ **Vite + React**

**Evidencia:**

1. **package.json:**
   ```json
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "devDependencies": {
     "vite": "^7.3.1",
     "@vitejs/plugin-react-swc": "^4.2.2"
   }
   ```

2. **vite.config.ts:**
   - Archivo de configuración presente
   - Usa `@vitejs/plugin-react-swc` para React
   - Configuración de build, code splitting, y optimizaciones

3. **index.html:**
   - Punto de entrada: `<script type="module" src="/src/main.tsx"></script>`
   - Estructura típica de Vite (no Next.js)

4. **Estructura de archivos:**
   - `src/` como directorio principal (no `app/` ni `pages/` de Next.js)
   - No hay `next.config.js` ni `pages/` directory

5. **Dependencias:**
   ```json
   "react": "^19.2.3",
   "react-dom": "^19.2.3"
   ```

**Conclusión:** **Vite 7.3.1** con **React 19.2.3**, usando **@vitejs/plugin-react-swc** para compilación rápida.

---

## 2) LANGUAGE

### ✅ **TypeScript**

**Evidencia:**

1. **tsconfig.json:**
   - Archivo presente en raíz
   - Referencias a `tsconfig.app.json` y `tsconfig.node.json`

2. **tsconfig.app.json:**
   - Configuración específica para aplicación

3. **Extensiones de archivos:**
   - Archivos principales: `.tsx` y `.ts`
   - `src/App.tsx`, `src/main.tsx`, `vite.config.ts`
   - Todos los componentes en `src/components/` son `.tsx`

4. **package.json:**
   ```json
   "devDependencies": {
     "typescript": "^5.8.3",
     "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@types/node": "^22.16.5"
   }
   ```

5. **Imports con extensiones .ts/.tsx:**
   - `import App from "./App.tsx"`
   - `import { defineConfig } from "vite"`

**Conclusión:** **TypeScript 5.8.3** - Proyecto completamente tipado.

---

## 3) ROUTING SYSTEM

### ✅ **react-router-dom v6**

**Evidencia:**

1. **package.json:**
   ```json
   "dependencies": {
     "react-router-dom": "^6.30.1"
   }
   ```

2. **src/App.tsx:**
   ```typescript
   import { BrowserRouter, Routes, Route } from "react-router-dom";
   
   <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="/rcp" element={<RCP />} />
       ...
     </Routes>
   </BrowserRouter>
   ```

3. **Estructura de rutas:**
   - No hay directorio `/app` (Next.js App Router)
   - No hay directorio `/pages` (Next.js Pages Router)
   - Rutas definidas en `App.tsx` con componentes lazy-loaded

4. **Uso de hooks de routing:**
   - `useNavigate`, `useLocation`, `useParams` encontrados en componentes
   - `NavLink` usado en `BottomNav.tsx`

5. **Configuración Vite para SPA:**
   ```typescript
   // vite.config.ts
   server: {
     // SPA fallback: todas las rutas no encontradas redirigen a index.html
   }
   ```

**Conclusión:** **react-router-dom v6.30.1** con **BrowserRouter** (SPA routing, no Next.js).

---

## 4) STYLING SOLUTION

### ✅ **Tailwind CSS**

**Evidencia:**

1. **package.json:**
   ```json
   "devDependencies": {
     "tailwindcss": "^3.4.17",
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.6",
     "@tailwindcss/typography": "^0.5.16"
   },
   "dependencies": {
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   }
   ```

2. **tailwind.config.ts:**
   - Archivo de configuración presente
   - Plugins: `tailwindcss-animate`, `@tailwindcss/typography`
   - Configuración de temas, colores personalizados, breakpoints

3. **postcss.config.js:**
   - Configuración de PostCSS presente (requerido por Tailwind)

4. **src/index.css:**
   - `@tailwind base;`
   - `@tailwind components;`
   - `@tailwind utilities;`

5. **Uso en componentes:**
   - Clases Tailwind en todos los componentes: `className="flex items-center gap-4 p-4 bg-card..."`
   - No hay archivos `.module.css` ni `styled-components`

6. **Radix UI + Tailwind:**
   - Componentes de `@radix-ui` estilizados con Tailwind
   - Sistema de diseño basado en variables CSS + Tailwind

**Conclusión:** **Tailwind CSS 3.4.17** como solución principal de estilos, con **Radix UI** para componentes accesibles.

---

## 5) STATE MANAGEMENT

### ✅ **TanStack Query (React Query) + React Context + Local State**

**Evidencia:**

1. **TanStack Query (React Query):**
   ```json
   "dependencies": {
     "@tanstack/react-query": "^5.83.0"
   }
   ```
   
   **src/App.tsx:**
   ```typescript
   import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
   
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
         staleTime: 5 * 60 * 1000,
         gcTime: 10 * 60 * 1000,
         refetchOnWindowFocus: false,
         retry: 1,
       },
     },
   });
   ```

2. **React Context:**
   - `ThemeProvider` de `next-themes` (context para temas)
   - `TooltipProvider` de Radix UI
   - No se encontró uso extensivo de Context API propio

3. **Local Component State:**
   - `useState` usado extensivamente en componentes
   - Hooks personalizados: `useSearchHistory`, `useDebounce`, `useRoutePrefetch`

4. **NO se encontró:**
   - Redux / Redux Toolkit
   - Zustand
   - MobX
   - Jotai
   - Recoil

**Conclusión:** **TanStack Query v5.83.0** para gestión de estado del servidor/caché, **React Context** para temas, y **local state** (useState) para estado de UI.

---

## 6) UI COMPONENT LIBRARY

### ✅ **Radix UI + shadcn/ui Pattern**

**Evidencia:**

1. **Radix UI (Base accesible):**
   ```json
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toast": "^1.2.14",
     // ... 20+ componentes Radix UI
   }
   ```

2. **shadcn/ui Pattern:**
   - `components.json` presente (configuración de shadcn/ui)
   - Componentes en `src/components/ui/` estilizados con Tailwind
   - Patrón: Radix UI (lógica) + Tailwind (estilos)

3. **Componentes UI encontrados:**
   - `button.tsx`, `card.tsx`, `dialog.tsx`, `toast.tsx`, `tabs.tsx`, etc.
   - Todos en `src/components/ui/` con estilos Tailwind

**Conclusión:** **Radix UI** como base accesible + **shadcn/ui pattern** (componentes estilizados con Tailwind).

---

## 7) FORM HANDLING

### ✅ **react-hook-form + Zod**

**Evidencia:**

1. **package.json:**
   ```json
   "dependencies": {
     "react-hook-form": "^7.61.1",
     "zod": "^3.25.76"
   }
   ```

2. **Uso esperado:**
   - `react-hook-form` para manejo de formularios
   - `zod` para validación de esquemas
   - Patrón común: react-hook-form + zod resolver

**Conclusión:** **react-hook-form v7.61.1** + **Zod v3.25.76** para formularios y validación.

---

## 8) MARKDOWN PROCESSING

### ✅ **react-markdown + remark/rehype ecosystem**

**Evidencia:**

1. **package.json:**
   ```json
   "dependencies": {
     "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"
   }
   ```

2. **Uso en componentes:**
   - `MarkdownViewer.tsx` usa `react-markdown` con plugins
   - Procesamiento de archivos `.md` desde `public/manual/`

**Conclusión:** **react-markdown** con ecosistema **remark/rehype** para procesamiento de Markdown.

---

## 9) TESTING FRAMEWORK

### ✅ **Vitest**

**Evidencia:**

1. **package.json:**
   ```json
   "scripts": {
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:watch": "vitest --watch"
   },
   "devDependencies": {
     "vitest": "^4.0.17",
     "@vitest/ui": "^4.0.17",
     "@vitest/coverage-v8": "^4.0.17",
     "@testing-library/react": "^16.3.1",
     "@testing-library/jest-dom": "^6.9.1"
   }
   ```

2. **vite.config.ts:**
   ```typescript
   test: {
     globals: true,
     environment: 'jsdom',
     setupFiles: ['./src/test/setup.ts'],
   }
   ```

**Conclusión:** **Vitest v4.0.17** con **Testing Library** para testing.

---

## 10) THEME MANAGEMENT

### ✅ **next-themes**

**Evidencia:**

1. **package.json:**
   ```json
   "dependencies": {
     "next-themes": "^0.3.0"
   }
   ```

2. **src/App.tsx:**
   ```typescript
   import { ThemeProvider } from "next-themes";
   
   <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
   ```

**Conclusión:** **next-themes v0.3.0** para gestión de temas claro/oscuro (aunque el nombre sugiere Next.js, funciona con cualquier React app).

---

## 11) ICONS

### ✅ **lucide-react**

**Evidencia:**

1. **package.json:**
   ```json
   "dependencies": {
     "lucide-react": "^0.462.0"
   }
   ```

2. **Uso extensivo:**
   - Todos los componentes importan iconos de `lucide-react`
   - Ejemplos: `Heart`, `Brain`, `Search`, `Menu`, etc.

**Conclusión:** **lucide-react v0.462.0** como librería de iconos.

---

## 12) BUILD TOOL & BUNDLER

### ✅ **Vite (esbuild)**

**Evidencia:**

1. **vite.config.ts:**
   ```typescript
   build: {
     minify: 'esbuild',
     // Code splitting configurado
     // Chunks manuales para optimización
   }
   ```

2. **package.json:**
   - Scripts usan `vite` directamente
   - No hay webpack, rollup directo, o parcel

**Conclusión:** **Vite** usa **esbuild** para minificación y bundling.

---

## 13) BACKEND STACK (Separado)

### ✅ **Node.js + Express + TypeScript + PostgreSQL**

**Evidencia:**

1. **backend/package.json:**
   ```json
   "dependencies": {
     "express": "...",
     "pg": "...",
     "dotenv": "...",
     "bcrypt": "...",
     "jsonwebtoken": "..."
   },
   "devDependencies": {
     "typescript": "^5.9.3",
     "@types/express": "...",
     "@types/node": "...",
     "@types/pg": "..."
   }
   ```

2. **backend/tsconfig.json:**
   - Configuración TypeScript presente

3. **Estructura:**
   - `backend/src/` con archivos `.ts`
   - Express routes, middleware, services

**Conclusión:** Backend separado con **Node.js + Express + TypeScript + PostgreSQL**.

---

## 📊 RESUMEN EJECUTIVO

| Categoría | Tecnología | Versión |
|-----------|------------|---------|
| **Frontend Framework** | Vite + React | Vite 7.3.1, React 19.2.3 |
| **Language** | TypeScript | 5.8.3 |
| **Routing** | react-router-dom | 6.30.1 |
| **Styling** | Tailwind CSS | 3.4.17 |
| **State Management** | TanStack Query + Local State | 5.83.0 |
| **UI Components** | Radix UI + shadcn/ui | Múltiples |
| **Form Handling** | react-hook-form + Zod | 7.61.1 / 3.25.76 |
| **Markdown** | react-markdown + remark/rehype | 10.1.0 |
| **Testing** | Vitest + Testing Library | 4.0.17 |
| **Theme** | next-themes | 0.3.0 |
| **Icons** | lucide-react | 0.462.0 |
| **Build Tool** | Vite (esbuild) | 7.3.1 |

---

## 🎯 CONCLUSIÓN

**Stack Principal:**
- **Vite 7** + **React 19** + **TypeScript 5**
- **react-router-dom v6** (SPA routing)
- **Tailwind CSS 3** (estilos)
- **TanStack Query v5** (state management del servidor)
- **Radix UI** + **shadcn/ui pattern** (componentes)
- **Vitest** (testing)

**Arquitectura:**
- **Frontend:** SPA (Single Page Application) con Vite
- **Backend:** Separado (Node.js + Express + TypeScript)
- **PWA:** Service Worker implementado
- **Deployment:** GitHub Pages compatible (base path configurable)

**No es:**
- ❌ Next.js (no hay App Router ni Pages Router)
- ❌ Create React App (usa Vite)
- ❌ React Native / Expo (es web)
- ❌ Redux / Zustand (usa TanStack Query + local state)

---

**Última actualización:** 2026-01-15  
**Método:** Análisis basado en evidencia de archivos del repositorio