v0¶

v0.dev · UI React generada con IA (Vercel)

Qué es¶

v0 convierte descripciones en texto a componentes React (Tailwind, shadcn/ui). Sirve cuando el frontend no es lo fuerte del equipo o necesitás pantallas rápido para el pitch.

Cuándo usarlo en el hackathon¶

Landing del proyecto en 30 minutos
Prototipo del flujo de pago SEM (conductor / permisionario)
Prototipo visual antes de conectar API real
Exportar código e integrarlo en Next.js en Vercel

Cuándo NO usarlo¶

Lógica compleja on-chain (Arkiv/Stellar) — mejor SDK directo
App que ya tenés en otro framework y solo falta una pantalla chica

Primer uso¶

Entrá a v0.dev con cuenta Vercel/GitHub
Prompt ejemplo:

App de estacionamiento medido: pantalla de pago del conductor,
registro del permisionario y confirmación digital del cobro en efectivo
(bache, basura, luz), filtros por barrio, dark mode, mobile-first.

Iterá con mensajes: “más grande el botón”, “agregar modal de detalle”
Add to Codebase o copiá el componente a tu repo

Integrar con tu repo¶

Next.js (recomendado)Solo demo

npx create-next-app@latest mi-app --typescript --tailwind --eslint
cd mi-app

Pegá el código de v0 en app/page.tsx o components/. Instalá dependencias que v0 liste (shadcn, lucide-react, etc.).

Usá el preview de v0 en el pitch y explicá que el código está exportado al repo.

Tips para el hackathon¶

Pedí mobile-first — el jurado puede ver en celular
Una pantalla por prompt; no pidas “toda la app” de una
Revisá accesibilidad básica (contraste, labels)
Conectá datos reales después: fetch a tu API o Supabase

v0¶