Cuando alguien me dice "tengo una idea, no sé por dónde empezar", casi nunca el problema es la idea. El problema es no saber qué cuentas abrir, en qué orden, y para qué sirve cada una.
Este post no es "el mejor stack del mundo". Es el stack que yo uso hoy para llevar una idea desde la servilleta hasta un producto que la gente puede pagar. Si te sirve, úsalo. Si encuentras algo mejor en el camino, cámbialo — yo lo hago todo el tiempo.
Voy en orden. De las cuentas que necesitas el día cero, a las que vas a necesitar cuando alguien por fin te dé dinero por algo.
Lo básico: existir en internet
Antes de cualquier código, antes de cualquier dominio, dos cuentas. Si no tienes esto, no puedes abrir nada más, porque todo lo demás te las va a pedir.
Gmail
CorreoTu identidad digital arranca aquí. Idealmente algo profesional —
tunombre@gmail.com, no dragon_92@hotmail. Todas las cuentas que vas
a abrir después se conectan a este correo, así que pónsele cariño.
GitHub
CódigoAquí vive tu código, pero también tu identidad como creador. Te autentica en Vercel, Supabase, Firebase y muchísimas otras plataformas con un click. Aunque no programes, abrir tu cuenta vale la pena.
Si recién estás empezando: usa tu nombre real en el correo y en GitHub. No te inventes un alias cool que vas a odiar en dos años cuando mandes el primer email importante.
Dónde vive el sitio: hosting y dominio
Tienes correo, tienes GitHub. Si quieres que tu idea exista como algo que se puede visitar, necesitas dos cosas: un lugar donde se hostee y un nombre con el que la gente lo encuentre.
Vercel
HostingConectas tu repo de GitHub y cada git push se vuelve un deploy en
producción. Plan gratis generoso, edge global, sin servidores que
administrar. Es donde vive este blog.
Squarespace Domains
DominioAquí registro mis dominios. Panel limpio, sin upsells agresivos, DNS manejable, y precios honestos en renovaciones. Lo que necesitas para que tu sitio tenga un nombre propio.
Cuando conectes tu dominio a Vercel, hazlo por DNS (apuntando registros A / CNAME desde tu registrador), no entregándole los nameservers. Así, si algún día cambias de host, mueves los registros y listo — no tienes que recuperar el control de toda tu zona DNS.
El stack para construir
Estas son las piezas con las que armo la interfaz. Tres herramientas, una sola decisión.
Next.js
FrameworkReact con todo resuelto: enrutamiento, SSR/SSG, optimización de imágenes, edge functions. Para un sitio público o un dashboard interno, es lo más cerca que hay de "no pelearse con la infraestructura".
Tailwind CSS
EstilosEstilos como utilidades. Suena raro al principio, pero después de una semana no quieres volver a CSS plano. Y combinado con variables CSS, puedes hacer light/dark mode sin sufrir.
TypeScript
TiposJavaScript con red de seguridad. El compilador te ahorra los bugs bobos antes de que lleguen a producción. No es opcional para mí.
¿Por qué los tres juntos? Porque son la combinación con la que más herramientas, plantillas y respuestas vas a encontrar en internet cuando te trabes. Y te vas a trabar.
Lo que llena las pantallas
Antes de tener producto real, necesitas que el sitio se vea poblado — imágenes que no se sientan stock, íconos consistentes. Antes pagaba por esto. Ya no.
Unsplash
Fotografía gratisBanco de fotos en alta resolución, gratis para uso comercial. Es lo que uso para mockups, hero sections y placeholders mientras tengo mis fotos definitivas. Tip: las que mejor funcionan son las que no parecen de stock.
react-icons
Íconos para ReactUna sola librería que te da Feather, Heroicons, Material, Font Awesome, Lucide y muchas más como componentes React listos. En lugar de instalar diez packs, importas el que necesitas y listo.
Cuando necesitas guardar datos
Si tu idea es solo un sitio que muestra cosas, hasta aquí llegas. Pero si necesitas guardar usuarios, posts, pedidos, mensajes — necesitas una base de datos. Y, casi siempre, autenticación.
Firebase
Backend de GoogleDe Google. Tiene base de datos (Firestore), auth, storage y funciones serverless en un solo lugar. Pegarlo a una app móvil o web es rapidísimo. Buenísimo para arrancar.
Supabase
Postgres + AuthPostgres real con una capa de auth, storage y APIs auto-generadas encima. Open source. Cuando tu producto crece y necesitas queries de verdad, esto es lo que quieres.
PostgreSQL
Base relacionalLa base de datos relacional por excelencia. Es lo que corre por debajo de Supabase y de buena parte de internet. Cuando quieres control total (Neon, Railway, RDS), Postgres es la respuesta.
¿Cuál usar? Depende del proyecto. Para un MVP rápido con auth simple, Firebase. Para algo que vas a hacer crecer y consultar de formas complejas, Supabase. Voy a escribir un post entero sobre esto: Firebase vs Supabase: cuándo usar cada unoPróximamente.
Que el mundo te encuentre: SEO básico
Tu sitio puede estar deployado, ser hermoso, ser rapidísimo — y aun así no existir para nadie. Si Google no sabe que estás ahí, no estás ahí. Esto es lo que todo proyecto necesita configurar, sin excepción:
- Metadata en cada página — title, description, OpenGraph, Twitter cards. En Next.js es la Metadata API: exportas un objeto
metadatay listo. Sin esto, tu link compartido en WhatsApp se ve como una URL pelada. sitemap.xml— la lista de todas tus páginas para que Google sepa por dónde caminar. Next.js lo genera automático con unapp/sitemap.ts.robots.txt— el portero. Le dices a los bots qué sí indexar y qué no. También automático en Next.js.- Registrar tu dominio en Search Console — el handshake oficial con Google. Sin esto, indexar te puede tomar semanas en lugar de horas.
Google Search Console
Indexación + SEOVerificas tu dominio (con un registro DNS o subiendo un archivo), le pasas tu sitemap, y Google empieza a rastrear. Después ves cuántas páginas tiene indexadas, qué búsquedas te están trayendo visitantes, y qué páginas están rotas para SEO.
Vercel Analytics
MétricasSaber cuántos visitantes tienes, de dónde vienen, qué páginas ven. Sin cookies, sin GDPR drama, ya viene conectado si hospedas en Vercel. Lo que mira Search Console por afuera, esto lo mira por adentro.
El orden importa: primero configura metadata + sitemap + robots, después conecta Search Console y le pasas el sitemap. Si lo haces al revés, Google se encuentra un sitio a medio terminar y tarda más en confiar en él.
Cuando empieces a tener usuarios reales
En el momento que tu sitio deja de ser solo informativo y arranca a recibir gente — formularios, signups, notificaciones — necesitas poder mandar correos desde la app. No te embarras con SMTP, hay una herramienta hecha para esto.
Lo que rodea al código
Construir un producto no es solo escribir código. Necesitas pensar la marca, los flujos, las pantallas, anotar ideas a las 2 AM. Estas son las herramientas que me acompañan ahí.
Figma
Diseño UIDonde dibujo las pantallas antes de codear. Plan gratis te alcanza perfecto para proyectos personales.
Canva
Marca y redesPara piezas rápidas — logos, posts de Instagram, mockups, portadas. No reemplaza Figma para UI, pero para el resto es imbatible en velocidad.
draw.io
Flujos y diagramasPara dibujar el flujo antes de codearlo: cómo viajan los datos, qué pantallas conectan con qué, dónde está la base de datos. Gratis, sin cuenta, exporta a todo. Lo abro cada vez que arranco algo nuevo.
Claude Code
IA en el editorLo que uso para programar día a día. Le explico qué quiero, edita el código directamente, corre tests, abre PRs. Cambió cómo trabajo.
Notion
OrganizaciónDonde me organizo: tareas, calendarios, listas, roadmaps, seguimiento del día a día. Es mi sistema operativo personal — todo lo que tengo que hacer vive ahí.
Obsidian
Documentación del proyectoDonde documento cada proyecto: decisiones, arquitectura, prompts, aprendizajes técnicos. Markdown puro, todo offline, con backlinks entre notas. Es lo que sé del proyecto.
Notion y Obsidian no compiten porque resuelven cosas distintas: Notion es para organizarme — qué tengo que hacer, cuándo, en qué proyecto. Obsidian es para documentar el proyecto — qué decisiones tomé, por qué, y qué tendría que recordar en seis meses cuando vuelva al código.
De dónde saco ideas
Antes del primer commit, antes del primer mockup, hay otra capa: mirar. Ver lo que otros ya hicieron, qué funciona, qué se siente bien. No para copiar — para entrenar el ojo.
Para mí es el primer paso de cualquier proyecto. Armo un tablero con todo lo que me gusta — colores, layouts, fotografía, tipografía, branding — y dejo que el patrón se revele solo. Es moodboarding sin fricción.
Behance
Portafolios de diseñoEl feed de los mejores diseñadores del mundo mostrando su trabajo completo (caso de estudio, no solo el shot). Bueno para ver cómo se ejecuta algo, no solo la imagen final.
Una idea no nace en el vacío. Cuanta más buena referencia consumas, más fácil distingues entre lo genérico y lo que tiene alma.
Dónde aprendo
Construir es una excusa para aprender constantemente — cada proyecto nuevo te empuja a un tema que no dominabas. Tener un lugar fijo donde formalizar ese aprendizaje (no solo googlear y olvidar) hace toda la diferencia.
DataCamp
Datos, Python, SQLCursos interactivos de datos, Python, SQL, machine learning y análisis. El formato corto + ejercicios en navegador me funciona mejor que los videos largos — aprendo haciendo, no viendo.
DevTalles
Cursos de desarrolloCursos en español de Fernando Herrera. Cubren todo el stack moderno — React, Next.js, Node, NestJS, Flutter, TypeScript. Profundos, sin relleno, con proyectos reales. Es donde voy cuando quiero meterme en algo nuevo en serio.
El stack no es la respuesta
Si llegaste hasta acá esperando que te diga "copia exactamente esto y te va bien", malas noticias: ese consejo no existe.
El stack no es la respuesta. La pregunta correcta no es "¿qué herramientas necesito?", es "¿cuál es la siguiente cosa que necesito mover hoy?". Si la respuesta es "validar que la idea le importa a alguien", no abras Vercel — abre WhatsApp y habla con cinco personas. Si es "que la gente pueda inscribirse", ahí sí abre Vercel y Resend.
Las herramientas son multiplicadores, no aceleradores. Multiplican lo que ya estás haciendo. Si no estás haciendo nada, el mejor stack del mundo te va a multiplicar por cero.
Empieza con el correo y GitHub. Después, lo que el siguiente paso te pida.