Cada tecnología en este proyecto fue elegida por una razón específica. Aquí están todas con su justificación para que entiendas el porqué detrás de cada decisión.
| |
|---|
| Qué es | Meta-framework de Vue que añade routing automático, auto-imports, y tooling integrado |
| Por qué | File-based routing elimina configuración manual. Auto-imports eliminan boilerplate. Build optimizado con Vite |
| Modo | SPA (ssr: false) — no hay server-side rendering. Se despliega como archivos estáticos |
| Versión | Nuxt 4.2.1 / Vue 3.5.25 |
Implicación práctica: Nunca necesitas import { ref, computed } from 'vue' — todo está auto-importado. Las rutas se crean poniendo archivos en pages/.
| |
|---|
| Qué es | JavaScript con sistema de tipos estáticos |
| Por qué | Errores en compilación (no en producción). Autocomplete inteligente. Refactoring seguro. Documentación implícita |
| Regla | Prohibido any. Todo explícitamente tipado |
| |
|---|
| Qué es | Gestor de estado oficial de Vue 3 (reemplazo de Vuex) |
| Por qué | API Composition nativa. TypeScript first-class. DevTools integrados. Modular (un store por dominio) |
| Stores | auth, user, language, categories, orders, video, addressSync |
| |
|---|
| Qué es | Framework CSS utility-first |
| Por qué | Desarrollo rápido sin salir del template. Purging automático (bundle mínimo). CSS variables para theming dinámico por vertical |
| Convención | Mobile-first. BEM para CSS custom. Colores vía variables, nunca hardcoded |
| |
|---|
| Qué es | Librería de componentes propia (módulo Nuxt). Design system completo de Alebat Education |
| Por qué | Reutilización entre proyectos. Consistencia visual. Componentes complejos pre-construidos (navbar, cards, sliders, video player) |
| Prefix | AE — todos los componentes se usan como <AENavbar />, <AEMainCard />, etc. |
| Fuente | Repositorio privado GitHub (requiere auth) |
| |
|---|
| Qué es | Headless CMS open-source con API REST automática |
| Por qué | Panel de admin para editores de contenido. Localización nativa (multi-idioma). Relations complejas. Media library |
| Integración | Via @nuxtjs/strapi module + capa propia en services/ |
| |
|---|
| Qué es | Internacionalización para Nuxt |
| Por qué | Rutas traducidas automáticamente. Lazy loading de traducciones. Detección de idioma |
| Idiomas | es (default, sin prefijo), en (prefijo /en/), pt-BR (prefijo /pt-BR/) |
| Estrategia | prefix_except_default |
| |
|---|
| Plyr | Player de video con UI personalizable |
| HLS.js | Streaming adaptativo (múltiples calidades, buffering inteligente) |
| Juntos | Plyr da la interfaz; HLS.js maneja el streaming .m3u8 que sirve el CDN |
| |
|---|
| Qué es | Librería de sliders/carruseles |
| Por qué | Performance nativa. Eventos táctiles. Lazy loading integrado |
| Uso | Como Web Components: <swiper-container>, <swiper-slide> (registrados en vue.compilerOptions.isCustomElement) |
| |
|---|
| Qué es | Framework de testing compatible con Jest, powered by Vite |
| Por qué | Mismo bundler que el proyecto = ultra rápido. HMR en tests. API familiar |
| |
|---|
| Qué es | Gestor de paquetes eficiente |
| Por qué | 2x más rápido que npm. Symlinks (ahorra disco). Lock file determinista |
| Config | node-linker=hoisted para máxima compatibilidad con Nuxt modules |
| Herramienta | Verifica |
|---|
| ESLint | Errores de lógica, imports no usados, reglas Vue, no any, no console.log |
| Prettier | Formato consistente (comillas simples, sin semicolons, indent 2) |
| Stylelint | CSS válido, no !important, no px directo, BEM |
Se ejecutan automáticamente en pre-commit via Husky + lint-staged.
| |
|---|
| Pipeline | GitHub Actions → pnpm generate → S3 sync → CloudFront cache invalidation |
| CDN | CloudFront distribuye globalmente |
| Por qué SPA | No necesita servidor. Barato. Rápido. Caché CDN agresivo |
| Herramienta | Propósito |
|---|
| Stripe | Pagos únicos y suscripciones recurrentes |
| Zoho CRM | Tracking de leads, registros y eventos de usuario |
| ElevenLabs | Widget de IA conversacional para soporte |
| Google Analytics | Tracking de uso y conversiones |
| Google Search Console | Indexación y SEO |