# 🚀 SysrotCore v2.1.16
**CLI de nueva generación para crear proyectos Next.js 14+ con Pages Router, múltiples modelos de IA y ecosistema completo de desarrollo**
[](https://badge.fury.io/js/sysrotcore)
[](https://npmjs.com/package/sysrotcore)
[](https://opensource.org/licenses/MIT)
[](https://nodejs.org/)
[](https://nextjs.org/)
**🚀 Comando: `npx sysrotcore` | 🎨 11 Ejemplos Funcionales | 🤖 3 Modelos de IA Integrados**
**🌍 [English README](./README.en.md) | 🇪🇸 Español (actual)**
## ✨ **¿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 ; // 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 (
Solo administradores pueden ver esto
);
}
```
### **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.
---
**Hecho con ❤️ por SysRot Team**
[GitHub Repository](https://github.com/rotosaurio/sysrot)
## 🐛 **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