⚠️ Nivel Técnico: Senior / Expert

Cómo crear una app React + Vite desde cero (Windows + PowerShell Fix) + Base sólida CVs Deportivos

📑 Índice Automático

(compatible con Goldmark y el tema Akio)

• 📋 1. Fase de Validación / Prerrequisitos
• 🧹 2. Fase de Higiene / Limpieza (PowerShell Fix)
• 🚀 3. Arranque de Infraestructura (React + Vite)
• 🧠 4. Arranque de Aplicación (Vite Dev Server)
• 🏗️ 5. Base sólida del proyecto: CVs Deportivos
  • 5.1 Requisitos Previos
  • 5.2 Creación del Proyecto con React + SWC
  • 5.3 Instalación de Tailwind + Lucide
  • 5.4 Configuración del Entorno
  • 5.5 Levantar el Motor
• 🖼️ 6. Capturas del Proceso
• 📊 Anexo: Mapa de Arquitectura

📋 1. Fase de Validación / Prerrequisitos

node -v

Esperado:

v18.x.x o superior

npm -v

Esperado:

9.x.x o superior

🧹 2. Fase de Higiene / Limpieza (PowerShell Fix)

Problema típico

Windows bloquea scripts como npm.ps1:

File C:\Users\[User]\AppData\Roaming\npm\npm.ps1 is not digitally signed.

Solución

Ejecuta PowerShell como Administrador:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Esperado:

[Y] Yes  [A] Yes to All

🚀 3. Arranque de Infraestructura (React + Vite)

npm create vite@latest web-cv-deportivo -- --template react

Esperado:

Scaffolding project...
VITE v7.3.1 ready

🧠 4. Arranque de Aplicación (Vite Dev Server)

cd web-cv-deportivo
npm install
npm run dev

Esperado:

Local: http://localhost:5173/

🏗️ 5. Base sólida del proyecto: CVs Deportivos

5.1 Requisitos Previos

node -v

Esperado:

v18.x.x

5.2 Creación del Proyecto con React + SWC

npm create vite@latest cv-deportivos -- --template react

cd cv-deportivos
npm install

Esperado:

added 150 packages

5.3 Instalación de Tailwind + Lucide

Iconos Lucide

npm install lucide-react

Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Esperado:

Created tailwind.config.js
Created postcss.config.js

5.4 Configuración del Entorno

Archivos que debes sobrescribir:

Si deseas que genere los tres archivos ya listos, dímelo.

5.5 Levantar el Motor

npm run dev

Abrir en:

http://localhost:5173

🖼️ 6. Capturas del Proceso

Debes colocar tus imágenes en:

/images/github-repo.jpg
/images/vite-terminal.jpg

📊 Anexo: Mapa de Arquitectura