planetazuzu/codigo0

Fork 0

planetazuzu 0014c17873 Actualizar herramientas y contenidos

2026-01-19 09:10:16 +01:00

12 KiB

Raw Blame History

🔍 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:

package.json:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
},
"devDependencies": {
  "vite": "^7.3.1",
  "@vitejs/plugin-react-swc": "^4.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
index.html:
- Punto de entrada: <script type="module" src="/src/main.tsx"></script>
- Estructura típica de Vite (no Next.js)
Estructura de archivos:
- src/ como directorio principal (no app/ ni pages/ de Next.js)
- No hay next.config.js ni pages/ directory

Dependencias:

"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:

tsconfig.json:
- Archivo presente en raíz
- Referencias a tsconfig.app.json y tsconfig.node.json
tsconfig.app.json:
- Configuración específica para aplicación
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

package.json:

"devDependencies": {
  "typescript": "^5.8.3",
  "@types/react": "^19.2.8",
  "@types/react-dom": "^19.2.3",
  "@types/node": "^22.16.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:

package.json:

"dependencies": {
  "react-router-dom": "^6.30.1"
}

src/App.tsx:

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>

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
Uso de hooks de routing:
- useNavigate, useLocation, useParams encontrados en componentes
- NavLink usado en BottomNav.tsx

Configuración Vite para SPA:

// 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:

package.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"
}

tailwind.config.ts:
- Archivo de configuración presente
- Plugins: tailwindcss-animate, @tailwindcss/typography
- Configuración de temas, colores personalizados, breakpoints
postcss.config.js:
- Configuración de PostCSS presente (requerido por Tailwind)
src/index.css:
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
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
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:

TanStack Query (React Query):

"dependencies": {
  "@tanstack/react-query": "^5.83.0"
}

src/App.tsx:

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,
    },
  },
});

React Context:
- ThemeProvider de next-themes (context para temas)
- TooltipProvider de Radix UI
- No se encontró uso extensivo de Context API propio
Local Component State:
- useState usado extensivamente en componentes
- Hooks personalizados: useSearchHistory, useDebounce, useRoutePrefetch
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:

Radix UI (Base accesible):

"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
}

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)
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:

package.json:

"dependencies": {
  "react-hook-form": "^7.61.1",
  "zod": "^3.25.76"
}

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:

package.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"
}

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:

package.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"
}

vite.config.ts:

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:

package.json:

"dependencies": {
  "next-themes": "^0.3.0"
}

src/App.tsx:

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:

package.json:

"dependencies": {
  "lucide-react": "^0.462.0"
}

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:

vite.config.ts:

build: {
  minify: 'esbuild',
  // Code splitting configurado
  // Chunks manuales para optimización
}

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:

backend/package.json:

"dependencies": {
  "express": "...",
  "pg": "...",
  "dotenv": "...",
  "bcrypt": "...",
  "jsonwebtoken": "..."
},
"devDependencies": {
  "typescript": "^5.9.3",
  "@types/express": "...",
  "@types/node": "...",
  "@types/pg": "..."
}

backend/tsconfig.json:
- Configuración TypeScript presente
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

12 KiB Raw Blame History

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

1) FRONTEND FRAMEWORK

✅ Vite + React

2) LANGUAGE

✅ TypeScript

3) ROUTING SYSTEM

✅ react-router-dom v6

4) STYLING SOLUTION

✅ Tailwind CSS

5) STATE MANAGEMENT

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

6) UI COMPONENT LIBRARY

✅ Radix UI + shadcn/ui Pattern

7) FORM HANDLING

✅ react-hook-form + Zod

8) MARKDOWN PROCESSING

✅ react-markdown + remark/rehype ecosystem

9) TESTING FRAMEWORK

✅ Vitest

10) THEME MANAGEMENT

✅ next-themes

11) ICONS

✅ lucide-react

12) BUILD TOOL & BUNDLER

✅ Vite (esbuild)

13) BACKEND STACK (Separado)

✅ Node.js + Express + TypeScript + PostgreSQL

📊 RESUMEN EJECUTIVO

🎯 CONCLUSIÓN

12 KiB

Raw Blame History