Inicio Rápido

Si acabas de llegar al proyecto, este documento te da el contexto mínimo para entender dónde estás parado y qué deberías leer primero.

Qué vas a encontrar

Este es un proyecto maduro y en producción (1,330+ commits). No es un boilerplate ni un starter — es una aplicación real con usuarios reales. Eso significa:

Hay patrones establecidos. No inventes nuevos sin entender por qué existen los actuales.
Hay reglas estrictas. Pre-commit hooks que no te dejan commitear si violas las reglas. Lee la Guía del Desarrollador para conocerlas todas.
Hay una arquitectura multi-vertical. Las páginas no contienen lógica directa — delegan a layouts por vertical. Esto es intencional y fundamental.
Hay un sistema de servicios con fallback de idioma. No llamas a APIs directamente — usas useServices() que maneja traducciones, errores, y resolución por vertical.

Por dónde empezar (orden recomendado de lectura)

Guía del Desarrollador — Lee completo. Setup, reglas, comandos, y los 4 conceptos fundamentales que necesitas.
Arquitectura General — Entiende el diagrama de capas y cómo fluyen los datos desde la UI hasta la API.
Sistema Multi-Vertical — Comprende por qué las páginas son “thin” y cómo funciona chooseLayoutPage.
Servicios — Cómo obtener datos del backend. Es lo que más vas a usar.
Tutoriales — Cuando estés listo para crear algo nuevo, sigue los pasos guiados.

El stack en 30 segundos

Capa	Tecnología	Rol
Meta-framework	Nuxt 4	Routing, auto-imports, build, plugins
UI Framework	Vue 3 (Composition API)	Reactividad, componentes, templates
Tipos	TypeScript	Type safety en todo el proyecto
Estilos	Tailwind CSS + CSS variables	Utilidades + colores dinámicos por vertical
Componentes	@alebat-education/ecom-components	Librería propia de UI (prefijo `AE`)
Estado	Pinia	7 stores: auth, user, language, categories, orders, video, addressSync
Backend	Strapi 5 (headless CMS)	Datos, contenido, autenticación
Pagos	Stripe	Suscripciones y compras one-time
Deploy	AWS S3 + CloudFront	CDN global, deploy automático al merge

Para una descripción completa de cada tecnología y por qué fue elegida, lee Tecnologías.

Estructura mental del proyecto

Usuario visita /courses
  → Nuxt resuelve la ruta a pages/courses/index.vue
    → La página llama chooseLayoutPage({ page: 'courses', commonLayout: false })
      → Resuelve a layouts/pages/inspiria/courses.vue
        → El layout usa useServices('getCourses') para obtener datos
          → useServices busca en visibleVertical.services.getCourses
            → Ejecuta la función con el idioma actual
              → useStrapiClient() hace la llamada HTTP al backend
                → Los datos vuelven, se aplica fallback i18n si hay campos vacíos
                  → El template renderiza los datos con componentes AE

No necesitas memorizar esto ahora. Pero cuando algo no funcione como esperas, vuelve a este diagrama para entender en qué punto del flujo está el problema.

Errores comunes del primer día

Problema	Causa probable	Solución
`pnpm install` falla en ecom-components	No tienes auth de GitHub para packages privados	Configura token en `~/.npmrc` con scope `read:packages`
Commit rechazado sin mensaje de error claro	CommitLint: tu mensaje no sigue conventional commits	Usa formato `tipo(scope): descripción`
Componente `AE*` no se renderiza	No está en la versión instalada de ecom-components	Ejecuta `pnpm update @alebat-education/ecom-components --latest`
`useServices('x')` retorna null	El servicio no está registrado en la vertical	Verifica que está en `constants/verticals/inspiria.ts`
Página muestra en blanco	El layout no existe o el nombre no matchea	Verifica que `chooseLayoutPage` resuelve a un layout existente
Colores no cambian	Estás usando un color hardcodeado en vez de variable	Usa clases como `bg-primary`, `text-graphite`

Siguiente paso

Una vez que hayas leído la Guía del Desarrollador y tengas el entorno corriendo, empieza explorando el código. Un buen punto de entrada es abrir un layout de una página que ya existe (como layouts/pages/inspiria/courses.vue) y seguir el flujo de datos hacia abajo.

Guía del Desarrollador Tu referencia principal — setup, reglas, patrones

Tutoriales Cuando estés listo para crear algo nuevo