Crea y Publica tu Web de Reservas Completa en 15 min con Google AI Studio + Firebase + Antigravity (gratis y sin código manual)

Formulario de reserva AURA en la web publicada, con campos de nombre, email, servicio, fecha y hora

Si tu negocio depende de agendar citas, la diferencia entre “tenemos un formulario” y “tenemos un sistema de reservas real” es enorme. Un sistema real guarda las reservas en una base de datos, permite a la administración gestionarlas desde un panel privado, y confirma automáticamente por correo. Sin correos manuales, sin planillas, sin “te escribo cuando pueda”.

En esta guía te dejo un flujo completo para crear una web de reservas para un negocio (clínica estética, barbería, centro dental, coworking, canchas de fútbol o incluso restaurante) usando herramientas gratuitas o con planes gratuitos: Google AI Studio, Firebase y Google Antigravity. Al final publicas todo con Hostinger (solo pagas hosting).

Trabajamos para lograr algo muy concreto: una aplicación con:

  • Formulario de reserva (tratamiento, fecha y hora).
  • Registro real de reservas en base de datos (Firebase).
  • Panel de administración privado con login.
  • Confirmación automática por email al cliente.
  • Publicación con deploy automático desde GitHub.

Tabla de contenido

🧩 El stack que vamos a usar (y qué cuesta de verdad)

La idea es que no tengas que programar manualmente. La mayor parte del trabajo lo hace la IA creando la aplicación. El único costo que aparece en el camino es el hosting.

Herramientas usadas:

  • Google AI Studio: para construir el código de la app a partir de un prompt.
  • Firebase: para guardar reservas y llevar la data real.
  • Google Antigravity: para cargar, estandarizar y gestionar el proyecto.
  • Resend: para enviar correos de confirmación (en el video se comenta que tiene un nivel gratuito con hasta mil emails mensuales).
  • GitHub: repositorio para conectar con despliegue.
  • Hostinger: para publicar la web (con enlace de descuento incluido más abajo).

Link importante de la descripción (Hostinger con descuento): https://hostinger.com/rodrigo

El resto de servicios se apoya en planes gratuitos o de uso permitido para empezar. El objetivo es que puedas tener una app funcionando rápido, con una base sólida para crecer.

🎯 Qué hace esta web (caso de uso real para cualquier negocio)

La aplicación la construimos pensando en una clínica estética, pero el flujo aplica igual para cualquier negocio que necesite gestionar reservas. Ejemplos:

  • Barberías (cortes, barbas, horarios).
  • Canchas de fútbol (turnos por fecha y hora).
  • Coworking (reservas de salas o puestos).
  • Centros dentales (tratamientos o consultas).
  • Restaurantes (reservas para mesas, si ajustas el modelo).

El punto clave es que el sistema no se queda en una “landing con formulario”. Termina siendo una app con:

  • Guardado de reservas.
  • Acceso privado al admin.
  • Notificación al cliente por email.
  • Gestión básica de reservas (confirmar y cancelar).

🧠 Paso 1: Crear la app en Google AI Studio con un prompt en español

El flujo empieza en Google AI Studio. Aquí la IA te devuelve la primera versión de la aplicación a partir de un prompt bien definido.

Hay un detalle que parece menor pero importa: la IA tiende a escribir en inglés. Por eso, en el prompt se debe indicar claramente que el idioma sea español para evitar que la interfaz y la lógica salgan mezcladas.

En el video se utiliza un prompt básico bastante detallado (se menciona que luego se corrige para forzar el español) y se envía con el botón Build.

Tras el build, obtienes una primera versión que ya incluye un formulario de reserva. Por ejemplo:

  • Seleccionar un tratamiento.
  • Elegir fecha.
  • Confirmar reserva y ver un estado “reserva confirmada”.

Pero ojo: en esta etapa es una maqueta. Sirve para probar la experiencia, pero todavía no está conectada a una base de datos real.

🗄️ Paso 2: Integrar Firebase para guardar reservas de verdad

El siguiente paso es pasar de la maqueta al sistema real. Para eso necesitas una base de datos: aquí entra Firebase.

En la conversación, el instructivo es directo: se le pide a la IA que implemente la reserva con base de datos e integre Firebase.

Lo importante de este paso es que la integración no es solo “guardar algo”. Se construye una estructura para:

  • Crear una sección privada de administración.
  • Agregar login con contraseña (para que sea seguro).
  • Conectar la app a Firebase para que las reservas queden registradas.

Según el flujo mostrado, no tienes que configurar manualmente todo en Firebase. En general, la IA te guía con la integración y te deja el proyecto listo.

🔐 El admin con URL privada (/admin)

Un punto práctico del resultado: el panel de administración se accede desde una ruta tipo /admin. Esto ayuda a que el enlace no quede “expuesto” en la interfaz principal. En vez de tener un botón visible, el admin se protege por ruta y login.

Una vez configurado, puedes probar creando una reserva desde el formulario y luego ingresar al admin para confirmar que efectivamente se guardó en la base de datos.

📌 Paso 3: Agregar email y nombre del cliente (para poder confirmar por correo)

En el primer formulario, el sistema puede reservar, pero falta un detalle indispensable: para notificar al cliente necesitas sus datos. En el flujo se detecta exactamente eso: falta el email (y también se suma el nombre).

Entonces se ajusta el formulario solicitándole a la IA que pida:

  • Email (lo más básico e imprescindible).
  • Nombre (para personalizar el mensaje).

Cuando se implementa este cambio, la tabla de reservas muestra una nueva columna “cliente” con el nombre en negrita y el correo debajo (según se observa en el panel).

✅ Prueba rápida end-to-end

La manera correcta de validar que el sistema ya es real es probar:

  1. Ingresar un nombre y email en el formulario.
  2. Completar la reserva y confirmar.
  3. Revisar en el panel de admin que la reserva aparece guardada.

Hasta aquí ya tienes reservas en base de datos, administración privada y datos del cliente. Lo siguiente es enviar el correo automáticamente.

📧 Paso 4: Enviar confirmaciones automáticas por email con Resend

Ahora sí: falta el reenviar (enviar) el correo. La idea es que cuando el usuario reserve, reciba un email tipo:

  • Saludo con el nombre.
  • Confirmación: “tu reserva ha sido procesada con éxito”.
  • Tratamiento, fecha y hora.
  • Mensaje final tipo “te esperamos”.

Para lograrlo, se integra un servicio de email transaccional. En el flujo se usa Resend.

Se comenta que Resend es gratuito con un límite (hasta mil emails gratuitos mensuales, según lo indicado). El proceso general:

  1. Registrarte en Resend.
  2. Crear una API Key.
  3. Pegar esa API Key en el proyecto (en la configuración del servicio dentro de AI Studio).
  4. Aplicar y probar.

⚙️ Resultado: el correo llega al cliente

Tras la integración y la prueba con una reserva nueva, el mensaje llega con el asunto y el contenido basado en los campos guardados (nombre, tratamiento, fecha, hora).

Además, el texto es formateable. La instrucción del flujo es clara: puedes pedirle al IA que lo formatee como tú quieras.

🧹 Paso 5: Manejar cancelaciones y corregir errores usando el mensaje de la pantalla

Un sistema de reservas no es completo si solo permite crear. También necesitas cancelar o eliminar reservas.

En el flujo se identifica un detalle: el botón o acción de eliminar/cancelar no funcionaba correctamente al inicio. En vez de quedarse estancado, el método es muy útil:

  • Copiar el error exacto que aparece en pantalla.
  • Pasárselo a la IA junto con contexto: “cuando intento cancelar reserva, aparece esto”.

Con eso, la corrección suele ser mucho más rápida porque la IA trabaja con el error real, no con una descripción vaga.

Luego de aplicar el ajuste, se prueba la eliminación de una reserva y se valida que funciona correctamente.

🧪 Ver el estado en Firebase (solo para confirmar que todo queda conectado)

Aunque no es estrictamente necesario entrar a Firebase después de la integración, vale la pena una verificación visual para tener confianza.

El flujo muestra que desde la consola de Firebase puedes ver el proyecto y una tabla con los bookings (reservas). Esto confirma que la app realmente escribe en la base de datos y que el admin refleja lo guardado.

🚀 Paso 6: Preparar el proyecto para GitHub (estandarizar la estructura)

Ya con la app funcionando, viene la parte importante para publicar y mantenerla: pasar a GitHub.

La lógica es esta: una vez que el proyecto queda en un repositorio, puedes desplegarlo en un hosting con deploy automático. Y cuando hagas cambios, GitHub actualiza y tu sitio se refleja sin repetir todo el proceso manual.

El problema típico: incompatibilidad al desplegar

En el flujo se menciona que aparecía un error al conectar o publicar en hosting directamente, debido a una incompatibilidad de arquitectura. El consejo técnico que se entrega es directo:

  • Pedirle al proyecto que estandarice a una estructura Next.js normal.
  • Usar variables de entorno en un archivo .env (correctamente).

Suena técnico, pero el punto es práctico: cuando el proyecto se estandariza, las variables de entorno quedan bien tomadas y el deploy es mucho más estable.

El flujo muestra cómo la IA genera el archivo .env (con variables de entorno) y se guarda el proyecto ya normalizado.

⚠️ API Key faltante de Resend

Otro detalle que aparece: por algún motivo faltaba la API Key de Resend en el archivo de entorno. La solución es crear una nueva API Key en Resend, pegarla en .env y luego:

  • levantar el proyecto para validar que carga bien.
  • confirmar que el comportamiento se ve igual que antes.

Con esto, se evita que el despliegue falle por configuración incompleta.

🔁 Paso 7: Conectar Antigravity a GitHub y guardar el código

Una vez la estructura está normalizada y el proyecto corre, se conecta a GitHub.

El flujo muestra la pestaña Source Control y el botón Publish to GitHub. Si es la primera conexión, te pedirá iniciar sesión o registrarte en GitHub (gratuito).

Esto te deja el repositorio guardado. Buena práctica: que el repositorio sea privado para que no quede expuesto. El sistema queda protegido, y en el futuro puedes volver atrás si necesitas.

🌍 Paso 8: Publicar en Hostinger con deploy desde GitHub

El último tramo es publicación. Se utiliza Hostinger como hosting. En la descripción se deja un enlace con descuento:

https://hostinger.com/rodrigo

El flujo explica que en Hostinger se puede crear un nuevo sitio web eligiendo una opción de aplicación web Node.js. Se trabaja con un dominio temporal para probar y luego se puede conectar un dominio definitivo.

Clave: pasar variables de entorno al deploy

Durante la configuración en Hostinger, algo que no se puede saltar es el paso de variables de entorno. Se explica que se deben entregar al sistema para que la aplicación lea los valores correctos del archivo .env.

Con eso, Hostinger puede ejecutar el proyecto con sus claves (como la de Resend y el acceso a Firebase según corresponda).

Ver el sitio en línea

Después del deploy, el flujo muestra que puedes entrar al panel de control y abrir el enlace temporal. Ya ahí se confirma que la web carga desde el hosting.

Si estás haciendo esto para un cliente, ese enlace sirve para compartirlo de inmediato.

🔧 Paso 9: Cambios futuros y publicación instantánea (mantenerlo vivo)

Uno de los grandes beneficios del flujo es el mantenimiento. Se deja configurado para que los cambios se propaguen automáticamente.

La idea:

  • Publicas al repositorio en GitHub.
  • Hostinger detecta el update y vuelve a desplegar.
  • Tu sitio queda actualizado en línea.

Esto te da control absoluto sin necesidad de entrar a paneles técnicos del hosting cada vez.

En palabras simples: tu app vive conectada a tu repositorio, y el hosting acompaña el proceso.

🧠 Prompt y ajustes: el método detrás del “funciona rápido”

Parte de lo que hace este flujo tan efectivo no es solo la herramienta. Es el método de iteración:

  • Primero obtienes una maqueta funcional del formulario de reservas.
  • Luego conectas base de datos real con Firebase.
  • Después agregas email y nombre para poder confirmar por correo.
  • Luego integras el envío con un servicio como Resend.
  • Finalmente ajustas acciones como eliminar reservas y corriges errores usando el mensaje exacto.

Ese orden reduce frustración. No intentas integrar todo de una vez. Construyes por capas hasta que el sistema queda completo.

Consejo práctico: fuerza el español desde el prompt

Se repite en el flujo por una razón: si no indicas idioma, la IA tiende a crear contenido en inglés. En la práctica, eso se traduce en textos del formulario, mensajes del admin y correos que no quedan coherentes para tu audiencia.

Consejo práctico: si hay error, usa el error

Cuando algo falla (como eliminar reservas), no describas el problema en abstracto. Copia el error y pégalo con contexto. Eso ayuda a que la corrección sea mucho más directa.

📎 Dónde encajan los servicios: un mapa mental rápido

Para que entiendas el rol de cada herramienta, piensa en esto:

  • Google AI Studio: “crea” la aplicación desde un prompt (y te permite iterar pidiendo cambios).
  • Firebase: “guarda” reservas y permite verlas desde el panel admin.
  • Antigravity: “estandariza” y prepara el proyecto para producción.
  • Resend: “manda correos” automáticos de confirmación.
  • GitHub: “almacena” el código y conecta el flujo de deploy.
  • Hostinger: “publica” el sitio en línea y ejecuta el proyecto con variables de entorno.

✅ Checklist final antes de entregar la web al cliente

Antes de considerar “terminada” la solución, revisa estos puntos:

  • El formulario de reservas pide tratamiento, fecha y hora (según lo que definas).
  • Se solicita nombre y email para el cliente.
  • La reserva queda guardada en Firebase.
  • Existe un panel admin privado (por ejemplo en /admin), con login.
  • El admin puede confirmar reservas.
  • La acción de cancelar/eliminar funciona correctamente.
  • El cliente recibe correo de confirmación con datos de la reserva.
  • La app está publicada en Hostinger y carga por el link temporal o dominio definitivo.
  • Cualquier cambio se publica a GitHub y se refleja en el hosting automáticamente.

🔍 ¿Quieres hacerlo para tu negocio?

El flujo está pensado para adaptarse rápido. Cambias el texto del negocio, los tipos de tratamientos o servicios, y el esquema de turnos. El “corazón” del sistema se mantiene: reserva, guardado, panel admin, confirmación por email y despliegue.

Si necesitas recursos extra para crear apps con IA, en la descripción se comparte una comunidad y herramientas:

📲 Propuesta final: el salto de “un formulario bonito” a un sistema que vende

Una reserva bien hecha no solo organiza horarios. Reduce trabajo administrativo y aumenta conversiones. El cliente sabe que su cita quedó confirmada y el admin tiene visibilidad real desde el panel.

Con este stack, no dependes de una plantilla ni de pegar código manualmente. Construyes una aplicación completa con base de datos y un panel privado, con emails automáticos, y la publicas en hosting para que funcione de verdad.

Si tu negocio necesita gestionar reservas, este enfoque te permite pasar a un sistema serio en poco tiempo, con costos controlados y un flujo de cambios que no te vuelve a trabar.

Entradas relacionadas