Probando Bolt para vibe coding


Lo confieso, desde hace un tiempo, uso Inteligencia Artificial como apoyo para programar. Y me hace ser mejor programador: soy más eficiente y muchas veces mi código es de mayor calidad.

Pero lo cierto es que nunca había intentado hacer una aplicación nueva desde cero con Inteligencia Artificial, llevando el Vibe Coding a todo su esplendor.

Había oído hablar de varias herramientas especializadas en ello: Cursor, Windsurf, Lovable,… Pero justo el fin de semana pasado estuvo la herramienta Bolt gratis, así que quería compartir algunas impresiones de lo que me dió tiempo a probar. Obviamente, no tenía un uso ilimitado, pero sí mucho más amplio que la versión gratuita, permitiendo llegar mucho más allá.

Así que, ¡vamos al lío! Para probarlo, intenté hacer una pequeña aplicación web para gestionar mis prompts personales y tenerlos un poco organizados, que suelen tender al caos 😅

Nada más entrar, es como un lienzo en blanco. Directamente aparece una caja de texto para describir la idea que tienes en la cabeza. Como en todo prompt, lo puedes especificar con todo el detalle que quieras.

Prompt inicial para Bolt

Como solo estaba probando, no dediqué demasiado tiempo en el prompt. Quería darle un poco de libertad para ver por dónde salía y si era coherente con sus decisiones. Ni siquiera especifiqué el stack de tecnologías a utilizar.

Crea una aplicación web para gestionar mi colección personal de prompts. De cada prompt, debe guardarse un título, una descripción, la plataforma utilizada, el modelo de IA usado y se podrá adjuntar ficheros con el resultado obtenido. También debe tener un buscador.

Sólo con esto, ya me creó una versión bastante funcional, incluyendo campos útiles pero que no le había pedido, como la fecha de creación. También me incluyó un dashboard, con estadísticas básicas de los prompts almacenados.

En cuanto a las tecnologías, optó por React con Tailwind CSS para los estilos. Todo sobre nodeJS.

Pero quería seguir profundizando un poco más, ya que usaba el almacenamiento local del navegador, por lo que mis prompts se podrían perder con facilidad. También quería protegerlo con acceso por usuarios, así que le propuse utilizar una base de datos MySQL, ya que ya disponía de un servidor. De paso, le añadí idiomas. El prompt fue el siguiente.

En la página principal, deja más espacio a los títulos de cada tarjeta, ya que ahora se cortan. Añade un sistema de usuarios y login contra una base de datos MySQL. Haz la aplicación multiidioma configurable desde la pantalla de Settings

Comentar que, en cada iteración te muestra una lista de ficheros modificados y luego te da una explicación funcional y técnica de los cambios realizados en lenguaje natural para que quede más claro.

Lo que se resume en estos cambios.

También me comentó todo el stack utilizado a nivel técnico, así como la estructura de la base de datos que necesitaba.

Y nuevamente, un resumen de las mejoras funcionales implementadas.

En este punto, ya me generó el primero error. Es curioso porque te avisa él mismo (ya lo podría haber corregido también). Y para colmo, parece que era un error sencillo de solucionar: cambiar la extensión de un fichero de .ts a .tsx.

Como cosa curiosa, aquí empezó a contestarme en inglés pese a que todos mis prompts estaban en castellano y que era el idioma que estaba usando Bolt hasta ahora.

Uso de base de datos MySQL en Bolt

A continuación, aprovechando que ya tenía la base de datos, fue pedirle que la usara para todos los datos de la aplicación.

Usa la base de datos MySQL creada para guardar los prompts y la configuracion

Con esto dejó de usar localStorage para usar la base de datos MySQL, con todas sus ventajas.

Aquí ya iba un poco a ciegas por que en la previsualización sólo veía la pantalla de login. Así que ya era hora de desplegar el código en mi propio servidor con su propia base de datos.

Bolt dispone de una integración con Supabase para usar bases de datos, pero tenía claro que quería que usara MySQL y no quería usar Supabase ya que no era la idea final y lo podía liar. Quizás valía la pena, pero no llegué a probar esta parte. Así que le pedí el script de base de datos y, además, que me diera las instrucciones exactas para desplegar.

crea un fichero SQL con el script para crear la base de datos y un fichero MD con las instrucciones para compilar y desplegar

Para el script de base de datos, me lo creó a la perfección (aunque con el nombre de base de datos que él quiso). Como punto a favor, está el hecho de que me añadió los inserts comentados de datos de prueba por si quiería añadirlos, incluido un usuario de prueba.

Sobre el fichero con instrucciones, como no especifiqué nada, me añadió todos estos apartados.

Como se ve, es muy completo y claro. Explica como configurar la base de datos, luego el frontend, a continuación el backend y, además, me dio opciones dependiendo dónde quería desplegar: VPS, Docker o en la nube.

PWA

Luego ya me vine arriba y le pedí que me la preparara para ser una PWA.

añade los cambios necesarios para que sea una PWA

Y, como se ve, implementó todas las capacidades de una PWA.

No me generó las imágenes del icono de la aplicación en distintas dimensiones, pero se lo perdono. Tenía muy buena pinta, aunque me encontré con otro problema de la plataforma. Y parece que a día de hoy, sin solución.

Parece que StackBlitz (la empresa detrás de Bolt) no es capaz de gestionar los Service Worker necesarios para las PWA. Así que desde aquí no podemos probar mucho de esta faceta. Pero bueno, quizás también me precipité al perdírselo y debería ser de las últimas cosas en pedir para dejar la aplicación lo más operativa posible para ser un prototipo o una primera versión.

Y ahora a por el backend

En este punto, intenté desplegar la aplicación en mi propio servidor. Todo fue bien hasta que intenté probarla y parecía que no hacía nada, ni siquiera iniciar sesión…

Revisé el código y me di cuenta de que me daba la impresión de que no estaba implementado el backend, por lo que las APIs no llegaban a ningún sitio. Así que fui directo con la orden:

crea el backend de la API

Ahora sí, me ha generado de una todo el backend, usando como servidor nodejs.

En principio, parece que ha aplicado principios de seguridad y encriptación de la información, así que tiene buena pinta.

Paquetización y despliegue

Para finalizar, quería que me dejara de forma clara cómo podía desplegar tanto el front como el backend en mi servidor.

como puedo crear un paquete único y arrancar a la vez el backend y el frontend?

Me generó la configuración para npm pero también para Docker, aunque esto último no lo contemplaba así que no lo llegué a verificar. Además, me guardó toda la explicación en un fichero .MD.

Me generó los package.json necesarios, pero parece que no estaban del todo bien definidos porque me entraba en una especie de bucle infinito. No veía claro el problema, así que acabé preguntando de nuevo a Bolt.

Me generó 3 scripts para poder descargar las dependencias y compilar correctamente, así como las instrucciones y el orden para ejecutarlos. Ahora parecía que sí que arrancaba bien.

Ya era hora de llevarlo todo a mi servidor, pero en vez de pensar cómo hacerlo, opté por preguntar directamente a Bolt.

cómo lo puedo desplegar en cpanel?

Este me creó una guía completa para desplegar en cPanel, así como las instrucciones para compilar, la configuración del fichero .env que me generó y cómo configurar y subir la aplicación desde cPanel, todo a la primera. Igual se lo tenía que haber pedido antes.

Resolución de errores

Todo parecía estar bien. Hasta que desplegué y empecé a utilizar la aplicación. Había un par de errores en tiempo de ejecución, así que me descargué el código y lo abrí con Visual Studio Code, el IDE que suelo utilizar para desarrollar.

Enseguida depuré y vi los errores. Eran sencillos de corregir: en las clases del modelo y en los JSON de respuesta de las APIs, estaba usando nomenclaturas distintas para los mismos campos. En un lado usaba camelCase y en el otro snake_case. Así que lo corregí y ya funcionaba todo. Tuve que probar un poco la aplicación ya que eran errores en tiempo de ejecución y no me los marcaba como errores en Visual Studio Code.

También le tuve que añadir alguna barra de scroll que había ocultado en los popups para ver todo el contenido de los mismos.

Fue rápido, pero en este punto sí que fueron necesarios conocimientos de desarrollo de aplicaciones.

La aplicación final implementada con Bolt

Y ahora el resultado final. Quedó una aplicación bastante apañada como veis. Lo primero que nos encontramos es la pantalla de login. Sencilla pero funcional, tanto para iniciar sesión como para registrarse.

Tras registrarse e iniciar sesión, nos lleva a la biblioteca en sí. Con el menú en el lateral izquierdo.

Para añadir nuevos prompts, ha creado un popup con toda la información con sus correspondientes tipos de campo correctos. Aquí es donde tuve que añadir la barra del scroll vertical, ya que sino no se veía el botón de guardar en mi pantalla.

En cuanto a la pantalla de búsqueda, es muy completa. Ha añadido varios filtros que puedes ir añadiendo, quitando o empezando de nuevo. Todos funcionales y sin necesidad de pinchar en ningún botón de buscar. Quizás habría que ver el rendimiento con muchos registros.

Sobre el dashboard o escritorio, saca las estadísticas básicas. No le había pedido esta pantalla pero está bien para saber las estadísticas de nuestros prompts, así que puede ser útil.

Por último, tenemos la pantalla de configuración. Desde aquí podemos gestionar todas las tablas maestras usadas. Además, sin pedírselo, ha creado la funcionalidad para exportar e importar los prompts, lo cual está muy bien. Lo hace mediante ficheros JSON.

Lo que está regular, es la gestión de las pestañas, ya que queda raro un scroll horizontal ahí, lo podría haber resuelto de otra forma más usable. Pero bueno, le perdonamos porque funciona bien.

Mi opinión de Bolt

Tras esta primera experiencia con Bolt, ya puedo formarme una pequeña opinión. No he probado otras herramientas de vibe coding para desarrollar aplicaciones enteras así que, de momento, no puedo comparar. Pero, en general, puedo decir que me ha gustado la experiencia. Aunque todavía tiene recorrido de mejora.

Cosas que más me gustaron de Bolt 🔝

  • Realmente te da una aplicación funcional en muy poco tiempo.
  • Añade algunas funcionalidades típicas aunque no se las pidas, como un dashboard o aspectos típicos de CRUDs.
  • Para un primer prototipo o un punto de partida puede valer.
  • El ahorro de tiempo es incontestable: Me llevó una hora cuando si lo hubiera hecho yo desde cero me hubiera costado algún que otro día.
  • Las instrucciones que genera en los ficheros MD, bien explicadas y con formato para hacerlas más cómodas de leer.

Cosas que tienen un pase 👍

  • Si no le especificas lo contrario suele utilizar la librería de estilos Tailwind, así que las aplicaciones suelen ser visualmente casi idénticas.
  • Para desplegar en tu propio servidor puede complicarse la cosa, pero es verdad que le puedes pedir ayuda y te crea los scripts y un fichero MD con las instrucciones.
  • Las tecnologías seleccionadas no eran mi fuerte, pero imagino que si las especifico desde el principio se hubiera adaptado.
  • Aunque le pides que la traduzca, no traduce todas las cadenas.

Cosas que menos me gustaron de Bolt ☠️

  • Tras varias iteraciones, genera algún error en tiempo de ejecución que acabas antes corrigiéndolo a mano. O errores que Bolt puede subsanar pero tienes que gastar más créditos para hacer otra iteración.
  • Hay funcionalidades que te crea el botón o la pestaña para hacerlas pero que realmente están sin implementar y se las tienes que pedir en otras iteraciones.
  • Para generar el backend también tuve que pedírselo en otra iteración.
  • Quizás me apresuré demasiado en pedirle algunas cosas como transformarla en PWA o que usara una base de datos para los usuarios, tras lo cual perdí el preview y no podía ver los cambios desde la misma plataforma de Bolt. Igual había manera de saltarlo o hacer un mock, pero ya no llegué a investigar tanto.

🤔¿Alguien más lo ha probado? ¿Cuáles son vuestras impresiones?


Deja un comentario

Información sobre protección de datos

Vicente SG te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Vicente Sancho Guijarro (Vicente SG) como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicito es para gestionar los comentarios que realizas en este blog. Legitimación: Consentimiento del interesado. Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Banahosting.com (proveedor de hosting de Vicente SG) dentro de la UE. Ver política de privacidad de Banahosting.com. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no atender pueda tu solicitud. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en [email protected] así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://vicentesg.com, así como consultar mi política de privacidad.

Logo mínimo de Vicente Sancho
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.