🚀 stratakit

El meta-framework React más completo y moderno del mercado

stratakit es un meta-framework React de nueva generación que combina la simplicidad de Vite con la potencia de Next.js, pero con cero configuración y todas las funcionalidades incluidas.

✨ Características Principales

🎯 Todo Incluido

• ✅ CLI Completo - Herramientas de desarrollo integradas
• ✅ PWA - Progressive Web App out-of-the-box
• ✅ SEO Avanzado - Meta tags, sitemaps, structured data
• ✅ Testing - Jest + React Testing Library configurado
• ✅ Routing - File-based routing con middleware
• ✅ Styling - CSS-in-JS + Tailwind CSS
• ✅ Estado Global - Redux-like store integrado
• ✅ Plugins - Sistema de plugins extensible
• ✅ Monitoreo - Analytics y performance tracking
• ✅ i18n - Internacionalización completa
• ✅ Seguridad - JWT + OAuth integrados
• ✅ Validación - Formularios con validación en tiempo real
• ✅ Caché - Sistema de caché inteligente
• ✅ Errores - Manejo avanzado de errores
• ✅ Logging - Sistema de logging estructurado
• ✅ Hot Reload - Recarga en caliente mejorada
• ✅ Documentación - Generación automática de docs

🚀 Ventajas sobre Next.js y Remix

| Característica | stratakit | Next.js | Remix | Vite + React | |----------------|----------|---------|-------|--------------| | Configuración | ✅ Zero | ⚠️ Manual | ⚠️ Manual | ❌ Completa | | PWA | ✅ Incluido | ⚠️ Manual | ❌ No | ❌ No | | Estado Global | ✅ Incluido | ❌ No | ❌ No | ❌ No | | Monitoreo | ✅ Incluido | ⚠️ Manual | ⚠️ Manual | ❌ No | | Caché Inteligente | ✅ Incluido | ⚠️ Manual | ⚠️ Manual | ❌ No | | Validación Forms | ✅ Incluido | ⚠️ Manual | ⚠️ Manual | ❌ No | | Logging | ✅ Incluido | ⚠️ Manual | ⚠️ Manual | ❌ No | | Documentación | ✅ Incluido | ⚠️ Manual | ⚠️ Manual | ❌ No |

🚀 Inicio Rápido

Instalación

# Crear nueva aplicación
npx create-stratakit@latest mi-app

# O instalar globalmente
npm install -g stratakit

# Crear proyecto
stratakit create mi-app

Desarrollo

cd mi-app
npm run dev

¡Listo! Tu aplicación estará corriendo en http://localhost:3000 con todas las funcionalidades habilitadas.

📖 Documentación

CLI Commands

# Desarrollo
stratakit dev                 # Iniciar servidor de desarrollo
stratakit build              # Construir para producción
stratakit preview            # Previsualizar build

# Generación
stratakit generate component MiComponente
stratakit generate page      # Generar página
stratakit generate hook      # Generar hook personalizado
stratakit generate util      # Generar utilidad

# Testing
stratakit test               # Ejecutar tests
stratakit test:watch         # Tests en modo watch
stratakit test:coverage      # Tests con cobertura

# Deploy
stratakit deploy             # Deploy automático
stratakit deploy vercel      # Deploy a Vercel
stratakit deploy netlify     # Deploy a Netlify

Ejemplos de Uso

PWA Automático

import { usePWA } from 'stratakit/core/pwa';

function App() {
  const { installPrompt, isInstalled } = usePWA();
  
  return (
    <div>
      {!isInstalled && installPrompt && (
        <button onClick={installPrompt}>
          Instalar App
        </button>
      )}
    </div>
  );
}

Estado Global

import { useStore, useSelector } from 'stratakit/core/state';

function Counter() {
  const count = useSelector(state => state.counter);
  const dispatch = useStore();
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>
        +
      </button>
    </div>
  );
}

Validación de Formularios

import { useValidation, FormField } from 'stratakit/core/validation';

function LoginForm() {
  const { values, errors, handleSubmit } = useValidation({
    email: '',
    password: ''
  }, validationSchema);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <FormField
        name="email"
        type="email"
        value={values.email}
        onChange={setValue}
        error={errors.email}
      />
      <FormField
        name="password"
        type="password"
        value={values.password}
        onChange={setValue}
        error={errors.password}
      />
      <button type="submit">Login</button>
    </form>
  );
}

Internacionalización

import { useI18n, TranslatedText } from 'stratakit/core/i18n';

function Welcome() {
  const { t, setLocale } = useI18n();
  
  return (
    <div>
      <TranslatedText translationKey="welcome" params={{ name: 'Usuario' }} />
      <button onClick={() => setLocale('es')}>Español</button>
      <button onClick={() => setLocale('en')}>English</button>
    </div>
  );
}

🏗️ Arquitectura

stratakit/
├── core/                 # Funcionalidades core
│   ├── auth/            # Autenticación y seguridad
│   ├── cache/           # Sistema de caché
│   ├── docs/            # Documentación automática
│   ├── errors/          # Manejo de errores
│   ├── hotreload/       # Hot reload mejorado
│   ├── i18n/            # Internacionalización
│   ├── logging/         # Sistema de logging
│   ├── monitoring/      # Monitoreo y analytics
│   ├── plugins/         # Sistema de plugins
│   ├── routing/         # Routing avanzado
│   ├── seo/             # SEO y meta tags
│   ├── ssr/             # Server-side rendering
│   ├── state/           # Estado global
│   ├── styling/         # Sistema de estilos
│   └── validation/      # Validación de formularios
├── cli/                 # Herramientas CLI
└── create-stratakit/     # Generador de proyectos

🔧 Configuración

stratakit funciona con cero configuración, pero puedes personalizar:

// stratakit.config.ts
export default {
  // PWA
  pwa: {
    enabled: true,
    manifest: './public/manifest.json'
  },
  
  // SEO
  seo: {
    title: 'Mi App',
    description: 'Descripción de mi app',
    keywords: ['react', 'typescript', 'pwa']
  },
  
  // i18n
  i18n: {
    defaultLocale: 'es',
    supportedLocales: ['es', 'en', 'fr']
  },
  
  // Caché
  cache: {
    strategy: 'lru',
    maxSize: 1000,
    ttl: 300000 // 5 minutos
  }
};

🧪 Testing

# Tests unitarios
npm run test

# Tests con cobertura
npm run test:coverage

# Tests E2E
npm run test:e2e

📦 Deploy

Vercel

stratakit deploy vercel

Netlify

stratakit deploy netlify

Docker

stratakit build
docker build -t mi-app .
docker run -p 3000:3000 mi-app

🔒 Seguridad

stratakit incluye múltiples capas de seguridad:

• CSRF Protection - Protección contra ataques CSRF
• Rate Limiting - Limitación de velocidad de requests
• Input Sanitization - Sanitización de entradas
• Security Headers - Headers de seguridad automáticos
• JWT Authentication - Autenticación segura con JWT
• OAuth Integration - Integración con proveedores OAuth
• Session Management - Gestión segura de sesiones

🚀 Cómo Publicar en NPM

Preparación

# 1. Limpiar archivos innecesarios
npm run clean

# 2. Build del proyecto
npm run build

# 3. Verificar el paquete
npm run publish:dry

Publicación

# 1. Loguearse en NPM
npm login

# 2. Verificar disponibilidad del nombre
npm view stratakit

# 3. Dry run (verificar sin publicar)
npm publish --dry-run

# 4. Publicar
npm publish dist/

Comandos de Mantenimiento

# Actualizar versión
npm version patch  # 1.0.0 -> 1.0.1
npm version minor  # 1.0.0 -> 1.1.0
npm version major  # 1.0.0 -> 2.0.0

# Publicar nueva versión
npm publish dist/

# Deprecar versión
npm deprecate [email protected] "Versión obsoleta"

🤝 Contribuir

¡Las contribuciones son bienvenidas! Por favor:

1. Fork el proyecto
2. Crea una rama (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

Estructura del Proyecto

stratakit/
├── app/                    # Código fuente de la aplicación
│   ├── core/              # Funcionalidades core
│   │   ├── auth/          # Autenticación y seguridad
│   │   ├── cache/         # Sistema de caché
│   │   ├── docs/          # Documentación automática
│   │   ├── errors/        # Manejo de errores
│   │   ├── hotreload/     # Hot reload mejorado
│   │   ├── i18n/          # Internacionalización
│   │   ├── logging/       # Sistema de logging
│   │   ├── monitoring/    # Monitoreo y analytics
│   │   ├── plugins/       # Sistema de plugins
│   │   ├── routing/       # Routing avanzado
│   │   ├── seo/           # SEO y meta tags
│   │   ├── ssr/           # Server-side rendering
│   │   ├── state/         # Estado global
│   │   ├── styling/       # Sistema de estilos
│   │   └── validation/    # Validación de formularios
│   └── shared/            # Componentes compartidos
├── packages/              # Paquetes del framework
│   ├── cli/               # Herramientas CLI
│   ├── core/              # Funcionalidades core
│   └── create-stratakit/   # Generador de proyectos
├── dist/                  # Build para publicación
├── examples/              # Ejemplos de uso
└── types/                 # Definiciones TypeScript

📄 Licencia

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para detalles.

🆘 Soporte

• 📖 Documentación
• 🐛 Issues
• 📧 Email

🙏 Agradecimientos

• React - La biblioteca de UI
• Vite - El build tool
• TypeScript - El lenguaje
• Next.js - Inspiración
• Remix - Inspiración