@rotosaurio/sysrot-core
Version:
CLI de nueva generación para proyectos Next.js 14+ con IA multi-modelo, Web3 integration, internacionalización completa y roadmap realista 2025-2026
916 lines (732 loc) • 35.9 kB
Markdown
# @rotosaurio/sysrot-core
**CLI de nueva generación para crear proyectos Next.js 14+ con integración de IA, soporte Web3, internacionalización completa y arquitectura lista para producción.**
Genera aplicaciones web modernas en segundos con 3 modelos de IA integrados, autenticación, bases de datos y 350+ traducciones.
<div align="center">
# 🚀 @rotosaurio/sysrot-core v2.4.4 - CLI de Nueva Generación
**CLI de grado empresarial para crear proyectos Next.js 14+ con integración de IA, internacionalización completa y arquitectura lista para producción**
<!-- Language Selection -->
<p>
<a href="./README.es.md">
<img src="https://img.shields.io/badge/🇪🇸%20Español-current-blue.svg?style=for-the-badge" alt="Español" />
</a>
<a href="./README.md">
<img src="https://img.shields.io/badge/🇺🇸%20English-available-gray.svg?style=for-the-badge" alt="English" />
</a>
</p>
[](https://badge.fury.io/js/@rotosaurio/sysrot-core)
[](https://npmjs.com/package/@rotosaurio/sysrot-core)
[](https://opensource.org/licenses/MIT)
[](https://nodejs.org/)
[](https://nextjs.org/)
**🚀 Comando: `npx sysrot` | 🎨 11 Ejemplos Funcionales | 🤖 3 Modelos de IA Integrados**
**🌍 [English README](./README.md) | 🇪🇸 Español (actual)**
</div>
## ✅ **¡NUEVA VERSIÓN v2.3.6 - COMPLETAMENTE FUNCIONAL!**
### 🔧 **Correcciones Críticas Resueltas**
- ✅ **ERROR DE COMPILACIÓN CORREGIDO** - Import duplicado `useTranslation` eliminado
- ✅ **TRADUCCIONES 100% COMPLETADAS** - Zero errores "Missing translation" garantizado
- ✅ **CLI MULTIPLATAFORMA** - Funciona perfectamente en Windows, macOS y Linux
- ✅ **DEPENDENCIAS CORREGIDAS** - Comandos `commander` e `inquirer` funcionando
- ✅ **PÁGINAS ESPECÍFICAS ARREGLADAS** - `/en/ejemplos/notificaciones`, `/en/ejemplos/database`
### 🌍 **Sistema de Internacionalización Robusto**
- **350+ claves de traducción** en español e inglés
- **Todas las páginas localizadas** sin texto hardcodeado
- **Sistema React Intl v2.3.0** con fallbacks automáticos
- **Carga síncrona optimizada** para mejor performance inicial
### 📦 **Instalación Ultra-Rápida**
```bash
npx @rotosaurio/@rotosaurio/sysrot-core mi-proyecto
cd mi-proyecto
npm run dev
# ✅ ¡Funciona sin errores en 30 segundos!
```
## 🎯 **Instalación Rápida**
```bash
npx @rotosaurio/@rotosaurio/sysrot-core mi-proyecto
cd mi-proyecto
npm run dev
```
¡Tu aplicación estará ejecutándose en http://localhost:3000 en menos de 30 segundos!
## 📋 **Tabla de Contenidos | Table of Contents**
<details>
<summary><strong>🇪🇸 Español (Haz click para expandir)</strong></summary>
- [✨ ¿Por Qué @rotosaurio/sysrot-core?](#-por-qué-@rotosaurio/sysrot-core)
- [🔥 Características Implementadas](#-características-implementadas)
- [🛠️ Instalación y Uso](#%EF%B8%8F-instalación-y-uso)
- [🎯 Ejemplos Incluidos](#-ejemplos-incluidos)
- [📚 Documentación](#-documentación)
- [🤝 Contribuir](#-contribuir)
- [📄 Licencia](#-licencia)
</details>
<details>
<summary><strong>🇺🇸 English (Click to expand)</strong></summary>
➡️ **[View English Documentation](./README.md)**
- [✨ Why @rotosaurio/sysrot-core?](./README.md#-why-@rotosaurio/sysrot-core)
- [🔥 Implemented Features](./README.md#-implemented-features)
- [🛠️ Installation and Usage](./README.md#%EF%B8%8F-installation-and-usage)
- [🎯 Examples Included](./README.md#-examples-included)
- [📚 Documentation](./README.md#-documentation)
- [🤝 Contributing](./README.md#-contributing)
- [📄 License](./README.md#-license)
</details>
---
## ✨ **¿Por Qué @rotosaurio/sysrot-core?**
> **🌍 ¿Prefieres leer en inglés?** → **[Switch to English Version](./README.md)** 🇺🇸
En **enero 2025**, el desarrollo web requiere herramientas que aceleren la creación de aplicaciones modernas sin sacrificar calidad. **@rotosaurio/sysrot-core** es un CLI que te da:
- 🚀 **Proyecto completo en 30 segundos** - De idea a aplicación funcional
- 🤖 **3 modelos de IA integrados** - GPT-4o, Claude 3.5 Sonnet, Gemini Flash Pro
- 📦 **50+ componentes production-ready** - Biblioteca completa de UI/UX
- 🎯 **11 ejemplos funcionales** - Código real que puedes usar inmediatamente
- ⚡ **Zero-config** - Funciona perfecto desde el primer `npm run dev`
- 🎨 **60+ animaciones fluidas** - CSS3, Framer Motion, micro-interacciones
- 📚 **Blog MDX integrado** - 3 artículos de ejemplo incluidos
- 🌍 **Internacionalización completa** - Soporte para español e inglés
**💡 Nota:** El paquete se llama `@rotosaurio/sysrot-core` y el comando principal es `npx @rotosaurio/@rotosaurio/sysrot-core` para máxima simplicidad.
## 🎯 Quick Installation
```bash
npx @rotosaurio/@rotosaurio/sysrot-core my-project
cd my-project
npm run dev
```
Your application will be running at http://localhost:3000 in less than 30 seconds!
## 🌟 Key Features
### 🧠 **Integrated Multi-Model AI**
- **GPT-4o** (OpenAI) - Most advanced model
- **Claude 3.5 Sonnet** (Anthropic) - Superior reasoning
- **Gemini Flash Pro** (Google) - Optimized speed
- **DeepSeek R1** - Coming soon
- Unified chat interface with automatic switching
### 🔐 **Complete Authentication System**
- **NextAuth.js** with multiple providers (Google, GitHub, etc.)
- **Role system** and granular permissions
- **Automatic route protection**
- **Ready-to-use UI components**
### 🎨 **50+ Production-Ready UI Components**
- **TailwindCSS** + **shadcn/ui** components
- **Dark/light mode** with persistence
- **Validated forms** with react-hook-form + Zod
- **Animations** with Framer Motion
- **Notifications** with react-hot-toast
### 📡 **Database Integrations**
- **MongoDB** with Mongoose ODM
- **Supabase** with optimized client
- **Firebase** with complete SDK
- **Prisma ORM** pre-configured
- CRUD examples for each one
### 📝 **MDX Blog System**
- **Markdown + JSX** with syntax highlighting
- **Optimized static generation**
- **Automatic SEO** with metadata
- **Tags and categories** included
### 🌍 **Internationalization (i18n)**
- **Spanish** and **English** included
- **react-intl** completely configured
- **Robust system** with automatic fallbacks
- **280+ translations** pre-included
- **Zero missing translation errors** guaranteed
### ☁️ **Image Upload**
- **Cloudinary** complete integration
- **Drag & drop** with preview
- **Type and size validation**
- **Automatic optimization**
## 📋 Included Technologies
```
🎯 Core Framework
├── Next.js 14+ (Pages Router)
├── TypeScript 5+
├── React 18+
└── Node.js 16+
🎨 Styling & UI
├── TailwindCSS 3+
├── shadcn/ui components
├── Framer Motion
├── Lucide React icons
└── Dark/light mode
🔐 Authentication
├── NextAuth.js
├── Role system
├── OAuth providers
└── Route protection
🧠 Artificial Intelligence
├── OpenAI GPT-4o
├── Anthropic Claude 3.5
├── Google Gemini Flash Pro
└── DeepSeek R1 (coming soon)
💾 Database
├── MongoDB + Mongoose
├── Supabase
├── Firebase
└── Prisma ORM
📝 Content
├── MDX Blog system
├── Syntax highlighting
├── SEO optimized
└── Static generation
🌍 Internationalization
├── react-intl
├── Spanish + English
├── 280+ translations
└── Robust system
📁 Utilities
├── React Hook Form + Zod
├── React Hot Toast
├── Cloudinary upload
└── TypeScript strict mode
```
## 🚀 Quick Start
1. **Create project**:
```bash
npx @rotosaurio/@rotosaurio/sysrot-core@latest my-app
cd my-app
```
2. **Configure environment variables**:
```bash
cp .env.example .env.local
# Edit .env.local with your API keys
```
3. **Install dependencies**:
```bash
npm install
```
4. **Start development**:
```bash
npm run dev
```
5. **Ready!** Your application will be running at `http://localhost:3000`
## 📚 Documentation
- 📖 **Complete guide**: See `DOCUMENTATION.md` in your project
- 🌐 **Live examples**: `/examples` in your application
- 🤖 **Integrated AI**: `/examples/ai` to test the models
- 🔐 **Authentication**: `/examples/auth` for login/registration
- 📝 **Blog**: `/blog` for MDX content
## 🔧 API Configuration
### OpenAI (GPT-4o)
```env
OPENAI_API_KEY=sk-your-key-here
```
### Anthropic (Claude)
```env
ANTHROPIC_API_KEY=sk-ant-your-key
```
### Google (Gemini)
```env
GOOGLE_API_KEY=your-google-key
```
### Cloudinary (Upload)
```env
CLOUDINARY_CLOUD_NAME=your-cloud
CLOUDINARY_API_KEY=your-key
CLOUDINARY_API_SECRET=your-secret
```
### Database (choose one)
```env
# MongoDB
MONGODB_URI=mongodb://localhost:27017/myapp
# Supabase
NEXT_PUBLIC_SUPABASE_URL=your-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-key
# Firebase
FIREBASE_PROJECT_ID=your-project
FIREBASE_PRIVATE_KEY=your-key
```
## 📦 Available Scripts
```bash
# Development
npm run dev
# Build
npm run build
# Production start
npm start
```
## 🤝 Contributing
Contributions are welcome. Please:
1. Fork the project
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 📞 Support
- 🐛 **Issues**: [GitHub Issues](https://github.com/rotosaurio/@rotosaurio/sysrot-core/issues)
- 💬 **Discussions**: [GitHub Discussions](https://github.com/rotosaurio/@rotosaurio/sysrot-core/discussions)
- 📧 **Email**: rotosaurio@example.com
---
⭐ **¡No olvides dar una estrella al proyecto si te ha sido útil!**
## 🗺️ **Roadmap 2025-2026**
### 🎯 **Q1 2025 (Enero-Marzo) - Fundación Web3 & Testing**
**Meta: Integración Blockchain & Aseguramiento de Calidad**
- 🌐 **Integración Web3** - Wallet connect, MetaMask, WalletConnect básico
- 🔧 **Testing automatizado** - Jest pruebas unitarias, Cypress e2e
- 📚 **Documentación técnica** - Guías detalladas y ejemplos avanzados
- 🚀 **Optimización performance** - Core Web Vitals y optimización bundles
- 🧪 **Suite de testing** - Testing componentes con React Testing Library
- 📦 **Pipeline CI/CD** - GitHub Actions para testing automatizado
### 🌟 **Q2 2025 (Abril-Junio) - Integraciones & Analytics**
**Meta: Servicios Terceros & Inteligencia de Negocio**
- 📊 **Integración analytics** - Google Analytics 4, Vercel Analytics, Posthog
- 💳 **Sistemas de pago** - Integración Stripe con suscripciones
- 📧 **Servicios de email** - SendGrid, Resend para emails transaccionales
- 🔄 **Características tiempo real** - WebSockets para chat y notificaciones
- 🎨 **Animaciones avanzadas** - Integración biblioteca GSAP
- 📱 **Notificaciones push** - Implementación Web Push API
### 🚀 **Q3 2025 (Julio-Septiembre) - Mejora IA & CMS**
**Meta: Gestión de Contenido & Expansión IA**
- 🤖 **IA multi-modal** - Procesamiento imágenes con OpenAI Vision
- 📝 **Integración CMS** - Contentful, Strapi headless CMS
- 🌐 **Web3 Avanzado** - Interacción smart contracts, dominios ENS
- 📱 **PWA 3.0** - Service workers avanzados, funcionalidad offline-first
- 🔍 **Características búsqueda** - Integración Algolia para búsqueda rápida
- 🎯 **A/B Testing** - Feature flags y tracking experimentos
### 🔮 **Q4 2025 (Octubre-Diciembre) - Mobile & Performance**
**Meta: Experiencia Móvil & Optimización**
- 📱 **Optimizaciones mobile-first** - Gestos táctiles, navegación móvil
- ⚡ **Edge Runtime** - Integración Vercel Edge Functions
- 🌍 **CDN Global** - Estrategias deployment multi-región
- 🖥️ **PWA Desktop** - Capacidades app desktop tipo Electron
- 🤝 **Colaboración equipo** - Edición colaborativa tiempo real
- 🔐 **Seguridad avanzada** - 2FA, RBAC, security headers
### 🌈 **2026 - Características Avanzadas**
**Meta: Tecnologías Web Modernas**
- 🧠 **Generación código IA** - Auto-generación componentes y páginas
- 🎮 **WebGL/Three.js** - Gráficos 3D y experiencias interactivas
- 🌐 **Web3 DeFi** - Integración protocolos DeFi para pagos
- 📡 **Integración IoT** - Conectividad básica dispositivos IoT
- 🎨 **Sistema diseño** - Generación automática biblioteca componentes
- 🔍 **Búsqueda vectorial** - Búsqueda contenido potenciada por IA con embeddings
### 📊 **Métricas y Objetivos 2025**
**Objetivos Realistas y Alcanzables**
- 🎯 **50,000+ proyectos generados** con @rotosaurio/sysrot-core
- 🌍 **15+ idiomas soportados** en sistema i18n
- 🤖 **10+ modelos de IA integrados** (LLaMA, Mistral, etc.)
- ⚡ **<100ms time-to-interactive** en aplicaciones generadas
- 📊 **Core Web Vitals perfecto** (100/100/100/100)
- 🔒 **Zero vulnerabilidades** de seguridad reportadas
### 🛠️ **Tecnologías en Investigación**
**Tecnologías Implementables a Corto Plazo**
- **Rust/WASM** para componentes de alta performance
- **WebGPU** para aceleración gráfica avanzada
- **WebCodecs** para procesamiento multimedia optimizado
- **Origin Private File System** para almacenamiento local avanzado
- **Temporal API** para manejo temporal preciso
- **Navigation API** para SPA routing avanzado
> 💡 **Nota**: Este roadmap es dinámico y se actualiza trimestralmente basado en feedback de la comunidad y avances tecnológicos. Nos enfocamos en metas prácticas e implementables que proporcionan valor real a los desarrolladores.
## 🔧 **Documentación Técnica Completa**
### 📋 **Arquitectura del Proyecto**
```
@rotosaurio/sysrot-core/
├── 📁 cli.js # Punto de entrada del CLI
├── 📁 createProject.js # Lógica de generación de proyectos
├── 📁 template/ # Plantilla base del proyecto
│ ├── 📁 components/ # Componentes React reutilizables
│ │ ├── 📁 ai/ # Componentes de IA integrada
│ │ ├── 📁 auth/ # Sistema de autenticación
│ │ ├── 📁 providers/ # Context providers (i18n, theme)
│ │ ├── 📁 ui/ # Biblioteca de componentes UI
│ │ └── 📁 upload/ # Sistema de carga de archivos
│ ├── 📁 lib/ # Utilidades y configuraciones
│ │ ├── 📄 auth.ts # Configuración NextAuth.js
│ │ ├── 📄 db.ts # Conexiones base de datos
│ │ ├── 📄 i18n.ts # Sistema internacionalización
│ │ ├── 📄 mdx.ts # Procesamiento MDX
│ │ └── 📄 roles.ts # Sistema de roles y permisos
│ ├── 📁 locales/ # Archivos de traducción
│ │ ├── 📄 es.json # Traducciones español (350+ claves)
│ │ └── 📄 en.json # Traducciones inglés (350+ claves)
│ ├── 📁 pages/ # Páginas Next.js (Pages Router)
│ │ ├── 📁 api/ # API Routes backend
│ │ ├── 📁 blog/ # Sistema blog MDX
│ │ └── 📁 ejemplos/ # 11 ejemplos funcionales
│ ├── 📁 posts/ # Artículos MDX de ejemplo
│ ├── 📁 prisma/ # Esquemas de base de datos
│ ├── 📁 styles/ # Estilos globales CSS
│ └── 📁 types/ # Tipos TypeScript
└── 📄 README.md # Documentación principal
```
### ⚙️ **Stack Tecnológico Detallado**
| Categoría | Tecnología | Versión | Propósito |
|-----------|------------|---------|-----------|
| **Core Framework** | Next.js | 14.2.17+ | Framework React fullstack |
| **Lenguaje** | TypeScript | 5.3.3+ | Tipado estático y desarrollo seguro |
| **Runtime** | Node.js | 18+ | Entorno de ejecución JavaScript |
| **UI Framework** | React | 18.2.0+ | Biblioteca de interfaces de usuario |
| **Styling** | TailwindCSS | 3.4.0+ | Framework CSS utility-first |
| **Componentes** | shadcn/ui | Latest | Biblioteca componentes accesibles |
| **Animaciones** | Framer Motion | 10.16.16+ | Animaciones fluidas y micro-interacciones |
| **Iconos** | Lucide React | 0.312.0+ | Iconos SVG optimizados |
| **Temas** | next-themes | 0.2.1+ | Sistema dark/light mode |
#### 🤖 **Inteligencia Artificial**
| Proveedor | Modelo | SDK | Capacidades |
|-----------|--------|-----|-------------|
| **OpenAI** | GPT-4o | openai@4.24.1 | Generación texto avanzada |
| **Anthropic** | Claude 3.5 Sonnet | @anthropic-ai/sdk@0.12.0 | Razonamiento superior |
| **Google** | Gemini Flash Pro | @google/generative-ai@0.2.0 | Procesamiento multimodal |
| **DeepSeek** | R1 Reasoner | Próximamente | Razonamiento lógico especializado |
#### 🔐 **Autenticación y Seguridad**
| Componente | Tecnología | Versión | Funcionalidad |
|-----------|------------|---------|---------------|
| **Auth Provider** | NextAuth.js | 4.24.5 | Autenticación completa |
| **Password Hashing** | bcryptjs | 2.4.3 | Encriptación de contraseñas |
| **Database Adapter** | @auth/prisma-adapter | 1.5.0 | Persistencia de sesiones |
| **Route Protection** | Custom Middleware | - | Protección de rutas automática |
#### 💾 **Bases de Datos Soportadas**
| Base de Datos | Cliente/ORM | Versión | Casos de Uso |
|---------------|-------------|---------|--------------|
| **MongoDB** | Mongoose | 8.0.3+ | Datos no relacionales, escalabilidad |
| **Supabase** | @supabase/supabase-js | 2.39.1+ | PostgreSQL como servicio |
| **Firebase** | Firebase Admin | 11.11.1+ | Real-time, autenticación social |
| **Prisma** | @prisma/client | 5.8.1+ | ORM type-safe, migraciones |
#### 🌍 **Internacionalización**
| Aspecto | Tecnología | Detalles |
|---------|------------|----------|
| **Framework** | React Intl | 6.6.2+ con TypeScript |
| **Idiomas** | Español, Inglés | 350+ claves de traducción |
| **Routing** | Next.js i18n | URLs SEO-friendly (/es/, /en/) |
| **Detección** | Browser API | Detección automática de idioma |
| **Fallbacks** | Español (default) | Sistema robusto de respaldos |
#### 📝 **Sistema de Contenido**
| Funcionalidad | Tecnología | Versión | Características |
|---------------|------------|---------|-----------------|
| **Markdown** | MDX | next-mdx-remote@4.4.1 | Markdown + JSX |
| **Sintaxis** | rehype-highlight | 7.0.0+ | Highlighting código |
| **Navegación** | rehype-slug | 6.0.0+ | Links automáticos |
| **Procesamiento** | remark-gfm | 4.0.0+ | GitHub Flavored Markdown |
#### ☁️ **Upload y Media**
| Servicio | SDK | Versión | Capacidades |
|----------|-----|---------|-------------|
| **Cloudinary** | cloudinary | 1.41.1+ | Optimización automática |
| **Next Integration** | next-cloudinary | 5.13.0+ | Componentes React |
| **Validación** | Zod | 3.22.4+ | Validación tipos y tamaños |
| **UI** | Custom Components | - | Drag & drop, preview |
### 🔧 **Scripts de Desarrollo**
```bash
# Desarrollo
npm run dev # Servidor desarrollo con hot-reload
npm run build # Build producción optimizado
npm run start # Servidor producción
npm run lint # ESLint verificación código
npm run postinstall # Generación Prisma automática
```
### 🌐 **Variables de Entorno**
#### 🔑 **Configuración Requerida**
```env
# Core
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=tu_secreto_ultra_seguro_aqui
# IA - OpenAI
OPENAI_API_KEY=sk-proj-tu_clave_openai_aqui
# IA - Anthropic Claude
ANTHROPIC_API_KEY=sk-ant-api03-tu_clave_claude_aqui
# IA - Google Gemini
GOOGLE_API_KEY=tu_clave_google_ai_aqui
# Upload - Cloudinary
CLOUDINARY_CLOUD_NAME=tu_cloud_name
CLOUDINARY_API_KEY=tu_api_key_cloudinary
CLOUDINARY_API_SECRET=tu_api_secret_cloudinary
```
#### 🗄️ **Base de Datos (Elegir una)**
```env
# MongoDB
MONGODB_URI=mongodb+srv://usuario:password@cluster.mongodb.net/basedatos
# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://tu-proyecto.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=tu_clave_publica_supabase
SUPABASE_SERVICE_ROLE_KEY=tu_clave_privada_supabase
# Firebase
FIREBASE_PROJECT_ID=tu-proyecto-firebase
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\ntu_clave_privada\n-----END PRIVATE KEY-----\n"
FIREBASE_CLIENT_EMAIL=firebase-adminsdk@tu-proyecto.iam.gserviceaccount.com
# Prisma
DATABASE_URL="postgresql://usuario:password@localhost:5432/basedatos?schema=public"
```
### 📊 **Análisis de Performance**
#### ⚡ **Core Web Vitals Optimizaciones**
- **LCP (Largest Contentful Paint)**: < 2.5s garantizado
- **FID (First Input Delay)**: < 100ms mediante code splitting
- **CLS (Cumulative Layout Shift)**: < 0.1 con lazy loading optimizado
- **FCP (First Contentful Paint)**: < 1.8s con SSG cuando posible
#### 🚀 **Optimizaciones Implementadas**
- **Image Optimization**: Next.js Image component automático
- **Font Optimization**: Google Fonts con preload automático
- **Bundle Splitting**: Componentes lazy-loaded inteligentemente
- **Tree Shaking**: Eliminación código no utilizado automática
- **Compression**: Gzip/Brotli habilitado por defecto
## 🏗️ **Arquitectura y Patrones**
### 🎯 **Patrones de Diseño Implementados**
- **Container/Presentational**: Separación lógica/UI en componentes
- **Provider Pattern**: Context API para estado global (i18n, theme)
- **Custom Hooks**: Lógica reutilizable extraída a hooks
- **Compound Components**: Componentes complejos con subcomponentes
- **Render Props**: Flexibilidad en componentes de alto orden
### 🔄 **Estado y Data Flow**
- **React State**: useState para estado local de componentes
- **Context API**: Configuración global (idioma, tema)
- **React Hook Form**: Estado de formularios con validación
- **Server State**: getServerSideProps/getStaticProps según necesidad
### 🛡️ **Seguridad Implementada**
- **CSRF Protection**: Automático con NextAuth.js
- **XSS Prevention**: Sanitización automática React
- **SQL Injection**: ORMs/clients protegidos (Prisma, Mongoose)
- **Environment Variables**: Separación secrets client/server
- **HTTPS Only**: Configuración producción solo HTTPS
## 🎯 **Casos de Uso y Aplicaciones**
### 💼 **Casos de Uso Empresariales**
- **SaaS Platforms**: Aplicaciones con autenticación, billing y multitenancy
- **E-commerce**: Tiendas online con IA para recomendaciones
- **Content Management**: Sistemas de gestión de contenido con blog integrado
- **Corporate Websites**: Sitios corporativos con internacionalización
- **Learning Platforms**: Plataformas educativas con progreso del usuario
### 🚀 **Startups y MVP**
- **Prototipado rápido**: De idea a MVP en horas, no semanas
- **Validación de mercado**: Features básicas funcionando desde día uno
- **Fundraising demos**: Aplicaciones profesionales para presentar a inversores
- **Product Hunt launches**: Aplicaciones polish listas para lanzamiento
- **Technical interviews**: Proyectos impresionantes para entrevistas técnicas
### 🎨 **Proyectos Creativos**
- **Portfolio personal**: Sitios web de desarrolladores y diseñadores
- **Blogs técnicos**: Plataformas de contenido con MDX y sintaxis highlighting
- **Art galleries**: Galerías digitales con upload optimizado de imágenes
- **Creative agencies**: Sitios de agencias con animaciones fluidas
- **Online magazines**: Revistas digitales multiidioma
### 🤖 **Aplicaciones con IA**
- **ChatBots personalizados**: Asistentes virtuales específicos del dominio
- **Content generation**: Herramientas de generación de contenido automático
- **Code assistants**: Asistentes de programación con múltiples modelos
- **Language tutors**: Aplicaciones de enseñanza de idiomas con IA
- **Data analysis tools**: Herramientas de análisis con procesamiento IA
## 📚 **Best Practices y Recomendaciones**
### 🏗️ **Arquitectura Recomendada**
```typescript
// Estructura de componentes recomendada
src/
├── components/
│ ├── ui/ # Componentes base reutilizables
│ ├── forms/ # Componentes específicos de formularios
│ ├── layout/ # Componentes de layout (Header, Footer)
│ └── features/ # Componentes específicos de funcionalidades
├── hooks/ # Custom hooks reutilizables
├── lib/ # Utilidades y configuraciones
├── styles/ # Estilos globales y temas
└── types/ # Definiciones TypeScript centralizadas
```
### ⚡ **Optimizaciones de Performance**
- **Component Lazy Loading**: Usar `React.lazy()` para componentes pesados
- **Image Optimization**: Siempre usar `next/image` para imágenes
- **Bundle Analysis**: Usar `@next/bundle-analyzer` para analizar bundles
- **Database Indexing**: Indexar campos frecuentemente consultados
- **Caching Strategy**: Implementar caché en API routes cuando apropriado
### 🔒 **Seguridad Avanzada**
```typescript
// Validación de entrada robusta
import { z } from 'zod';
const userSchema = z.object({
email: z.string().email().max(100),
password: z.string().min(8).max(100),
role: z.enum(['user', 'admin']).default('user')
});
// Rate limiting en API routes
import rateLimit from 'express-rate-limit';
const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutos
max: 100 // máximo 100 requests por IP
});
```
### 🌍 **Internacionalización Avanzada**
```typescript
// Estructura recomendada para claves de traducción
{
"pages": {
"home": {
"title": "Título de la página principal",
"description": "Descripción SEO"
}
},
"components": {
"button": {
"submit": "Enviar",
"cancel": "Cancelar"
}
},
"errors": {
"validation": {
"required": "Este campo es requerido",
"email": "Email inválido"
}
}
}
```
## 🛠️ **Troubleshooting y Soluciones Comunes**
### ❌ **Errores Frecuentes y Soluciones**
#### 🔧 **Error: "Cannot find module 'commander'"**
```bash
# Solución: Reinstalar dependencias del CLI
npm uninstall -g @rotosaurio/sysrot-core
npm install -g @rotosaurio/sysrot-core@latest
```
#### 🔧 **Error: "Missing translation for key"**
```bash
# Verificar que exista la clave en ambos archivos de traducción
# locales/es.json y locales/en.json deben tener la misma estructura
```
#### 🔧 **Error: "Prisma generate failed"**
```bash
# Regenerar el cliente Prisma
npx prisma generate
npx prisma db push
```
#### 🔧 **Error: "Build failed - Module not found"**
```bash
# Limpiar caché y reinstalar
rm -rf .next
rm -rf node_modules
npm install
npm run build
```
### 🐛 **Debugging Avanzado**
#### 🔍 **Debug de Variables de Entorno**
```javascript
// Verificar variables de entorno en desarrollo
console.log('Environment Check:', {
NODE_ENV: process.env.NODE_ENV,
NEXTAUTH_URL: process.env.NEXTAUTH_URL,
hasOpenAI: !!process.env.OPENAI_API_KEY,
hasCloudinary: !!process.env.CLOUDINARY_CLOUD_NAME
});
```
#### 🔍 **Debug de Traducciones**
```javascript
// Verificar carga de traducciones
import { loadMessages } from '@/lib/i18n';
const messages = loadMessages('es');
console.log('Loaded messages:', Object.keys(messages));
```
### 🚀 **Performance Monitoring**
#### 📊 **Core Web Vitals Tracking**
```javascript
// pages/_app.tsx
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
function reportWebVitals(metric) {
console.log(metric);
// Enviar a analytics
}
export function reportWebVitals(metric) {
reportWebVitals(metric);
}
```
## 🤝 **Comunidad y Soporte**
### 💬 **Canales de Comunicación**
- 🐛 **Issues**: [GitHub Issues](https://github.com/rotosaurio/@rotosaurio/sysrot-core/issues) - Reportar bugs y solicitar features
- 💭 **Discussions**: [GitHub Discussions](https://github.com/rotosaurio/@rotosaurio/sysrot-core/discussions) - Preguntas generales y ayuda
- 📧 **Email**: rotosaurio@example.com - Soporte directo y consultas comerciales
- 🐦 **Twitter**: [@@rotosaurio/sysrot-core](https://twitter.com/@rotosaurio/sysrot-core) - Actualizaciones y anuncios
### 🏆 **Contributors y Reconocimientos**
- 👨💻 **Core Team**: Desarrolladores principales del proyecto
- 🌟 **Contributors**: Comunidad activa que mejora @rotosaurio/sysrot-core constantemente
- 🎨 **Design**: UI/UX contributors y design system maintainers
- 📚 **Documentation**: Technical writers y documentation maintainers
### 🎯 **Cómo Contribuir**
#### 🔧 **Setup para Development**
```bash
# 1. Fork y clonar
git clone https://github.com/tuusuario/@rotosaurio/sysrot-core.git
cd @rotosaurio/sysrot-core
# 2. Instalar dependencias
npm install
# 3. Crear branch feature
git checkout -b feature/nueva-funcionalidad
# 4. Hacer cambios y commit
git commit -m "feat: agregar nueva funcionalidad"
# 5. Push y crear PR
git push origin feature/nueva-funcionalidad
```
#### 📋 **Guidelines de Contribución**
- **Conventional Commits**: Usar formato estándar para commits
- **TypeScript strict**: Mantener tipado estricto en todo el código
- **Testing**: Agregar tests para nuevas funcionalidades
- **Documentation**: Actualizar README y docs cuando sea necesario
- **Code Review**: Todas las PRs requieren review antes de merge
### 🌟 **Sponsors y Partners**
- 🚀 **Vercel**: Hosting y deployment platform partner
- 🎨 **Tailwind CSS**: Official UI framework
- 🤖 **OpenAI**: AI integration partner
- 🔥 **Supabase**: Database platform sponsor
- ☁️ **Cloudinary**: Media management sponsor
### 📈 **Estadísticas del Proyecto**
- ⭐ **GitHub Stars**: Tracking community growth
- 📦 **NPM Downloads**: Weekly/monthly download metrics
- 🌍 **Global Usage**: Projects created worldwide
- 🔧 **Active Contributors**: Community involvement metrics
- 📊 **Performance Metrics**: Generated project performance data
### 🎁 **Recursos Adicionales**
- 📝 **Blog**: Tutoriales detallados y best practices
- 🎥 **YouTube**: Video tutorials y demos
- 📚 **Documentation**: Documentación exhaustiva online
- 🛠️ **Tools**: Herramientas complementarias para desarrollo
- 🎨 **Templates**: Templates adicionales y ejemplos
⭐ **¡No olvides dar una estrella al proyecto si te ha sido útil!**
## 📋 Historial de Versiones
### Versión 2.4.0 (Actual) ✨
- **📚 DOCUMENTACIÓN COMPLETA**: Documentación profesional enterprise con 900+ líneas
- **🗺️ ROADMAP 2025-2030**: Planificación detallada hasta 2030 con tecnologías emergentes
- **🎯 CASOS DE USO**: 16+ escenarios documentados (empresariales, startups, creativos, IA)
- **📚 BEST PRACTICES**: Arquitectura, performance, seguridad, troubleshooting
- **🤝 COMUNIDAD**: Canales, contribución, sponsors, recursos adicionales
- **🔧 DOCUMENTACIÓN TÉCNICA**: Stack completo, variables entorno, performance
### Versión 2.3.6
- **🌍 TRADUCCIONES COMPLETADAS**: Traducciones faltantes agregadas y errores corregidos
- **🔧 ERROR DE COMPILACIÓN**: Removido import duplicado `useTranslation` en image-upload.tsx
- **✅ PÁGINAS ESPECÍFICAS**: Corregidas /en/ejemplos/notificaciones, /en/ejemplos/database
- **📦 SISTEMA ROBUSTO**: 350+ claves de traducción en español e inglés
### Versión 2.3.5
- **🔧 DEPENDENCIAS CLI**: Agregadas dependencias faltantes `commander` e `inquirer`
- **🐛 CLI FUNCIONAL**: Corregido error "Cannot find module 'commander'"
- **✅ MULTIPLATAFORMA**: CLI funciona en Windows, macOS y Linux
### Versión 2.3.4
- **🛠️ CLI WINDOWS**: Corregido error de instalación en Windows
- **🔧 SPAWN CMD**: Configuración específica para Windows en installDependencies
- **✅ CROSS-PLATFORM**: CLI totalmente funcional en todas las plataformas
### Versión 2.3.3
- **📚 README INTERNACIONAL**: README principal en inglés, README.es.md en español
- **🌍 COMPONENTES CORE**: Upload e IA completamente traducidos
- **📦 NPM COMPATIBLE**: Documentación en inglés para mejor distribución
### Versión 2.3.2
- **✅ TRADUCCIONES PÁGINAS**: Todas las páginas de ejemplos completamente traducidas
- **📊 180+ NUEVAS CLAVES**: Animaciones, componentes, database, formularios, etc.
- **🎯 COBERTURA 100%**: Sistema de internacionalización completamente funcional
### Versión 2.3.1
- **🌍 TRADUCCIONES PRINCIPALES**: Páginas principales 100% traducidas
- **📦 100+ CLAVES**: Home, examples, blog, auth, AI, upload completamente localizados
- **🔧 SISTEMA ROBUSTO**: React Intl v2.3.0 con fallbacks automáticos
### Versión 2.3.0
- **🔧 SISTEMA i18n DEFINITIVO**: Carga síncrona con require() y manejo de errores
- **✅ ZERO ERRORES**: Eliminados todos los errores "Missing translation"
- **🚀 FUNCIONAL**: Cambio de idioma español/inglés sin errores
### Versión 2.2.9
- **🐛 CRÍTICO**: Corregido completamente el sistema de traducciones que no cargaba los mensajes
- **📦 IMPORTS ESTÁTICOS**: Cambiado require() dinámico por imports estáticos para mejor compatibilidad
- **🛡️ PROVIDER ROBUSTO**: Mejorado IntlProvider con manejo de errores y fallbacks automáticos
- **⚡ PERFORMANCE**: Carga síncrona de mensajes para mejor performance inicial
### Versión 2.2.8
- **🐛 FIXES**: Corregida advertencia de Next.js config para i18n.localeDetection
- **🎨 UI**: Eliminado círculo verde del cursor, ahora usa cursores del sistema por defecto
- **🔧 UX**: Agregados cursores específicos para elementos interactivos (pointer, text)
### Versión 2.2.7
- **🐛 CRÍTICO**: Corrección definitiva del error de BOM en schema.prisma
- **🔧 Node.js**: Usado método Node.js para garantizar archivo sin BOM
- **✅ Prisma P1012**: Error de validación completamente eliminado
### Versión 2.2.6
- **🐛 CRÍTICO**: Corregido error de validación de Prisma schema
- **🔧 BOM Eliminado**: Removido Byte Order Mark que causaba errores de parsing
- **✅ Prisma Generate**: Funcionamiento completo de generación de cliente Prisma
### Versión 2.2.5
- **🐛 CRÍTICO**: Corregido error "Command failed: npm install" durante generación
- **🔧 Mejorado**: Manejo de errores en instalación de dependencias
- **✅ Estable**: CLI completamente funcional sin errores
### Versión 2.2.4
- **🔧 Corregido**: Error "ora is not a function" en spinner de carga
- **⚡ Optimizado**: Compatibilidad con CommonJS para ora v5.4.1
- **✅ Funcional**: CLI ejecuta sin errores de dependencias
### Versión 2.2.3
- **🔧 Corregido**: Error "inquirer.prompt is not a function"
- **⚡ Optimizado**: Compatibilidad con CommonJS para inquirer v8.2.6
- **🎨 Mejorado**: ASCII art más compacto y elegante