Stack de frontend

Este conteúdo não está disponível em sua língua ainda.

Digital Jungle separa dos mundos de frontend intencionalmente:

Categoría	Stack	Vive en
Sitio público — marketing, docs, API reference, signup, checkout	Astro 5 + Starlight + Tailwind v4 + Scalar	`website/digital-jungle-site/`
Apps internas — admin de bjungle + dashboards de cada tenant	React 19 + Vite + shadcn/ui + Tailwind v4 + `@xyflow/react` + TanStack Query	`<app>/frontend/admin-console/` o `<app>/frontend/dashboard/`

Por qué Astro para el sitio público

HTML estático por defecto: mejor SEO, Core Web Vitals altos.
MDX para contenido editorial — devs y marketing pueden editar el mismo archivo sin pelearse con el framework.
Starlight para docs técnicas con búsqueda, dark mode y navegación generada automáticamente.
Scalar embebido renderiza el OpenAPI 3.1 de cada módulo en vivo.

Por qué React para las apps internas

La razón decisiva es @xyflow/react (React Flow): el estándar para editores de grafo en web. No tiene equivalente en Angular. Lo usamos en:

Rule Builder de Bhawk — el árbol AND/OR/condiciones de SARLAFT. Es el feature visible más diferenciador del módulo. Sin un builder decente, Bhawk pierde frente a competidores que sí lo tienen.
Workflow Editor cross-módulo — futura UI que dibuja el flujo Bmonkey → Bhawk → Bseal con ramas condicionales y mapping de campos.

Otros beneficios:

shadcn/ui te da componentes copy-paste de calidad sin pagar licencia como PrimeNG. Mismo lenguaje visual que Vercel, Linear, Cal.com.
react-hook-form + Zod comparten validaciones con los endpoints de Astro (mismas reglas tanto en el sitio como en las apps internas).
TanStack Query maneja cache, refetch, optimistic updates y background revalidation sin Redux.
openapi-fetch genera el cliente type-safe directamente del api/v1.yaml de cada módulo en build.

Cómo se estructura una app interna

<app>/frontend/dashboard/
├── package.json
├── vite.config.ts
├── tsconfig.json
├── tailwind.config.ts
├── components.json              · config de shadcn/ui
├── public/
└── src/
    ├── main.tsx                 · monta el router
    ├── routes/                  · TanStack Router file-based
    ├── features/                · agrupado por dominio
    │   ├── tenants/
    │   ├── webhooks/
    │   └── ...
    ├── lib/
    │   ├── api-client/          · openapi-fetch generado
    │   ├── auth/                · OIDC client (lee tokens del IdP)
    │   └── query-client.ts      · TanStack Query
    ├── components/              · shadcn/ui customizados + propios
    └── styles/global.css

Compartir código entre apps internas

Cuando una utilidad o componente se usa en más de una app, vive en un package separado:

shared-libs/
└── ts-bjungle-ui/        · componentes shadcn extendidos + hooks comunes

Se publica con semver desde el monorepo, igual que las shared-libs Go. Mientras esto no exista todavía, copy-paste pragmático entre apps es aceptable — extraer cuando una pieza esté duplicada al menos 2 veces y sea estable.

Lo que NO se usa

Angular: no se propone para código nuevo dentro de digital-jungle/. Cash-pa-ya sigue en Angular hasta su retiro.
Next.js: las apps internas son SPAs autenticadas; no necesitan SSR ni edge runtime. Vite es más rápido y simple.
Redux / MobX: TanStack Query + Zustand cubre todos los casos sin el boilerplate.
Material UI / Chakra / Mantine: shadcn/ui da más control sobre el diseño y mejor performance.