Crear una app de reservas con Coderblock, paso a paso

Qué vas a crear

En este tutorial crearás una app de reservas completa en la que los clientes podrán registrarse, consultar las franjas horarias disponibles, reservar una cita y gestionar sus reservas. El personal dispondrá de un panel de administración para consultar y actualizar las citas. Coderblock genera el frontend en React, la lógica del backend, la base de datos Postgres, la autenticación y las políticas de seguridad a partir de instrucciones en lenguaje natural. Tú dirigirás el desarrollo directamente desde el chat, sin tener que escribir manualmente rutas de API, código de autenticación ni migraciones de base de datos.

1. Inicia el proyecto

Crea un proyecto nuevo en Coderblock. Puedes partir de la plantilla para plataformas de reservas o describir tu app desde cero. Para empezar con una solución personalizada, puedes utilizar un prompt como este:

Crea una app de reservas responsive para un centro de bienestar. Los visitantes deben poder consultar los servicios y las franjas horarias disponibles. Los clientes registrados pueden reservar, reprogramar o cancelar citas. El personal necesita un panel de administración para gestionar servicios, horarios y reservas. Utiliza un diseño limpio y relajante, optimizado para dispositivos móviles.

Indica el tipo de negocio, quién utilizará la app, la duración de las reservas y el estilo visual que prefieres. Cuanto más contexto proporciones al agente, más se ajustará la primera versión a tus necesidades.

2. Genera y revisa la primera versión

Coderblock genera una app full stack real utilizando React, Vite, TypeScript y Tailwind CSS para el frontend. La app también recibe un proyecto de Supabase dedicado con Postgres, autenticación, almacenamiento y Row Level Security.

Abre la vista previa de desarrollo en vivo en la dirección .coderblock.dev del proyecto. Mientras sigues trabajando desde el chat, los cambios se aplican y aparecen en cuestión de segundos. Antes de añadir nuevas funciones, revisa las pantallas principales:

• Página de inicio
• Lista de servicios
• Calendario de disponibilidad
• Formulario de reserva
• Área personal del cliente
• Panel del personal

Si algo no funciona o no refleja lo que tenías en mente, solicita cambios concretos en lugar de empezar de nuevo. Por ejemplo:

Haz que las tarjetas de servicios sean más compactas, añade la duración y el precio a cada tarjeta y mantén visible el resumen de la reserva en la versión de escritorio.

O bien:

En dispositivos móviles, muestra primero la selección del servicio, después el calendario y, por último, los horarios disponibles.

3. Define los datos de las reservas

Ahora describe al agente qué información deberá gestionar la app. En este ejemplo, los datos principales corresponden a los servicios, los miembros del personal, la disponibilidad, las reservas y los perfiles de los clientes. Puedes utilizar un prompt como este:

Crea la estructura de la base de datos para servicios, personal, disponibilidad semanal, fechas bloqueadas y reservas. Cada reserva debe incluir el cliente, el servicio, el miembro del personal, la hora de inicio, la hora de finalización, el estado, las notas y el estado del pago. Añade las relaciones y los índices adecuados.

El agente diseña el esquema de Postgres y ejecuta las migraciones. Puedes revisar las tablas resultantes desde la pestaña Backend del editor, junto con los usuarios autenticados, el almacenamiento y las funciones. Para facilitar las primeras pruebas de la interfaz, también puedes pedirle que añada algunos datos iniciales:

Añade tres servicios de ejemplo con distintas duraciones y precios, dos miembros del personal y la disponibilidad para las próximas dos semanas.

4. Añade el acceso y los permisos de usuario

Todas las apps incluyen una tabla de perfiles y una estructura básica de roles. Ahora puedes pedirle a Coderblock que cree toda la experiencia de gestión de cuentas:

Añade el registro y el inicio de sesión de clientes mediante correo electrónico y contraseña. Protege la página de reservas de los clientes y el panel del personal. Los clientes solo deben poder consultar y modificar sus propias reservas. El personal puede gestionar todos los servicios, horarios y reservas.

El agente configura Supabase Auth, la gestión de sesiones, las rutas protegidas y la Row Level Security de Postgres. No necesitas crear una tabla personalizada para las contraseñas ni escribir manualmente el código de JWT o del hash de contraseñas. Si también quieres añadir el acceso mediante redes sociales, puedes solicitarlo de forma explícita. En este punto, prueba ambos roles: inicia sesión como cliente y como miembro del personal, y comprueba que cada usuario solo pueda ver los datos y utilizar las acciones a los que tenga acceso.

5. Crea reglas de disponibilidad fiables

Un sistema de reservas necesita algo más que un simple calendario. Las franjas disponibles deben tener en cuenta el horario laboral, la duración del servicio, las reservas existentes y cualquier periodo bloqueado. Describe estas reglas directamente en lenguaje natural:

Genera las franjas horarias disponibles según el horario de cada miembro del personal. Excluye las fechas bloqueadas y las reservas existentes, deja un intervalo de 15 minutos entre citas e impide que los clientes reserven horarios que ya hayan pasado.

También es importante gestionar las solicitudes simultáneas:

Impide las reservas duplicadas tanto en la base de datos como en el backend, incluso si dos clientes eligen la misma franja horaria casi al mismo tiempo. Muestra un mensaje claro si una franja deja de estar disponible antes de la confirmación.

Prueba servicios con distintas duraciones, citas cercanas a la hora de cierre, cancelaciones y días sin disponibilidad.

6. Crea los flujos para clientes y administradores

El recorrido del cliente debe ser sencillo y predecible: elegir un servicio, seleccionar a un miembro del personal si es necesario, escoger un horario, confirmar los datos y recibir la confirmación de la reserva. Puedes perfeccionarlo con un prompt como este:

Añade una pantalla final de confirmación que muestre el servicio, el miembro del personal, la fecha, la hora, la duración y el precio. Después de reservar, lleva al cliente a la sección Mis reservas, donde podrá reprogramar o cancelar las citas futuras.

Para el personal, solicita una vista más operativa:

Añade un panel de administración con vistas diarias y semanales de las reservas, filtros por miembro del personal y estado, y controles para confirmar, completar o cancelar una reserva. Incluye tarjetas de resumen con las reservas de hoy y las próximas citas.

7. Revisa y prueba todo el stack

Ahora prueba la app con distintos usuarios. Crea dos cuentas de cliente y una cuenta para el personal y comprueba que:

• Los visitantes no autenticados no puedan acceder a las páginas protegidas.
• Los clientes no puedan ver las reservas de otros clientes.
• El personal pueda gestionar las reservas, mientras que los clientes no puedan acceder a los controles de administración.
• Las franjas horarias canceladas vuelvan a estar disponibles cuando corresponda.
• Las reservas no válidas o que generen conflictos sean rechazadas.
• El diseño siga siendo fácil de usar tanto en ordenadores como en dispositivos móviles.

Cuando encuentres un problema, describe directamente en el chat qué hiciste y qué esperabas que sucediera. Por ejemplo:

Cuando un cliente cancela una cita, la franja horaria sigue apareciendo como no disponible. Corrige el cálculo de disponibilidad y añade una prueba para este caso.

8. Añade pagos con Stripe, si es necesario

Si las citas requieren un depósito o el pago completo, puedes solicitar lo siguiente:

Permite que los clientes paguen un depósito de 20 $ al confirmar una reserva. Empieza en el modo de prueba de Stripe y actualiza el estado del pago de la reserva cuando se complete el checkout.

Con la configuración predeterminada, el agente puede crear una cuenta de Stripe gestionada después de pedirte algunos datos, como el país y el nombre del negocio. No se necesitan claves de API y Coderblock gestiona el webhook de pago. Más adelante podrás completar la configuración de los pagos y la verificación de identidad mediante el enlace de Stripe proporcionado por el agente. Si prefieres utilizar tu propia cuenta de Stripe, elige la opción BYOK. El agente solicita STRIPE_SECRET_KEY mediante un proceso seguro específico para variables de entorno, la almacena en el servidor y registra automáticamente el webhook. Nunca introduzcas datos confidenciales directamente en el chat ni en el código generado. Antes de pasar al modo de producción, prueba los pagos completados, cancelados y fallidos.

9. Publica la app de reservas

Cuando hayas terminado todas las pruebas, haz clic en Publish. Coderblock despliega la app en producción en su dirección .coderblock.app, con SSL incluido. Las publicaciones posteriores aplican las actualizaciones rápidamente. Si quieres utilizar un dominio personalizado, abre Settings → Domains. Puedes conectar un dominio existente siguiendo el asistente de configuración de DNS o comprar uno directamente en Coderblock; en este último caso, el DNS y el SSL se configuran automáticamente.

Antes de dar la app por terminada, realiza una reserva de prueba real en el dominio de producción. Comprueba el acceso, la disponibilidad, la gestión de reservas, los pagos si están habilitados y el panel del personal. Ahora ya tienes una verdadera app de reservas full stack, lista para utilizarse y seguir evolucionando mediante el mismo flujo de trabajo basado en el chat.