sysrotcore/README.md

CLI de nueva generación para crear proyectos Next.js 14+ con IA integrada y componentes modernos

# 🚀 SysrotCore v2.1.16

<div align="center">

**CLI de nueva generación para crear proyectos Next.js 14+ con Pages Router, múltiples modelos de IA y ecosistema completo de desarrollo**

[![npm version](https://badge.fury.io/js/sysrotcore.svg)](https://badge.fury.io/js/sysrotcore)
[![Downloads](https://img.shields.io/npm/dm/sysrotcore.svg)](https://npmjs.com/package/sysrotcore)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Node.js](https://img.shields.io/badge/Node.js-18%2B-green.svg)](https://nodejs.org/)
[![Next.js](https://img.shields.io/badge/Next.js-14%2B-black.svg)](https://nextjs.org/)

**🚀 Comando: `npx sysrotcore` | 🎨 11 Ejemplos Funcionales | 🤖 3 Modelos de IA Integrados**

**🌍 [English README](./README.en.md) | 🇪🇸 Español (actual)**

</div>

## ✨ **¿Por Qué SysrotCore?**

En **junio 2025**, el desarrollo web requiere herramientas que aceleren la creación de aplicaciones modernas sin sacrificar calidad. **SysrotCore** 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 `sysrotcore` y el comando principal es `npx sysrotcore` para máxima simplicidad.

## 🔥 **Características Implementadas**

### 🤖 **Modelos de IA Integrados**
- **GPT-4o (OpenAI v4.24.1)** - Razonamiento avanzado y generación de código
- **Claude 3.5 Sonnet (Anthropic v0.12.0)** - Análisis profundo y documentación
- **Gemini Flash Pro (Google v0.2.0)** - Procesamiento multimodal rápido
- **Interfaz unificada** - Un componente para todos los modelos
- **Streaming real-time** - Respuestas en vivo con typing indicator
- **Fallback automático** - Resiliencia ante errores de API
- **Context switching** - Cambio dinámico entre modelos

### 🌍 **Internacionalización Completa**
- **2 idiomas soportados** - Español (predeterminado) e Inglés
- **Next.js i18n built-in** - URLs amigables para SEO (/es/, /en/)
- **Detección automática** - Detección del idioma del navegador
- **React Intl integrado** - Estándar de la industria para traducciones
- **Soporte TypeScript** - Traducciones type-safe
- **Selector de idioma** - Componente elegante incluido
- **Formateo de fechas** - Fechas localizadas y tiempos relativos
- **Listo para RTL** - Extensible para árabe, hebreo, etc.

### 🎨 **Sistema de Diseño Moderno**
- **TailwindCSS 3.4+** - Utilidades CSS de última generación
- **Dark/Light/System** - Tema adaptativo inteligente con next-themes v0.2.1
- **Responsive First** - Mobile, tablet, desktop perfecto
- **50+ Componentes UI** - Organizados en 6 categorías production-ready
- **60+ Animaciones** - CSS3, Framer Motion, micro-interacciones
- **Accessibility A11Y** - WCAG 2.1 AA compliant
- **Performance Optimized** - Core Web Vitals perfectos, 60 FPS garantizados

### 🧩 **Biblioteca de Componentes Completa**

#### **🎯 Básicos (12 componentes)**
- **Botones Avanzados** - Gradientes animados, outline effects, magnetic hover
- **Cards Modernas** - Pricing, stats, interactive con efectos 3D
- **Badges Interactivos** - Estados, colores, animaciones

#### **📝 Formularios (10 componentes)**
- **Floating Labels** - Inputs modernos con animaciones suaves
- **Inputs con Iconos** - Validación visual en tiempo real
- **Selects Modernos** - Dropdown customizados con búsqueda
- **Toggle Switches** - Animaciones fluidas y estados múltiples

#### **🧭 Navegación (8 componentes)**
- **Breadcrumbs Interactivos** - Con iconos y hover effects
- **Sidebar Moderno** - Adaptativo con animaciones de estado
- **Tabs Animados** - Transiciones suaves entre secciones

#### **💬 Feedback (12 componentes)**
- **Sistema de Alertas** - Success, warning, error con iconos
- **Modales Modernos** - Backdrop blur, animaciones de entrada
- **Progress Indicators** - Barras lineales y circulares animadas
- **Loading States** - Spinners, dots, skeletons optimizados

#### **📊 Datos (10 componentes)**
- **Tablas Interactivas** - Sorting, filtros, paginación
- **Stats Cards** - Métricas con gráficos integrados
- **Data Visualization** - Charts básicos con Chart.js ready

#### **📐 Layout (8 componentes)**
- **Grid Systems** - Responsive con breakpoints optimizados
- **Flexbox Layouts** - Center, space-between, wrap patterns
- **Container Sizes** - sm, md, lg, xl, 2xl con max-width

### ✨ **Showcase de Animaciones Masivo**

#### **🎯 Básicas (8 animaciones)**
- **Fade, Slide, Scale, Rotate** - Entradas suaves optimizadas
- **CSS Keyframes** - Pulse, bounce, shake con timing perfecto

#### **⭐ Hover Effects (12 efectos)**
- **Lift Effect** - Elevación con sombra dinámica
- **Glow Effect** - Resplandor de color al hover
- **Slide Content** - Revelado de contenido oculto
- **Magnetic Buttons** - Atracción visual al cursor

#### **🔮 Micro-interacciones (15 efectos)**
- **Ripple Effect** - Ondas al hacer click
- **Magnetic Effect** - Elementos que siguen el cursor
- **Morphing Icons** - Iconos que cambian forma
- **Floating Inputs** - Labels que flotan suavemente
- **Toggle Moderno** - Switches con gradientes animados
- **Heart Animation** - Like buttons con efectos

#### **🚀 Avanzadas (25+ animaciones)**
- **Floating Elements** - Partículas que flotan orgánicamente
- **Morphing Shapes** - Formas que cambian geometría
- **Particle Systems** - Efectos de lluvia y partículas
- **Matrix Rain** - Caracteres cayendo estilo matrix
- **Holographic Effects** - Colores holográficos cambiantes
- **DNA Helix** - Animación 3D de doble hélice
- **Physics-based** - Pendulum, spring bounce realistas
- **3D Effects** - Tilt cards, flip cards, glassmorphism

### 🎮 **Mouse Follower Perfecto**
- **Cursor centrado** - Posicionamiento perfecto con offset calculado
- **Transiciones suaves** - 75ms ease-out para fluidez
- **Mix-blend-mode** - Efecto de fusión con el contenido
- **Responsive** - Se activa/desactiva según la interacción

### 🛡️ **Autenticación Enterprise-Grade**
- **NextAuth.js 4.24.5** - Autenticación robusta y segura
- **6 OAuth Providers** - Google, GitHub, Apple, Discord, LinkedIn, Email
- **Magic Links** - Login sin contraseña
- **Multi-Factor Auth** - 2FA/TOTP integrado
- **Role-Based Access** - Admin, User, Moderator, Custom
- **Session Management** - JWT + Database sessions
- **CSRF Protection** - Seguridad automática contra ataques

### 📊 **Multi-Database Support**
- **MongoDB v6.3.0** - NoSQL con Mongoose ODM v8.0.3
- **Supabase v2.39.1** - PostgreSQL con Edge Functions y Auth
- **Firebase v10.7.1** - Real-time + Analytics + Admin v11.11.1
- **Connection pooling** - Optimización de conexiones
- **Migration support** - Esquemas versionados

### 📝 **Formularios y Validación Avanzada**
- **React Hook Form v7.49.2** - Performance optimizada sin re-renders
- **Zod v3.22.4** - Validación TypeScript-first con inferencia
- **Hookform Resolvers v3.3.3** - Integración perfecta
- **Validación en tiempo real** - UX optimizada con debounce
- **Error handling** - Mensajes personalizados con i18n

### 📤 **Gestión de Archivos Premium**
- **Cloudinary v1.41.1** - CDN global con 99.9% uptime
- **Next-Cloudinary v5.13.0** - Integración Next.js optimizada
- **Drag & Drop** - Interfaz intuitiva con preview
- **Múltiples formatos** - Imágenes, videos, documentos
- **Optimización automática** - WebP, AVIF, resize dinámico
- **Upload progress** - Barras de progreso en tiempo real

### 📚 **Sistema de Blog/CMS Completo**
- **MDX Support** - Markdown + React components
- **Gray Matter v4.0.3** - Frontmatter parsing optimizado
- **3 Artículos Incluidos** - Contenido profesional de ejemplo
- **Remark v15.0.1** - Markdown processing avanzado
- **Rehype Highlight v7.0.0** - Syntax highlighting con temas
- **Remark GFM v4.0.0** - GitHub Flavored Markdown
- **Date-fns v2.30.0** - Manejo de fechas internacional
- **SEO optimizado** - Meta tags automáticos, Open Graph, Twitter Cards

### 🎨 **Títulos con Shadow Degradado**
- **Gradiente de resplandor** - Efecto suave detrás del texto
- **Blur optimizado** - 3xl blur con scale-110 para mejor efecto
- **Z-index correcto** - Posicionamiento perfecto sin interferencias
- **Responsive** - Se adapta a todos los tamaños de pantalla

### 🏷️ **Terminología Neutral**
- **Sin términos comerciales** - Eliminados "Premium", "Pro", términos de pago
- **Accesibilidad mejorada** - Interfaz sin implicaciones de costos
- **Open source friendly** - Terminología alineada con proyectos libres
- **Experiencia unificada** - Todos los usuarios tienen acceso completo

## 🛠️ **Instalación y Uso**

### **⚠️ Aclaración Importante**
Este directorio (`base/`) contiene el **CLI generator** de SysrotCore, **NO** es un proyecto Next.js. 

- ❌ **No ejecutes** `npm run dev` aquí
- ✅ **Usa** `npx sysrotcore mi-proyecto` para generar un proyecto Next.js
- ✅ **El script `dev`** estará disponible en el proyecto generado

### **📝 Importante: Comando Simplificado**
- **Nombre del paquete NPM:** `sysrotcore`
- **Comando CLI:** `npx sysrotcore` 
- **¿Por qué?** Un solo comando simple y memorable

### **Crear un Proyecto**

```bash
# Opción 1: NPX (Recomendado) - Siempre última versión
npx sysrotcore mi-proyecto

# Opción 2: Con nombre específico
npx sysrotcore nombre-de-tu-app

# Opción 3: Instalación global
npm install -g sysrotcore
sysrotcore mi-proyecto
```

### **Opciones de CLI**

```bash
# Ver ayuda completa
npx sysrotcore --help

# Ver versión actual
npx sysrotcore --version
```

**💡 Tip:** Usa siempre `npx sysrotcore` para obtener automáticamente la última versión sin instalación global.

## 🎮 **Configuración Interactiva Completa**

El CLI incluye un asistente inteligente con **15 categorías de configuración**:

### ⚙️ **Stack Tecnológico Base**
```bash
? ¿Deseas TypeScript configurado? (Y/n) ✨ Recomendado
? ¿Deseas TailwindCSS configurado? (Y/n) ✨ Recomendado  
? ¿Deseas ESLint + Prettier configurado? (Y/n) ✨ Recomendado
? ¿Deseas configuración de testing (Jest + Testing Library)? (y/N)
```

### 🗄️ **Base de Datos & Backend**
```bash
? ¿Qué base de datos deseas usar?
  ❯ Ninguna
    MongoDB (NoSQL - Recomendado para MVP)
    Supabase (PostgreSQL + Auth)
    Firebase (Real-time + Analytics)
    
? ¿Deseas ORM/ODM?
  ❯ Mongoose (MongoDB)
    Ninguno
```

### 🔐 **Autenticación & Seguridad**
```bash
? ¿Deseas sistema de autenticación? (Y/n) ✨ Recomendado
? Selecciona los proveedores:
  ◯ Google (OAuth 2.0)
  ◯ GitHub (Developer friendly)
  ◯ Apple (iOS users)
  ◯ Discord (Gaming/Community)
  ◯ Email (Magic links)
  ◯ Credentials (Username/Password)
  
? ¿Deseas sistema de roles avanzado? (Y/n)
  - Admin, User, Moderator
  - Permisos granulares
  - Middleware de protección
  
? ¿Deseas autenticación multi-factor? (y/N)
```

### 🤖 **Inteligencia Artificial**
```bash
? ¿Deseas integración con IA? (Y/n) ✨ Popular
? Selecciona los modelos:
  ◯ GPT-4o (OpenAI) - Mejor para código y texto
  ◯ Claude 3.5 Sonnet (Anthropic) - Análisis profundo
  ◯ Gemini Flash Pro (Google) - Multimodal rápido
  
? ¿Deseas interfaz de chat integrada? (Y/n)
? ¿Deseas funciones de AI para usuarios finales? (y/N)
```

### 📤 **Gestión de Archivos & Media**
```bash
? ¿Deseas integración de upload de archivos? (Y/n)
? ¿Deseas integración con Cloudinary para carga de imágenes? (y/N)
? ¿Deseas optimización automática de imágenes? (Y/n)
? ¿Deseas soporte para múltiples formatos? (WebP, AVIF) (Y/n)
```

### 📝 **Content Management**
```bash
? ¿Deseas sistema de blog/contenido? (Y/n)
? Selecciona el tipo:
  ❯ Blog MDX (Local files)
    CMS Headless (Contentful/Strapi)
    Hybrid (MDX + CMS)
    
? ¿Deseas características avanzadas?
  ◯ Syntax highlighting (100+ lenguajes)
  ◯ SEO optimization automático
  ◯ RSS feed generation
  ◯ Sitemap automático
  ◯ Related posts AI-powered
```

### 📋 **Formularios & Validación**
```bash
? ¿Deseas sistema de formularios avanzado? (Y/n)
? Características incluidas:
  ✅ React Hook Form (Performance optimized)
  ✅ Zod validation (Type-safe)
  ✅ Validación en tiempo real
  ✅ Mensajes de error personalizados
  ✅ Soporte multi-step forms
  ✅ File upload integration
```

### 🎨 **UI/UX & Temas**
```bash
? ¿Deseas sistema de temas avanzado? (Y/n)
? Opciones disponibles:
  ✅ Dark/Light/System modes
  ✅ Múltiples color schemes
  ✅ Modo alto contraste
  ✅ Persistencia de preferencias
  ✅ Transiciones suaves
  
? ¿Deseas biblioteca de componentes? (Y/n) ✨ Altamente recomendado
  - 50+ componentes production-ready
  - Totalmente customizables
  - Documentación integrada
```

### 🎬 **Animaciones & Interacciones**
```bash
? ¿Deseas animaciones fluidas? (y/N)
? Biblioteca a usar:
  ❯ Framer Motion (Más completa)
    React Spring (Performance)
    CSS Animations (Lightweight)
    
? ¿Deseas micro-interacciones? (y/N)
  - Hover effects
  - Loading states
  - Page transitions
  - Scroll animations
```

### 🔔 **Notificaciones & Feedback**
```bash
? ¿Deseas sistema de notificaciones? (Y/n) ✨ Recomendado
? Características:
  ✅ Toast notifications (react-hot-toast)
  ✅ Push notifications (Web)
  ✅ Email notifications (Resend/SendGrid)
  ✅ SMS notifications (Twilio)
  
? ¿Deseas analytics integrado? (y/N)
  - Google Analytics 4
  - Vercel Analytics
  - Custom events tracking
```

### 🧪 **Páginas de Ejemplo & Demo**
```bash
? ¿Deseas incluir ejemplos funcionales? (Y/n) ✨ Perfecto para aprender
? Selecciona los ejemplos:
  ◯ Dashboard de Autenticación - Login, registro, perfil
  ◯ Chat con IA Multi-modelo - Interfaz completa
  ◯ Biblioteca de Componentes - 50+ componentes
  ◯ Upload de Archivos - Drag & drop, preview
  ◯ Formularios Avanzados - Validación real-time
  ◯ Animaciones Showcase - Framer Motion demos
  ◯ Sistema de Notificaciones - Todos los tipos
  ◯ CRUD de Base de Datos - Create, Read, Update, Delete
  ◯ Blog/CMS Demo - Posts, categorías, search
  ◯ E-commerce Básico - Productos, carrito, checkout
  ◯ Panel de Analytics - Gráficos y métricas
  ◯ TypeScript Avanzado - Patterns y best practices
  ◯ API Rest Completa - Endpoints documentados
  ◯ Página 404 Personalizada - Error handling elegante
```

### 📚 **Documentación & Configuración**
```bash
? ¿Deseas archivo .env.example completo? (Y/n) ✨ Esencial
? ¿Deseas documentación exhaustiva? (Y/n)
  - README.md detallado
  - DOCUMENTATION.md técnica
  - API documentation
  - Component storybook
  
? ¿Deseas configuración de desarrollo? (Y/n)
  - VS Code settings
  - Git hooks (Husky)
  - Commit conventions
```

## 📁 **Estructura del Proyecto Generado**

```
mi-proyecto/
├── components/              # Componentes reutilizables
│   ├── ai/                 # Componentes de IA
│   │   └── openai-prompt.tsx   # Selector multi-modelo
│   ├── auth/               # Sistema de autenticación
│   │   └── auth-form.tsx       # Formulario login/registro
│   ├── ui/                 # Componentes de interfaz
│   │   ├── layout.tsx          # Layout principal
│   │   ├── theme-toggle.tsx    # Selector tema claro/oscuro
│   │   ├── icons.tsx           # Iconos personalizados
│   │   └── form.tsx            # Componentes de formulario
│   ├── upload/             # Carga de archivos
│   │   └── image-upload.tsx    # Upload con preview
│   └── theme-provider.tsx  # Proveedor de temas
├── pages/                   # Pages Router
│   ├── api/                # API Routes
│   │   ├── ai.ts              # Endpoint multi-modelo IA
│   │   ├── upload.ts          # Endpoint Cloudinary
│   │   ├── database/          # APIs de prueba DB
│   │   │   ├── mongodb-test.ts
│   │   │   ├── supabase-test.ts
│   │   │   └── firebase-test.ts
│   │   └── auth/              # NextAuth endpoints
│   ├── blog/               # Sistema de blog
│   │   ├── index.tsx          # Lista de posts
│   │   └── [slug].tsx         # Post individual
│   ├── ejemplos/           # Páginas de ejemplo
│   │   ├── index.tsx          # Índice de ejemplos
│   │   ├── ai.tsx             # Demo IA multi-modelo
│   │   ├── auth.tsx           # Demo autenticación
│   │   ├── componentes.tsx    # Biblioteca de componentes
│   │   ├── upload.tsx         # Demo upload
│   │   ├── formularios.tsx    # Demo formularios
│   │   ├── animaciones.tsx    # Demo Framer Motion
│   │   ├── notificaciones.tsx # Demo react-hot-toast
│   │   ├── database.tsx       # Demo bases de datos
│   │   ├── ui-temas.tsx       # Demo temas y UI
│   │   └── typescript.tsx     # Demo TypeScript
│   ├── _app.tsx            # App personalizada
│   ├── _document.tsx       # Document personalizado
│   ├── index.tsx           # Homepage moderna
│   └── 404.tsx             # Página de error
├── lib/                     # Utilidades y configuración
│   ├── auth.ts             # Configuración NextAuth
│   ├── db.ts               # Conexiones de base de datos
│   ├── mdx.ts              # Utilidades MDX
│   └── roles.ts            # Sistema de roles
├── styles/                  # Estilos globales
│   └── globals.css         # CSS global con Tailwind
├── public/                  # Archivos estáticos
│   ├── favicon.ico         # Favicon
│   └── images/             # Imágenes públicas
├── content/                 # Contenido MDX (si blog activado)
│   └── blog/               # Posts del blog
├── middleware.ts           # Middleware protección rutas
├── next.config.js          # Configuración Next.js optimizada
├── tailwind.config.js      # Configuración Tailwind personalizada
├── tsconfig.json           # Configuración TypeScript
├── .eslintrc.json          # Configuración ESLint
├── postcss.config.js       # Configuración PostCSS
├── .env.example            # Variables de entorno ejemplo
├── README.md               # Guía de inicio
├── DOCUMENTACION.md        # Documentación técnica completa
└── package.json            # Dependencias y scripts
```

## 🔧 **Configuración Post-Instalación**

### **1. Variables de Entorno**
```bash
cd mi-proyecto
cp .env.example .env.local
```

Configura las variables según tus selecciones:

```env
# Base
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Autenticación (si seleccionado)
NEXTAUTH_SECRET=tu-secreto-super-secreto
NEXTAUTH_URL=http://localhost:3000

# Modelos de IA (si seleccionado)
OPENAI_API_KEY=sk-tu-openai-api-key
ANTHROPIC_API_KEY=sk-ant-tu-anthropic-api-key
GOOGLE_AI_API_KEY=tu-google-ai-api-key

# Cloudinary (si seleccionado)
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=tu-cloud-name
CLOUDINARY_API_KEY=tu-cloudinary-api-key
CLOUDINARY_API_SECRET=tu-cloudinary-api-secret

# OAuth Providers (si seleccionado)
GOOGLE_CLIENT_ID=tu-google-client-id
GOOGLE_CLIENT_SECRET=tu-google-client-secret
GITHUB_ID=tu-github-id
GITHUB_SECRET=tu-github-secret

# MongoDB (si seleccionado)
MONGODB_URI=mongodb://localhost:27017/tu-database
# o MongoDB Atlas:
# MONGODB_URI=mongodb+srv://usuario:password@cluster.mongodb.net/mi-proyecto

# Supabase (si seleccionado)
NEXT_PUBLIC_SUPABASE_URL=tu-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=tu-supabase-anon-key
SUPABASE_SERVICE_ROLE_KEY=tu-service-role-key

# Firebase (si seleccionado)
NEXT_PUBLIC_FIREBASE_API_KEY=tu-firebase-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=tu-proyecto.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=tu-proyecto-id
```

### **2. Iniciar el Proyecto**
```bash
npm run dev
```

Visita [http://localhost:3000](http://localhost:3000) para ver tu aplicación.

### **3. Configuración Específica por Feature**

#### **Para MongoDB:**
```bash
# Instalar MongoDB localmente o usar MongoDB Atlas
# La conexión se configura automáticamente en lib/db.ts
```

#### **Para Cloudinary:**
```bash
# 1. Crear cuenta en cloudinary.com
# 2. Obtener cloud_name, api_key, api_secret del dashboard
# 3. Configurar en .env.local
```

#### **Para Modelos de IA:**
```bash
# OpenAI: platform.openai.com
# Anthropic: console.anthropic.com  
# Google AI: makersuite.google.com
```

## 📚 **Ejemplos de Uso Incluidos**

El template incluye **10+ páginas de ejemplo** completamente funcionales:

### 🏠 **Homepage Moderna** (`/`)
- Hero section con gradientes animados
- Showcase de features con iconos
- Call-to-actions optimizados
- Diseño 100% responsivo

### 🧪 **Ejemplos Interactivos** (`/ejemplos`)

#### **🤖 `/ejemplos/ai`** - Demo Multi-Modelo de IA
- Interfaz unificada para 3 modelos de IA
- Selector de modelo dinámico
- Streaming de respuestas en tiempo real
- Manejo de errores robusto

#### **🔐 `/ejemplos/auth`** - Sistema de Autenticación
- Login/registro con múltiples proveedores
- Protección de rutas automática
- Sistema de roles funcional
- Sesiones persistentes

#### **🎨 `/ejemplos/componentes`** - Biblioteca de Componentes
- **6 categorías**: Básicos, Formularios, Navegación, Feedback, Layout, Datos
- **50+ componentes** listos para usar
- Código copy-paste incluido
- Documentación de personalización

#### **📤 `/ejemplos/upload`** - Carga de Imágenes
- Drag & drop con preview
- Integración Cloudinary completa
- Optimización automática
- Gestión de errores

#### **📋 `/ejemplos/formularios`** - Formularios Avanzados
- React Hook Form + Zod validation
- Validación en tiempo real
- Tipos TypeScript automáticos
- Manejo de estados de carga

#### **🎬 `/ejemplos/animaciones`** - Efectos y Animaciones
- Framer Motion showcase completo
- Animaciones scroll-triggered
- Microinteracciones
- Performance optimizada

#### **🔔 `/ejemplos/notificaciones`** - Sistema de Notificaciones
- Toast notifications avanzadas
- Promise-based toasts
- Notificaciones personalizadas con JSX
- Control de duración y posición

#### **🗄️ `/ejemplos/database`** - Integración de Bases de Datos
- MongoDB con Mongoose
- Supabase con tipos automáticos
- Firebase Firestore con real-time
- Ejemplos de código completos

#### **🌓 `/ejemplos/ui-temas`** - Sistema de Temas
- Control de tema claro/oscuro/sistema
- Componentes UI responsivos
- Paleta de colores consistente
- Persistencia de preferencias

#### **⚡ `/ejemplos/typescript`** - Características TypeScript
- Interfaces y tipos avanzados
- Generic functions
- Discriminated unions
- Type guards y utility types

### 📝 **Blog Funcional** (`/blog`)
- Lista de posts con metadata
- Posts individuales con MDX
- Syntax highlighting automático
- Navegación entre posts
- SEO optimizado

## 🎨 **Componentes Destacados**

### **Componentes de IA**
```tsx
import { AIPrompt } from '@/components/ai/openai-prompt';

export default function MyPage() {
  return <AIPrompt />; // Selector multi-modelo integrado
}
```

### **Sistema de Autenticación**
```tsx
import { useSession } from 'next-auth/react';
import { ProtectedRoute } from '@/components/auth/protected-route';

export default function ProtectedPage() {
  return (
    <ProtectedRoute requiredRole="admin">
      <h1>Solo administradores pueden ver esto</h1>
    </ProtectedRoute>
  );
}
```

### **Formularios con Validación**
```tsx
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  name: z.string().min(2)
});

export function MyForm() {
  const form = useForm({
    resolver: zodResolver(schema)
  });
  
  return (/* formulario validado */);
}
```

### **Notificaciones**
```tsx
import { toast } from 'react-hot-toast';

const handleSuccess = () => {
  toast.success('¡Operación exitosa!', {
    duration: 4000,
    position: 'top-right'
  });
};
```

## 🚀 **Roadmap de Plantilla 2025-2026**

*Actualizado en Junio 2025 - v2.2.0 - Prioridades reorganizadas para desarrollo web moderno*

### **🔥 Prioridad Inmediata: Integraciones de Ecosistema**

#### **🔮 v2.2.0 - Integración de Ecosistema (Julio 2025)**
- **🤝 Third-party Integrations**
  - CMS headless (Contentful, Strapi) configurado
  - Payment processors (Stripe, PayPal) listos para usar
  - Email services (SendGrid, Mailgun) integrados
  - Analytics avanzado (Mixpanel, Amplitude) configurado
  - Customer support (Intercom, Zendesk) embebido
  - Social auth (Auth0, Firebase Auth) expandido
  - File storage (AWS S3, Cloudinary) mejorado
  - Push notifications (FCM, OneSignal) implementado

### **⚡ Optimización y Performance**

#### **🚀 v2.3.0 - Web Performance & Mobile (Agosto 2025)**
- **🚀 Web Performance**
  - Lazy loading de componentes implementado
  - Image optimization con Next.js Image
  - Bundle analyzer integrado
  - Service Workers para caching
  - Core Web Vitals optimization
  - Critical CSS inlining
  - Resource hints (prefetch, preload)
  - Performance monitoring dashboard

- **📱 Mobile-First Improvements**
  - Touch gestures optimizados
  - PWA capabilities mejoradas
  - Offline functionality básica
  - Mobile navigation patterns
  - Responsive images automáticas
  - App-like animations
  - Touch feedback optimizado
  - Battery usage optimization

### **📚 Documentación y Ejemplos Premium**

#### **📖 v2.4.0 - Documentación y Ejemplos Avanzados (Septiembre 2025)**
- **📖 Documentación Mejorada**
  - Guías paso a paso para cada ejemplo
  - Video tutoriales integrados en el README
  - Mejores prácticas de desarrollo con Next.js 14+
  - Troubleshooting guide expandido
  - Comentarios detallados en todo el código
  - API documentation con OpenAPI
  - Architecture decision records (ADRs)
  - Performance optimization guides

- **🎨 Nuevos Ejemplos de UI**
  - Dashboard de analytics con gráficos (Chart.js, D3.js)
  - Landing page moderna con secciones
  - E-commerce básico con carrito de compras
  - Portfolio personal responsive
  - App de tareas con local storage
  - Chat en tiempo real con WebSockets
  - Multi-tenant SaaS example
  - Marketplace con ratings y reviews

### **🛠️ Herramientas de Desarrollo Premium**

#### **🔧 v2.5.0 - CLI y Testing Suite (Octubre 2025)**
- **🔧 CLI Mejorado**
  - Setup automático de variables de entorno
  - Validación de configuración en tiempo real
  - Templates adicionales para proyectos específicos
  - Comandos para generar componentes automáticamente
  - Integración con linters y formatters
  - Database schema generators
  - API endpoint generators
  - Component story generators (Storybook)

- **🧪 Testing Suite Completa**
  - Jest configurado con ejemplos de tests
  - Testing Library para componentes React
  - Cypress para tests end-to-end
  - Coverage reports automáticos
  - GitHub Actions para CI/CD
  - Visual regression testing
  - Performance testing suite
  - Accessibility testing automático

### **🎨 Expansión de Componentes**

#### **📦 v2.6.0 - Biblioteca de Componentes Expandida (Noviembre 2025)**
- **📦 Biblioteca de Componentes Ampliada**
  - 25+ nuevos componentes (Total: 75+)
  - Componentes de data visualization (Charts, Graphs)
  - Forms complejos con validación avanzada
  - Layouts responsivos predefinidos
  - Componentes de navegación avanzados
  - Rich text editor (WYSIWYG)
  - File upload con preview
  - Advanced calendar components
  - Audio/Video players customizados

### **🌐 Internacionalización y Accesibilidad**

#### **♿ v2.7.0 - i18n y Accesibilidad (Diciembre 2025)**
- **🌍 Soporte Multi-idioma**
  - React-i18next configurado y listo
  - Ejemplos en inglés y español
  - Detección automática de idioma del navegador
  - Cambio dinámico de idiomas
  - Formateo de fechas y números por locale
  - RTL (Right-to-Left) support
  - Plural forms handling
  - Context-aware translations

- **♿ Accesibilidad Mejorada**
  - Todos los componentes WCAG 2.1 AA compliant
  - Screen reader optimization
  - Keyboard navigation en todos los elementos
  - High contrast mode support
  - Focus indicators mejorados
  - Color blind friendly palettes
  - Voice navigation support
  - Reduced motion preferences

### **🔐 Seguridad y DevOps Enterprise**

#### **🛡️ v2.8.0 - Seguridad y DevOps (Enero 2026)**
- **🛡️ Seguridad Mejorada**
  - CSRF protection implementado
  - Rate limiting en APIs
  - Input sanitization automática
  - Security headers configurados
  - Audit de dependencias automatizado
  - SQL injection prevention
  - XSS protection avanzada
  - Content Security Policy configurado

- **🚀 DevOps Ready**
  - Docker configuration incluida
  - Environment management mejorado
  - Deployment scripts para múltiples plataformas
  - Health check endpoints
  - Logging y monitoring básico
  - Kubernetes manifests
  - CI/CD pipelines optimizados
  - Blue-green deployment strategies

### **📊 Analytics y Monitoring Avanzado**

#### **📈 v2.9.0 - Analytics Integration (Febrero 2026)**
- **📈 Analytics Integration**
  - Google Analytics 4 configurado
  - Custom event tracking
  - Performance monitoring con Web Vitals
  - Error tracking con Sentry
  - User behavior analytics
  - A/B testing framework
  - Conversion funnel tracking
  - Real-time dashboard metrics

### **🏗️ Arquitectura Enterprise**

#### **🔧 v2.10.0 - Arquitectura Escalable (Marzo 2026)**
- **🔧 Code Organization**
  - Atomic design patterns implementados
  - Custom hooks library expandida
  - Utils functions organizadas
  - Constants y configurations centralizadas
  - Type definitions mejoradas
  - Micro-frontends architecture
  - Module federation setup
  - Clean architecture patterns

### **💼 Templates Especializados**

#### **🎯 v2.11.0 - Templates por Industria (Abril 2026)**
- **💼 Templates por Industria**
  - SaaS dashboard template
  - E-commerce completo template
  - Blog/CMS template avanzado
  - Portfolio/Agency template
  - Corporate website template
  - Learning Management System (LMS)
  - Real estate platform
  - Healthcare management system

### **🤖 AI y Automatización Avanzada**

#### **🧠 v2.12.0 - AI-Powered Development (Mayo 2026)**
- **🤖 AI Integration Expandida**
  - Code generation automático
  - Design system generation
  - Content generation con IA
  - Bug detection automático
  - Performance optimization suggestions
  - Automated refactoring tools
  - Smart component recommendations
  - AI-powered testing generation

### **🌟 Integraciones Avanzadas de Futuro**

#### **🔮 v3.0.0 - Next-Gen Integrations (Junio 2026)**
- **🚀 Emerging Technologies**
  - Web3 and Blockchain integration
  - AR/VR components (WebXR)
  - IoT device connectivity
  - Machine Learning models integration
  - Voice interfaces (Web Speech API)
  - Biometric authentication
  - Quantum computing readiness
  - Neural interface preparation

---

## 💡 **¿Por Qué Estas Mejoras de Plantilla Importan?**

### **Para Developers:**
- **Desarrollo más rápido** - Ejemplos y patrones listos para usar
- **Mejores prácticas** - Código siguiendo estándares de la industria
- **Documentación completa** - Sin tiempo perdido entendiendo el código
- **Testing integrado** - Confianza en el código desde el día 1

### **Para Proyectos:**
- **Time-to-Market acelerado** - Base sólida para construir encima
- **Escalabilidad preparada** - Arquitectura pensada para crecer
- **Performance optimizada** - Web Vitals perfectos desde el inicio
- **Seguridad por defecto** - Configuraciones seguras incluidas

## 🤝 **Contribuir**

¡Las contribuciones son bienvenidas! Por favor:

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

### **Áreas de Contribución**
- 🐛 **Bug fixes**
- ✨ **Nuevas características**
- 📝 **Documentación**
- 🎨 **Componentes UI**
- 🧪 **Tests y ejemplos**
- 🌍 **Internacionalización**

## 📄 **Licencia**

Distribuido bajo la Licencia MIT. Ver `LICENSE` para más información.

## 👥 **Equipo y Comunidad**

- **Desarrollado por**: SysRot Team
- **GitHub**: [github.com/rotosaurio/sysrot](https://github.com/rotosaurio/sysrot)
- **Licencia**: MIT License

## ⭐ **Si te gusta el proyecto, ¡dale una estrella!**

¿SysrotCore te ayudó a crear algo increíble? ¡Nos encantaría saberlo! Abre un issue o pull request para compartir tu experiencia.

---

<div align="center">

**Hecho con ❤️ por SysRot Team**

[GitHub Repository](https://github.com/rotosaurio/sysrot)

</div>

## 🐛 **Solución de Problemas Comunes**

### **Error de Sintaxis en next.config.js**

Si encuentras un error como:
```
SyntaxError: Unexpected identifier 'images'
```

**Solución rápida:**
```bash
# Dentro del directorio de tu proyecto
npx sysrotcore-fix-config
```

### **Problemas de Dependencias**

Si encuentras errores de módulos no encontrados:
```bash
npm install --legacy-peer-deps
```

### **Variables de Entorno**

Asegúrate de copiar y configurar el archivo `.env.local`:
```bash
cp .env.example .env.local
# Edita .env.local con tus claves API
```

---

## 🎨 **Biblioteca de Ejemplos Completa**

Cada proyecto incluye **14 ejemplos funcionales** listos para usar y personalizar:

### **🏠 Homepage Moderna** (`/`)
**Características:**
- Hero section con gradientes animados y call-to-actions
- Showcase de features con iconos SVG optimizados
- Testimonios de usuarios con animaciones
- Footer con links útiles y información de contacto
- **100% responsive** - Desktop, tablet, mobile perfecto
- **Core Web Vitals optimizado** - Puntuación 90+ en Lighthouse

**Tecnologías:** Next.js Pages Router, TailwindCSS, TypeScript

### **🤖 Chat IA Multi-Modelo** (`/ejemplos/ai`)
**El ejemplo más popular - Interfaz completa de IA**

**Características:**
- **3 modelos integrados:** GPT-4o, Claude 3.5 Sonnet, Gemini Flash Pro
- **Selector dinámico** de modelo con previews
- **Streaming en tiempo real** - Respuestas palabra por palabra
- **Historial de conversaciones** persistente
- **Manejo de errores robusto** con fallbacks automáticos
- **Rate limiting** y uso responsable de APIs
- **Export/Import** de conversaciones
- **Syntax highlighting** para código generado

**APIs incluidas:**
```typescript
// pages/api/ai.ts - Endpoint unificado
POST /api/ai
{
  "model": "gpt-4o" | "claude-3.5" | "gemini",
  "prompt": string,
  "stream": boolean,
  "temperature": number,
  "max_tokens": number
}
```

### **🔐 Dashboard de Autenticación** (`/ejemplos/auth`)
**Sistema completo de usuarios**

**Características:**
- **Login/Registro** con validación completa
- **OAuth providers:** Google, GitHub, Apple, Discord
- **Magic links** para login sin contraseña
- **Recuperación de contraseña** con emails seguros
- **Perfil de usuario** editable con avatar upload
- **Sistema de roles** (Admin, User, Moderator)
- **Middleware de protección** automático
- **Sesiones seguras** con JWT + database

**Páginas incluidas:**
- `/auth/login` - Login con múltiples opciones
- `/auth/register` - Registro con validación
- `/auth/profile` - Perfil completo del usuario
- `/auth/admin` - Panel administrativo (solo admins)
- `/auth/reset-password` - Recuperación de contraseña

### **🎨 Biblioteca de Componentes** (`/ejemplos/componentes`)
**50+ componentes production-ready**

**Categorías organizadas:**
- **Básicos** (12 componentes): Botones, Cards, Badges, Tags
- **Formularios** (10 componentes): Inputs, Selects, Checkboxes, Radio buttons
- **Navegación** (8 componentes): Breadcrumbs, Pagination, Tabs, Sidebar
- **Feedback** (8 componentes): Alerts, Modals, Loading states, Progress bars
- **Layout** (6 componentes): Grid system, Containers, Dividers
- **Datos** (6 componentes): Tables, Lists, Cards de información

**Características especiales:**
- **Código copy-paste** para cada componente
- **Variants múltiples** (sizes, colors, states)
- **Accessibility completa** (ARIA labels, keyboard navigation)
- **Documentación integrada** con ejemplos de uso
- **Responsive por defecto** - Mobile-first approach
- **Dark mode compatible** - Automatic theme switching

### **📤 Upload de Archivos Avanzado** (`/ejemplos/upload`)
**Sistema completo de gestión de archivos**

**Características:**
- **Drag & drop** con preview en tiempo real
- **Múltiples archivos** simultáneos
- **Progress bars** individuales y general
- **Validación automática** (tipo, tamaño, dimensiones)
- **Optimización de imágenes** (WebP, AVIF, resize)
- **CDN integration** (Cloudinary) con transformaciones
- **Gestión de errores** elegante
- **Gallery view** con lightbox

**Tipos soportados:**
- Imágenes: JPG, PNG, WebP, AVIF, SVG
- Documentos: PDF, DOC, DOCX, TXT
- Videos: MP4, WebM, MOV (hasta 100MB)
- Audio: MP3, WAV, OGG

### **📋 Formularios Avanzados** (`/ejemplos/formularios`)
**React Hook Form + Zod - El estándar de la industria**

**Ejemplos incluidos:**
- **Formulario de contacto** con validación en tiempo real
- **Multi-step wizard** con progress indicator
- **Formulario de registro** con confirmación de email
- **File upload form** integrado con validación
- **Dynamic forms** que añaden/quitan campos
- **Auto-save** con indicador de estado

**Características:**
- **Validación en tiempo real** mientras escribes
- **Mensajes de error personalizados** y traducibles
- **Tipos TypeScript automáticos** desde schemas Zod
- **Performance optimizada** - Re-renders mínimos
- **Accessibility completa** - Screen readers, keyboard nav
- **Loading states** durante submission

### **🎬 Showcase de Animaciones** (`/ejemplos/animaciones`)
**Framer Motion - Animaciones fluidas y performantes**

**Demostraciones incluidas:**
- **Animaciones básicas:** Fade, slide, scale, rotate
- **Hover effects:** Elevación, cambios de color, transformaciones
- **Scroll animations:** Elementos que aparecen al hacer scroll
- **Page transitions:** Navegación suave entre páginas
- **Stagger animations:** Elementos que aparecen secuencialmente
- **Gesture handling:** Drag, swipe, tap interactions
- **Loading animations:** Spinners, skeletons, progress indicators

**Performance:**
- **60 FPS garantizados** en dispositivos modernos
- **GPU acceleration** automática
- **Reduced motion support** para accessibilidad
- **Bundle size optimizado** - Solo cargas lo que usas

### **🔔 Sistema de Notificaciones** (`/ejemplos/notificaciones`)
**react-hot-toast + Notificaciones web**

**Tipos disponibles:**
- **Toast básicos:** Success, error, warning, info
- **Toast customizados** con JSX y componentes
- **Promise toasts** que se actualizan según estado
- **Persistent notifications** que requieren acción del usuario
- **Rich notifications** con botones de acción
- **Push notifications** web (con service worker)

**Configuración avanzada:**
- **Posicionamiento:** Top, bottom, center en cualquier esquina
- **Duración customizable** por tipo de notificación
- **Queue management** para múltiples notificaciones
- **Animations** de entrada y salida customizables
- **Theming completo** para match con tu diseño

### **🗄️ CRUD de Base de Datos** (`/ejemplos/database`)
**Ejemplos completos para MongoDB, Supabase y Firebase**

**Para cada base de datos:**
- **Conexión y configuración** step-by-step
- **Create operations** con validación
- **Read operations** con pagination y search
- **Update operations** con optimistic updates
- **Delete operations** con confirmación
- **Real-time updates** (donde applicable)
- **Error handling** y retry logic

**APIs de prueba incluidas:**
```typescript
// MongoDB
GET|POST /api/database/mongodb-test
// Supabase  
GET|POST /api/database/supabase-test
// Firebase
GET|POST /api/database/firebase-test
```

### **📝 Blog/CMS Demo** (`/blog`)
**Sistema completo de content management**

**Características del blog:**
- **Posts con MDX** - Markdown + React components
- **Categorías y tags** organizados
- **Search functionality** con filtros
- **SEO optimizado** - Meta tags, Open Graph, JSON-LD
- **RSS feed** automático
- **Sitemap** generado dinámicamente
- **Reading time** calculado automáticamente
- **Related posts** con IA

**CMS features:**
- **Frontmatter validation** con TypeScript
- **Syntax highlighting** para 100+ lenguajes
- **Table of contents** automático
- **Image optimization** con Next.js Image
- **Social sharing** buttons integrados

### **🛒 E-commerce Básico** (`/ejemplos/ecommerce`)
**Starter kit para tienda online**

**Características:**
- **Catálogo de productos** con búsqueda y filtros
- **Carrito de compras** persistente
- **Checkout process** step-by-step
- **Payment integration** (Stripe ready)
- **Inventory management** básico
- **Order tracking** para usuarios
- **Admin panel** para gestión de productos

### **📊 Panel de Analytics** (`/ejemplos/analytics`)
**Dashboard con métricas en tiempo real**

**Métricas incluidas:**
- **Visitors analytics** con gráficos
- **Revenue tracking** y conversions
- **Performance metrics** (Core Web Vitals)
- **User behavior** analysis
- **Real-time data** con WebSockets
- **Export functionality** (CSV, PDF)

### **⚡ TypeScript Avanzado** (`/ejemplos/typescript`)
**Patterns y best practices para TypeScript 5.4+**

**Ejemplos incluidos:**
- **Generic functions** y constraints
- **Discriminated unions** para type safety
- **Utility types** personalizados
- **Template literal types** avanzados
- **Conditional types** y mapped types
- **Type guards** y predicates
- **Module augmentation** para bibliotecas
- **Strict mode** optimizations

### **🚀 API REST Completa** (`/api/*`)
**Endpoints documentados y listos para usar**

**APIs incluidas:**
- `/api/ai` - Multi-model AI integration
- `/api/auth` - NextAuth.js endpoints
- `/api/upload` - File upload con Cloudinary
- `/api/database/*` - Database operations
- `/api/email` - Transactional emails
- `/api/analytics` - Custom event tracking
- `/api/webhook/*` - External service webhooks

**Características:**
- **OpenAPI documentation** automática
- **Rate limiting** implementado
- **CORS configuration** para production
- **Error handling** consistente
- **Logging** y monitoring integrado