Crear Proyectos Next.js con Claude Code

# Verificar Node.js (necesitas v18 o superior)
node --version

# Verificar npm
npm --version

# Crear el proyecto con todas las opciones recomendadas
npx create-next-app@latest mi-app --typescript --tailwind --app

# Navegar al proyecto
cd mi-app

# Iniciar Claude Code
claude

mi-app/
├── app/
│   ├── layout.tsx      ← Layout principal (HTML base)
│   ├── page.tsx        ← Página de inicio (/)
│   └── globals.css     ← Estilos globales
├── public/             ← Archivos estáticos (imágenes, etc.)
├── next.config.ts      ← Configuración de Next.js
├── tailwind.config.ts  ← Configuración de Tailwind
└── package.json        ← Dependencias del proyecto

# En tu terminal (no en Claude Code)
npx shadcn@latest init

Instala los componentes de Shadcn que vamos a necesitar:
Button, Card, Input, Dialog, Sheet y NavigationMenu

Vamos a crear un dashboard de tareas con las siguientes páginas y funcionalidades:

PÁGINAS:
- / → Dashboard principal con resumen y tareas recientes
- /tareas → Lista completa de tareas con filtros
- /tareas/nueva → Formulario para crear tarea
- /estadisticas → Gráficos de productividad

FUNCIONALIDADES:
- Crear, editar y eliminar tareas
- Categorías: Trabajo, Personal, Estudio
- Prioridad: Alta, Media, Baja
- Estado: Pendiente, En Progreso, Completada
- Filtrar y buscar tareas
- Datos guardados en localStorage (sin base de datos por ahora)

DISEÑO:
- Dark mode siempre activo
- Colores: fondo #0a0a0f, superficie #111118, violeta #7c3aed, cyan #06b6d4
- Layout con sidebar en desktop, nav inferior en móvil
- Componentes de Shadcn UI para formularios y botones

¿Puedes empezar creando la estructura de carpetas y el layout principal?

Crea el layout principal en app/layout.tsx con:
- Un sidebar fijo en desktop (250px) con:
  - Logo "TaskFlow" en la parte superior
  - Links de navegación con iconos (usa lucide-react)
  - Indicador de ruta activa
- En móvil: sidebar oculto, bottom navigation con los mismos links
- Área de contenido principal que ocupe el resto del espacio
- Fondo #0a0a0f, sidebar #111118

Usa TypeScript y los componentes de Shadcn que ya están instalados.

Crea el componente components/TaskCard.tsx que muestre una tarea individual.
El componente debe recibir estas propiedades (props):

interface Task {
  id: string
  titulo: string
  descripcion: string
  categoria: 'Trabajo' | 'Personal' | 'Estudio'
  prioridad: 'Alta' | 'Media' | 'Baja'
  estado: 'Pendiente' | 'En Progreso' | 'Completada'
  fechaLimite?: string
}

La tarjeta debe mostrar:
- Título en grande
- Badge de categoría (color diferente para cada una)
- Badge de prioridad (rojo=Alta, amarillo=Media, verde=Baja)
- Badge de estado
- Descripción breve (máximo 2 líneas con ellipsis)
- Fecha límite si existe
- Botones de acción: Editar, Completar, Eliminar

Usa Shadcn Card, Badge y Button. Diseño dark mode.

Crea la página app/tareas/page.tsx que:
1. Tenga datos de ejemplo hardcodeados (5 tareas de ejemplo)
2. Use el componente TaskCard para mostrar cada tarea
3. Tenga una barra de búsqueda y filtros por categoría
4. Un botón "Nueva Tarea" que redirija a /tareas/nueva
5. Layout de grid: 3 columnas en desktop, 2 en tablet, 1 en móvil

Crea el archivo lib/tasks-store.ts con:
- Un array de tareas de ejemplo como estado inicial
- Funciones para: getTasks(), createTask(), updateTask(), deleteTask()
- Persistencia automática en localStorage
- Tipos TypeScript para todo

Luego actualiza app/tareas/page.tsx para:
- Usar el store en lugar de los datos hardcodeados
- Conectar el botón "Eliminar" para borrar tareas realmente
- Conectar los badges de estado para cambiar el estado al hacer click

# Iniciar el servidor de desarrollo (ver cambios en tiempo real)
npm run dev
# Abre http://localhost:3000 en tu navegador

# Verificar que no hay errores de TypeScript
npm run type-check

# Preparar para producción
npm run build

# Ver errores de estilo
npm run lint

Al ejecutar "npm run build" me sale este error:
[pega aquí el error completo]

¿Puedes identificar qué archivo está causando el problema y corregirlo?

SEMANA 1: Define la arquitectura
  └─ "Diseña la estructura de archivos para una app de [tu idea]"

DÍA A DÍA: Construye feature por feature
  ├─ "Crea el componente para [función específica]"
  ├─ "Conecta [componente A] con [componente B]"
  └─ "Añade validación a [formulario]"

CUANDO ALGO FALLA: Debug con contexto
  └─ "Al hacer [acción], sale el error [error]. ¿Qué archivo hay que cambiar?"

ANTES DE PUBLICAR: Revisión final
  └─ "Revisa todo el proyecto. ¿Hay errores de TypeScript o código duplicado?"

# Instalar Vercel CLI
npm install -g vercel

# Publicar con un comando
vercel

Quiero publicar esta app en Vercel. ¿Qué pasos necesito seguir?
¿Necesito configurar alguna variable de entorno?