sysrotcore/README.en.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">

**Next-generation CLI to create Next.js 14+ projects with Pages Router, multiple AI models and complete development ecosystem**

[![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/)

**🚀 Command: `npx sysrotcore` | 🎨 11 Functional Examples | 🤖 3 Integrated AI Models**

</div>

## ✨ **Why SysrotCore?**

In **June 2025**, web development requires tools that accelerate the creation of modern applications without sacrificing quality. **SysrotCore** is a CLI that gives you:

- 🚀 **Complete project in 30 seconds** - From idea to functional application
- 🤖 **3 integrated AI models** - GPT-4o, Claude 3.5 Sonnet, Gemini Flash Pro
- 📦 **50+ production-ready components** - Complete UI/UX library
- 🎯 **11 functional examples** - Real code you can use immediately
- ⚡ **Zero-config** - Works perfectly from the first `npm run dev`
- 🎨 **60+ fluid animations** - CSS3, Framer Motion, micro-interactions
- 📚 **Integrated MDX blog** - 3 example articles included
- 🌍 **Full internationalization** - Spanish and English support

**💡 Note:** The package is called `sysrotcore` and the main command is `npx sysrotcore` for maximum simplicity.

## 🔥 **Implemented Features**

### 🤖 **Integrated AI Models**
- **GPT-4o (OpenAI v4.24.1)** - Advanced reasoning and code generation
- **Claude 3.5 Sonnet (Anthropic v0.12.0)** - Deep analysis and documentation
- **Gemini Flash Pro (Google v0.2.0)** - Fast multimodal processing
- **Unified interface** - One component for all models
- **Real-time streaming** - Live responses with typing indicator
- **Automatic fallback** - Resilience against API errors
- **Context switching** - Dynamic switching between models

### 🌍 **Complete Internationalization**
- **2 languages supported** - Spanish (default) and English
- **Next.js i18n built-in** - SEO-friendly URLs (/es/, /en/)
- **Automatic detection** - Browser language detection
- **React Intl integration** - Industry standard for translations
- **TypeScript support** - Type-safe translations
- **Language switcher** - Elegant component included
- **Date formatting** - Localized dates and relative times
- **RTL support ready** - Extensible for Arabic, Hebrew, etc.

### 🎨 **Modern Design System**
- **TailwindCSS 3.4+** - Latest CSS utilities
- **Dark/Light/System** - Smart adaptive theme with next-themes v0.2.1
- **Responsive First** - Perfect mobile, tablet, desktop
- **50+ UI Components** - Organized in 6 production-ready categories
- **60+ Animations** - CSS3, Framer Motion, micro-interactions
- **A11Y Accessibility** - WCAG 2.1 AA compliant
- **Optimized Performance** - Perfect Core Web Vitals, 60 FPS guaranteed

### 🧩 **Complete Component Library**

#### **🎯 Basic (12 components)**
- **Advanced Buttons** - Animated gradients, outline effects, magnetic hover
- **Modern Cards** - Pricing, stats, interactive with 3D effects
- **Interactive Badges** - States, colors, animations

#### **📝 Forms (10 components)**
- **Floating Labels** - Modern inputs with smooth animations
- **Icon Inputs** - Real-time visual validation
- **Modern Selects** - Custom dropdowns with search
- **Toggle Switches** - Fluid animations and multiple states

#### **🧭 Navigation (8 components)**
- **Interactive Breadcrumbs** - With icons and hover effects
- **Modern Sidebar** - Adaptive with state animations
- **Animated Tabs** - Smooth transitions between sections

#### **💬 Feedback (12 components)**
- **Alert System** - Success, warning, error with icons
- **Modern Modals** - Backdrop blur, entrance animations
- **Progress Indicators** - Animated linear and circular bars
- **Loading States** - Optimized spinners, dots, skeletons

#### **📊 Data (10 components)**
- **Interactive Tables** - Sorting, filters, pagination
- **Stats Cards** - Metrics with integrated charts
- **Data Visualization** - Basic charts with Chart.js ready

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

### ✨ **Massive Animation Showcase**

#### **🎯 Basic (8 animations)**
- **Fade, Slide, Scale, Rotate** - Optimized smooth entrances
- **CSS Keyframes** - Pulse, bounce, shake with perfect timing

#### **⭐ Hover Effects (12 effects)**
- **Lift Effect** - Elevation with dynamic shadow
- **Glow Effect** - Color glow on hover
- **Slide Content** - Hidden content reveal
- **Magnetic Buttons** - Visual attraction to cursor

#### **🔮 Micro-interactions (15 effects)**
- **Ripple Effect** - Click waves
- **Magnetic Effect** - Elements that follow cursor
- **Morphing Icons** - Icons that change shape
- **Floating Inputs** - Labels that float smoothly
- **Modern Toggle** - Switches with animated gradients
- **Heart Animation** - Like buttons with effects

#### **🚀 Advanced (25+ animations)**
- **Floating Elements** - Organically floating particles
- **Morphing Shapes** - Shapes that change geometry
- **Particle Systems** - Rain and particle effects
- **Matrix Rain** - Matrix-style falling characters
- **Holographic Effects** - Changing holographic colors
- **DNA Helix** - 3D double helix animation
- **Physics-based** - Realistic pendulum, spring bounce
- **3D Effects** - Tilt cards, flip cards, glassmorphism

### 🎮 **Perfect Mouse Follower**
- **Centered cursor** - Perfect positioning with calculated offset
- **Smooth transitions** - 75ms ease-out for fluidity
- **Mix-blend-mode** - Fusion effect with content
- **Responsive** - Activates/deactivates based on interaction

### 🛡️ **Enterprise-Grade Authentication**
- **NextAuth.js 4.24.5** - Robust and secure authentication
- **6 OAuth Providers** - Google, GitHub, Apple, Discord, LinkedIn, Email
- **Magic Links** - Passwordless login
- **Multi-Factor Auth** - Integrated 2FA/TOTP
- **Role-Based Access** - Admin, User, Moderator, Custom
- **Session Management** - JWT + Database sessions
- **CSRF Protection** - Automatic protection against attacks

### 📊 **Multi-Database Support**
- **MongoDB v6.3.0** - NoSQL with Mongoose ODM v8.0.3
- **Supabase v2.39.1** - PostgreSQL with Edge Functions and Auth
- **Firebase v10.7.1** - Real-time + Analytics + Admin v11.11.1
- **Connection pooling** - Connection optimization
- **Migration support** - Versioned schemas

### 📝 **Advanced Forms and Validation**
- **React Hook Form v7.49.2** - Performance optimized without re-renders
- **Zod v3.22.4** - TypeScript-first validation with inference
- **Hookform Resolvers v3.3.3** - Perfect integration
- **Real-time validation** - Optimized UX with debounce
- **Error handling** - Custom messages with i18n

### 📤 **Premium File Management**
- **Cloudinary v1.41.1** - Global CDN with 99.9% uptime
- **Next-Cloudinary v5.13.0** - Optimized Next.js integration
- **Drag & Drop** - Intuitive interface with preview
- **Multiple formats** - Images, videos, documents
- **Automatic optimization** - WebP, AVIF, dynamic resize
- **Upload progress** - Real-time progress bars

### 📚 **Complete Blog/CMS System**
- **MDX Support** - Markdown + React components
- **Gray Matter v4.0.3** - Optimized frontmatter parsing
- **3 Included Articles** - Professional example content
- **Remark v15.0.1** - Advanced markdown processing
- **Rehype Highlight v7.0.0** - Syntax highlighting with themes
- **Remark GFM v4.0.0** - GitHub Flavored Markdown
- **Date-fns v2.30.0** - International date handling
- **SEO optimized** - Automatic meta tags, Open Graph, Twitter Cards

### 🎨 **Titles with Gradient Shadow**
- **Glow gradient** - Soft effect behind text
- **Optimized blur** - 3xl blur with scale-110 for better effect
- **Correct z-index** - Perfect positioning without interference
- **Responsive** - Adapts to all screen sizes

### 🏷️ **Neutral Terminology**
- **No commercial terms** - Removed "Premium", "Pro", payment terms
- **Improved accessibility** - Interface without cost implications
- **Open source friendly** - Terminology aligned with free projects
- **Unified experience** - All users have complete access

## 🛠️ **Installation and Usage**

### **⚠️ Important Clarification**
This directory (`base/`) contains the **CLI generator** for SysrotCore, it is **NOT** a Next.js project.

- ❌ **Don't run** `npm run dev` here
- ✅ **Use** `npx sysrotcore my-project` to generate a Next.js project
- ✅ **The `dev` script** will be available in the generated project

### **📝 Important: Simplified Command**
- **NPM package name:** `sysrotcore`
- **CLI command:** `npx sysrotcore`
- **Why?** A single simple and memorable command

### **Create a Project**

```bash
# Option 1: NPX (Recommended) - Always latest version
npx sysrotcore my-project

# Option 2: With specific name
npx sysrotcore your-app-name

# Option 3: Global installation
npm install -g sysrotcore
sysrotcore my-project
```

### **CLI Options**

```bash
# View complete help
npx sysrotcore --help

# View current version
npx sysrotcore --version
```

**💡 Tip:** Always use `npx sysrotcore` to automatically get the latest version without global installation.

## 🎮 **Complete Interactive Configuration**

The CLI includes an intelligent assistant with **15 configuration categories**:

### ⚙️ **Base Technology Stack**
```bash
? Do you want TypeScript configured? (Y/n) ✨ Recommended
? Do you want TailwindCSS configured? (Y/n) ✨ Recommended  
? Do you want ESLint + Prettier configured? (Y/n) ✨ Recommended
? Do you want testing configuration (Jest + Testing Library)? (y/N)
```

### 🌍 **Internationalization**
```bash
? Do you want internationalization support? (Y/n) ✨ New Feature
? Select languages:
  ◯ Spanish (default)
  ◯ English
  ◯ French (coming soon)
  ◯ Portuguese (coming soon)
  
? Default language?
  ❯ Spanish
    English
    
? Language detection?
  ◯ Automatic browser detection
  ◯ Manual selection only
  ◯ URL-based (/es/, /en/)
```

### 🗄️ **Database & Backend**
```bash
? What database do you want to use?
  ❯ None
    MongoDB (NoSQL - Recommended for MVP)
    Supabase (PostgreSQL + Auth)
    Firebase (Real-time + Analytics)
    
? Do you want ORM/ODM?
  ❯ Mongoose (MongoDB)
    None
```

### 🔐 **Authentication & Security**
```bash
? Do you want authentication system? (Y/n) ✨ Recommended
? Select providers:
  ◯ Google (OAuth 2.0)
  ◯ GitHub (Developer friendly)
  ◯ Apple (iOS users)
  ◯ Discord (Gaming/Community)
  ◯ Email (Magic links)
  ◯ Credentials (Username/Password)
  
? Do you want advanced role system? (Y/n)
  - Admin, User, Moderator
  - Granular permissions
  - Protection middleware
  
? Do you want multi-factor authentication? (y/N)
```

### 🤖 **Artificial Intelligence**
```bash
? Do you want AI integration? (Y/n) ✨ Popular
? Select models:
  ◯ GPT-4o (OpenAI) - Best for code and text
  ◯ Claude 3.5 Sonnet (Anthropic) - Deep analysis
  ◯ Gemini Flash Pro (Google) - Fast multimodal
  
? Do you want integrated chat interface? (Y/n)
? Do you want AI functions for end users? (y/N)
```

### 📤 **File Management & Media**
```bash
? Do you want file upload integration? (Y/n)
? Do you want Cloudinary integration for image upload? (y/N)
? Do you want automatic image optimization? (Y/n)
? Do you want support for multiple formats? (WebP, AVIF) (Y/n)
```

### 📝 **Content Management**
```bash
? Do you want blog/content system? (Y/n)
? Select type:
  ❯ MDX Blog (Local files)
    Headless CMS (Contentful/Strapi)
    Hybrid (MDX + CMS)
    
? Do you want advanced features?
  ◯ Syntax highlighting (100+ languages)
  ◯ Automatic SEO optimization
  ◯ RSS feed generation
  ◯ Automatic sitemap
  ◯ AI-powered related posts
```

## 📁 **Generated Project Structure**

```
my-project/
├── components/              # Reusable components
│   ├── providers/          # Context providers
│   │   └── intl-provider.tsx  # Internationalization
│   │   └── auth.ts             # NextAuth configuration
│   ├── ui/                 # Interface components
│   │   ├── layout.tsx         # Main layout
│   │   ├── language-switcher.tsx # Language selector
│   │   └── theme-toggle.tsx   # Light/dark theme selector
├── locales/                # Translation files
│   ├── es.json             # Spanish translations
│   └── en.json             # English translations
├── lib/                    # Utilities and configuration
│   ├── i18n.ts             # Internationalization config
│   └── auth.ts             # NextAuth configuration
├── pages/                  # Pages Router
│   ├── _app.tsx            # App with providers
│   ├── index.tsx           # Homepage (multilingual)
│   ├── blog/               # MDX blog
│   └── ejemplos/           # Examples (multilingual)
├── posts/                  # MDX blog articles
│   ├── introduction-en.mdx # English articles
│   └── introduccion-es.mdx # Spanish articles
└── next.config.js          # Next.js config with i18n
```

## 🌍 **Internationalization Usage**

### **Using Translations in Components**

```typescript
import { useTranslation } from '@/components/providers/intl-provider';

export function MyComponent() {
  const { t, formatDate, locale } = useTranslation();

  return (
    <div>
      <h1>{t('home.title')}</h1>
      <p>{t('home.description')}</p>
      <time>{formatDate(new Date())}</time>
      <span>Current language: {locale}</span>
    </div>
  );
}
```

### **Language Switcher**

```typescript
import { LanguageSwitcher } from '@/components/ui/language-switcher';

// Full dropdown
<LanguageSwitcher />

// Compact version (toggle)
<LanguageSwitcherCompact />
```

### **SEO URLs**

The system automatically generates SEO-friendly URLs:
- `/` → Spanish homepage
- `/en` → English homepage  
- `/blog` → Spanish blog
- `/en/blog` → English blog
- `/ejemplos` → Spanish examples
- `/en/examples` → English examples

### **Adding New Languages**

1. **Update next.config.js:**
```javascript
i18n: {
  locales: ['es', 'en', 'fr'], // Add French
  defaultLocale: 'es',
}
```

2. **Create translation file:**
```bash
# Create locales/fr.json
{
  "nav.home": "Accueil",
  "home.title": "Développer rapidement, déployer plus rapidement",
  // ... more translations
}
```

3. **Update language switcher:**
```typescript
const languages = [
  { code: 'es', name: 'Español', flag: '🇪🇸' },
  { code: 'en', name: 'English', flag: '🇺🇸' },
  { code: 'fr', name: 'Français', flag: '🇫🇷' }, // Add French
];
```

## 🎯 **For Testing**

In your generated project:
```bash
# Create multilingual project
npx sysrotcore my-multilingual-app

# Navigate to project
cd my-multilingual-app

# Install dependencies
npm install

# Run in development
npm run dev

# Test different languages
# http://localhost:3000 (Spanish)
# http://localhost:3000/en (English)
```

## 🚀 **Roadmap for Internationalization**

### **v2.2.0 - Extended Languages**
- 🇫🇷 French support
- 🇵🇹 Portuguese support
- 🇩🇪 German support
- 🇯🇵 Japanese support

### **v2.3.0 - Advanced Features**
- RTL support (Arabic, Hebrew)
- Number and currency formatting
- Pluralization rules
- Translation management tools

### **v2.4.0 - Enterprise**
- Translation memory
- Automatic translation with AI
- Translation workflow
- Professional translator tools

---

**SysrotCore v2.1.13** now includes complete internationalization, making it the most complete CLI for creating modern multilingual applications. **Ready to build for the global market?** 🌍

```bash
npx sysrotcore my-global-app
```