🚀 Vite Project Generator

Un generador de proyectos completo para crear aplicaciones modernas con Vite de forma rápida y eficiente.

📋 Tabla de Contenidos

• Características
• Instalación
• Uso Básico
• Uso Avanzado
• Plantillas Disponibles
• Configuraciones Disponibles
• Estructura del Proyecto Generado
• Scripts Disponibles
• Ejemplos de Uso
• Desarrollo
• Contribuir

✨ Características

• 🎯 Múltiples plantillas: React, Vue, Vanilla JS/TS, Svelte, Preact
• ⚡ Configuración automática: ESLint, Prettier, Husky, Testing
• 🎨 Frameworks CSS: Tailwind, Bootstrap, Material-UI, Styled Components
• 🧪 Testing integrado: Vitest con Testing Library
• 📚 Storybook: Documentación de componentes opcional
• 🐳 Docker: Configuración completa de contenedores
• 📱 PWA: Soporte para Progressive Web Apps
• 🔧 CLI interactivo: Configuración paso a paso
• 📦 Gestión inteligente de dependencias

📦 Instalación

Instalación Global (Recomendada)

npm install -g vite-project-generator

Uso con npx (Sin instalación)

npx vite-project-generator mi-proyecto

🚀 Uso Básico

Comando Simple

new-project mi-proyecto

Este comando iniciará el asistente interactivo que te guiará através de todas las opciones de configuración.

Con Parámetros

# Crear proyecto React con TypeScript
new-project mi-app-react --template react-ts

# Crear proyecto Vue con JavaScript
new-project mi-app-vue --template vue

# Forzar sobrescritura de directorio existente
new-project mi-proyecto --force

🎯 Uso Avanzado

Modo Interactivo Completo

Al ejecutar el comando sin parámetros, se iniciará el modo interactivo:

new-project

El asistente te preguntará:

1. Nombre del proyecto
2. Tipo de plantilla (React, Vue, Vanilla, etc.)
3. Configuraciones adicionales:
   • Enrutamiento
   • Gestión de estado
   • Testing
   • Storybook
   • PWA
   • Docker
   • Framework CSS
   • Linting y formateo
   • Git hooks

Línea de Comandos

# Ayuda
new-project --help

# Versión
new-project --version

# Listar plantillas disponibles
new-project --list-templates

📄 Plantillas Disponibles

| Plantilla | Descripción | Tecnologías | |-----------|-------------|-------------| | react | React + JavaScript | React 18, JSX | | react-ts | React + TypeScript | React 18, TypeScript, JSX | | vue | Vue 3 + JavaScript | Vue 3, Composition API | | vue-ts | Vue 3 + TypeScript | Vue 3, TypeScript, Composition API | | vanilla | JavaScript Vanilla | ES6+, Módulos | | vanilla-ts | TypeScript Vanilla | TypeScript, ES6+ | | svelte | Svelte | Svelte 4, SvelteKit | | preact | Preact | Preact, JSX |

⚙️ Configuraciones Disponibles

🚦 Enrutamiento

• React: React Router DOM
• Vue: Vue Router
• Vanilla: History API personalizada

🗄️ Gestión de Estado

• React: Zustand (ligero y moderno)
• Vue: Pinia (oficialmente recomendado)

🧪 Testing

• Framework: Vitest (compatible con Vite)
• Utilidades: Testing Library
• Cobertura: Incluida por defecto

📚 Storybook

• Configuración automática según plantilla
• Addons esenciales incluidos
• Documentación de componentes

🎨 Frameworks CSS

Tailwind CSS

# Configuración automática incluye:
# - tailwind.config.js
# - postcss.config.js
# - Clases base en index.css

Bootstrap

# Incluye Bootstrap 5 con:
# - Grid system
# - Componentes
# - Utilidades

Material-UI

• React: Material-UI v5 con Emotion
• Vue: Vuetify 3

Styled Components

• Solo para proyectos React
• CSS-in-JS completo

🐳 Docker

# Configuración multi-stage incluye:
# - Dockerfile optimizado
# - docker-compose.yml
# - nginx.conf para producción

📱 PWA

// Configuración automática con:
// - Service Worker
// - Manifest.json
// - Iconos adaptativos
// - Offline support

📁 Estructura del Proyecto Generado

mi-proyecto/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   ├── images/
│   │   └── icons/
│   ├── components/
│   │   └── README.md
│   ├── hooks/              # Solo React
│   ├── utils/
│   │   └── index.js
│   ├── styles/
│   │   └── index.css
│   ├── App.jsx
│   └── main.jsx
├── tests/                  # Si testing habilitado
│   └── setup.js
├── .storybook/            # Si Storybook habilitado
│   ├── main.js
│   └── preview.js
├── .env.example
├── .gitignore
├── .eslintrc.json         # Si linting habilitado
├── .prettierrc            # Si linting habilitado
├── Dockerfile             # Si Docker habilitado
├── docker-compose.yml     # Si Docker habilitado
├── tailwind.config.js     # Si Tailwind habilitado
├── vite.config.js
├── package.json
└── README.md

🛠️ Scripts Disponibles

Scripts Base (Todos los proyectos)

{
  "dev": "vite",
  "build": "vite build",
  "build:prod": "vite build --mode production",
  "preview": "vite preview",
  "clean": "rm -rf dist"
}

Scripts de Testing (Si habilitado)

{
  "test": "vitest",
  "test:ui": "vitest --ui",
  "test:coverage": "vitest --coverage"
}

Scripts de Linting (Si habilitado)

{
  "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
  "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
  "format": "prettier --write src/**/*.{js,jsx,ts,tsx,json,css,md}"
}

Scripts de Storybook (Si habilitado)

{
  "storybook": "storybook dev -p 6006",
  "build-storybook": "storybook build"
}

Scripts de Docker (Si habilitado)

{
  "docker:build": "docker build -t mi-proyecto .",
  "docker:run": "docker run -p 80:80 mi-proyecto"
}

💡 Ejemplos de Uso

Ejemplo 1: Proyecto React Completo

new-project mi-ecommerce --template react-ts

Configuración recomendada:

• ✅ Enrutamiento (React Router)
• ✅ Gestión de estado (Zustand)
• ✅ Testing (Vitest + Testing Library)
• ✅ Tailwind CSS
• ✅ ESLint + Prettier
• ✅ Git hooks (Husky)

Ejemplo 2: Proyecto Vue SPA

new-project mi-dashboard --template vue-ts

Configuración recomendada:

• ✅ Enrutamiento (Vue Router)
• ✅ Gestión de estado (Pinia)
• ✅ Testing (Vitest + Vue Testing Library)
• ✅ Material-UI (Vuetify)
• ✅ PWA
• ✅ Docker

Ejemplo 3: Biblioteca de Componentes

new-project mi-ui-library --template react-ts

Configuración recomendada:

• ❌ Enrutamiento
• ❌ Gestión de estado
• ✅ Testing
• ✅ Storybook
• ✅ Styled Components
• ✅ Linting completo

Ejemplo 4: Prototipo Rápido

new-project mi-prototipo --template vanilla

Configuración minimalista:

• ❌ Enrutamiento
• ❌ Gestión de estado
• ❌ Testing
• ✅ Tailwind CSS
• ❌ Docker

🔧 Desarrollo

Clonar el Repositorio

git clone https://github.com/tuusuario/vite-project-generator.git
cd vite-project-generator

Instalar Dependencias

npm install

Vincular Globalmente para Desarrollo

npm link

Probar Localmente

new-project test-project

Estructura del Código

vite-project-generator/
├── bin/
│   └── cli.js              # Punto de entrada del CLI
├── lib/
│   ├── templates.js        # Configuración de plantillas
│   ├── interactive.js      # Interfaz interactiva
│   ├── dependencies.js     # Gestión de dependencias
│   └── enhancer.js         # Mejoras del proyecto
├── tests/
│   └── cli.test.js
├── package.json
└── README.md

📈 Roadmap

v1.1.0

• [ ] Soporte para Solid.js
• [ ] Plantillas de micro-frontends
• [ ] Integración con Vercel/Netlify
• [ ] Configuración automática de CI/CD

v1.2.0

• [ ] Soporte para Astro
• [ ] Plantillas de aplicaciones móviles (Capacitor)
• [ ] Integración con Supabase/Firebase
• [ ] Generador de componentes

v2.0.0

• [ ] GUI web para configuración
• [ ] Marketplace de plantillas personalizadas
• [ ] Plantillas empresariales
• [ ] Soporte para monorepos

🤝 Contribuir

Reportar Bugs

1. Verifica que el bug no haya sido reportado antes
2. Crea un issue con:
   • Descripción detallada
   • Pasos para reproducir
   • Versión del generador
   • Sistema operativo

Solicitar Features

1. Busca si la característica ya fue solicitada
2. Crea un issue explicando:
   • El problema que resuelve
   • Casos de uso
   • Propuesta de implementación

Contribuir Código

1. Fork el proyecto
2. Crea una rama para tu feature:

   git checkout -b feature/nueva-caracteristica

3. Commit tus cambios:

   git commit -m 'feat: agregar nueva característica'

4. Push a la rama:

   git push origin feature/nueva-caracteristica

5. Abre un Pull Request

Guías de Contribución

• Usa Conventional Commits
• Agrega tests para nuevas características
• Actualiza la documentación
• Sigue el estilo de código existente

📜 Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.

👥 Autores

• Tu Nombre - Trabajo inicial - TuUsuario

🙏 Agradecimientos

• Vite por la herramienta base
• Inquirer.js por la interfaz interactiva
• Chalk por los colores en terminal
• La comunidad de desarrolladores que inspira este proyecto

📞 Soporte

• Issues: GitHub Issues
• Discusiones: GitHub Discussions
• Email: [email protected]

¡Hecho con ❤️ para la comunidad de desarrolladores!