XpectreLabs · Hackathon Web3 · Solana Devnet
Guía de Desarrollo
Solana Web3
De cero a demo en 4 horas. Sigue los pasos en orden.
Si algo falla, cada sección tiene un Plan B.
Sección 01
Repositorio en GitHub
Antes de escribir código, crea tu repo. Así guardas tu trabajo cada 30 min y nunca pierdes nada.
1
Crear repo y clonar el starter kit
Cambia TU_USUARIO por tu usuario real de GitHub en el comando del remote.
2
Flujo de trabajo durante el hackathon
git checkout . revierte todos los cambios al último commit seguro si algo explota.
Sección 02
Setup del Proyecto
El starter kit viene preconfigurado. Instala dependencias y crea el .env.local.
1
Instalar dependencias
npm install puede tardar 2–3 min. Warnings amarillos = normal. Errores rojos = llama al organizador.
2
Variables de entorno (.env.local)
NUNCA subas .env.local a GitHub. El .gitignore del starter kit ya lo excluye automáticamente.
Sección 03
Solana Devnet
Devnet funciona igual que la red real pero los tokens no tienen valor. Es tu sandbox gratuito.
RPC Endpoint
api.devnet.solana.com
Explorer
solscan.io + ?cluster=devnet
SOL de prueba
Gratis en faucet.solana.com
Costo de deploy
$0.00 USD
1
Configurar Phantom en Devnet
Phantom → ⚙️ Settings → Developer Settings → Testnet Mode OFF → volver → ícono de red (arriba derecha) → seleccionar Devnet
Cuando dice "Devnet" en la parte superior de Phantom, está listo.
2
Conseguir SOL gratis (faucet)
Opción A: faucet.solana.com → pega tu dirección → Request Airdrop
Opción B: usa el snippet de Airdrop desde código (ver Sección 05)
Opción B: usa el snippet de Airdrop desde código (ver Sección 05)
Máximo 2 SOL por request. Si falla, espera 30 segundos e intenta de nuevo.
3
Ver tus transacciones en el Explorer
https://solscan.io/tx/TU_TX_HASH?cluster=devnet
Siempre agrega ?cluster=devnet. Sin eso el explorer busca en Mainnet y no encuentra nada.
Sección 04
Conectar la Wallet
El wallet-adapter maneja toda la complejidad. Con 2 snippets tienes conexión completa.
1
WalletProvider en layout.tsx (una sola vez)
Este código envuelve toda la app. Cualquier componente puede acceder a la wallet después de esto.
2
Botón de conectar wallet
WalletMultiButton trae el modal completo incluido — no construyas nada más para la conexión.
Sección 05
Snippets Clave
Copia, pega, adapta. Estos bloques cubren el 90% de lo que necesitas hoy.
Sección 06
Tu Proyecto
Elige uno. El MVP de cualquiera se puede construir en 2–3 horas con los snippets de arriba.
Wallet Roast
FÁCIL
IA analiza tu historial de TXs y te hace un roast brutal
Wallet War
FÁCIL
Compara balances entre wallets en tiempo real
WalletGPT
MEDIO
Chat que ejecuta transacciones en lenguaje natural
NFT Prompter
MEDIO
Describe un NFT con texto, se mintea solo
SOL Flip
MEDIO
Cara o cruz on-chain, SOL real en juego
Hackathon Cert
FÁCIL
NFT certificado de participación on-chain
Orden recomendado: conectar wallet → leer balance → feature principal → estilos. Nunca al revés.
mi-proyecto-web3/
├── src/app/
│ ├── layout.tsx ← WalletProvider aquí
│ ├── page.tsx ← Tu página principal
│ └── api/agent/route.ts ← Solo para WalletGPT
├── components/
│ ├── WalletConnect.tsx ← Botón de wallet
│ └── [TuFeature].tsx ← Tu feature principal
├── .env.local ← Variables privadas (NO subir)
└── package.json
Sección 07
Publicar el Proyecto
Vercel despliega tu Next.js en 60 segundos. Gratis, URL pública, sin configurar servidores.
1
Deploy con Vercel CLI
2
Variables de entorno en Vercel
1
Vercel Dashboard → Tu proyecto2
Settings → Environment Variables3
Agrega cada variable del .env.local4
Save → Redeploy3
Checklist antes del demo
✓
La app carga en la URL pública de Vercel✓
El botón de wallet funciona en Devnet✓
La feature principal funciona con wallet real✓
Tienes SOL en tu wallet para la demo✓
Solscan abierto en otra pestaña para mostrar TXs✓
Repo actualizado en GitHub con todos los cambiosSección 08
Código por Proyecto
Implementación completa de cada proyecto. Copia el bloque que necesitas y adáptalo a tu UI.
SOL Flip — Apuestas On-Chain
Cara o cruz usando el hash del bloque como fuente de aleatoriedad
MEDIO
Hackathon Certificate — NFT On-Chain
Genera un certificado en Canvas y lo mintea como NFT en Solana
FÁCIL
NFT Prompter — Texto → NFT
El usuario describe su NFT, DALL-E lo genera, Metaplex lo mintea
MEDIO
Wallet Roast — IA Analiza tu Wallet
Lee el historial on-chain y GPT-4o te hace un roast personalizado
FÁCIL