Saltar al contenido
supastack
Explorar la documentación
WebTanStack Start

For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /es/docs/tanstack/tech-stack.md (or send Accept: text/markdown).

Stack tecnológico

Las tecnologías detrás del kit y el papel que juega cada una.

Antes de comenzar

Abra su proyecto supastack descargado en Visual Studio Code usando Archivo → Abrir carpeta, luego elija Terminal → Nueva terminal. La raíz del repositorio es la carpeta que contiene package.json, aplicaciones y paquetes. Ejecute el comando a continuación y deje su terminal abierta. Si no se reconoce un comando, finalice la guía de instalación de la herramienta antes de continuar.

Lea primero el tutorial de la plataforma. Un servidor es el proceso de la aplicación que responde a las solicitudes del navegador o del teléfono. La web lee apps/web-tanstack/.env.local, Expo lee apps/mobile/.env.local y los comandos de migración de bases de datos leen el .env de la raíz. La demostración de /dashboard sin base de datos es independiente de las cuentas reales de /auth, que necesitan Postgres migrado. Una entrega solo de teléfono o de escritorio necesita un backend web que se ejecute por separado.

corepack pnpm --filter @supastack/web-tanstack dev

Stack de la aplicación

La aplicación web es una aplicación TanStack Start compuesta por paquetes TypeScript compartidos — los mismos paquetes alimentan la app móvil Expo. El chrome del producto usa módulos CSS sobre tokens de diseño, así que no hay CSS-in-JS en runtime que depurar, y el almacenamiento de objetos es compatible con S3. Las herramientas siguientes son los valores predeterminados elegidos.

TanStack Start + React

La aplicación web funciona con TanStack Start sobre las rutas de archivo de TanStack Router y los server components de React 19.

TypeScript + Turborepo

El modo estricto de TypeScript se aplica en todo el espacio de trabajo pnpm, y Turborepo coordina las compilaciones.

Better Auth

Better Auth es el motor de identidad; hay un motor Auth.js disponible para los equipos que se estandaricen en él.

Drizzle + PostgreSQL

La persistencia pasa por el ORM Drizzle sobre PostgreSQL: el esquema y las utilidades por los que fluye cada registro.

Facturación

La facturación con Stripe es la opción predeterminada y se incluye un adaptador de Lemon Squeezy.

Trigger.dev

Los trabajos en segundo plano se ejecutan en Trigger.dev.

Correo transaccional

El correo transaccional se envía a través de Resend o AWS SES.

Sentry + PostHog

La observabilidad se apoya en Sentry y PostHog.

Expo

La app móvil Expo consume los mismos paquetes TypeScript, por lo que los cambios de contrato se verifican a la vez en ambas superficies. Expo compila para iOS y Android.

Módulos compartidos

Cada capacidad transversal vive en un paquete con un contrato pequeño: auth, db, billing, ai, jobs, email, storage, observability, config, i18n y api. Las aplicaciones los componen; la lógica de dominio del producto queda fuera del kit.

Cada módulo respaldado por un proveedor incluye un adaptador fake o local para que el ciclo de prueba y desarrollo por defecto nunca llame a un servicio de pago.

Herramientas de verificación

Vitest cubre el comportamiento unitario e de integración, Playwright cubre los flujos de navegador, y ESLint más Prettier mantienen el código consistente. La suite determinista corre sin credenciales de proveedor; la aceptación con proveedores reales es una ruta separada y opcional.

corepack pnpm test              # deterministic unit + integration
corepack pnpm check             # lint, types, tests, format
corepack pnpm build             # production builds
corepack pnpm test:e2e:tanstack  # browser flows