Cómo construí el sitio de reservas por solicitud de una casa en Uvita

Antes de escribir el sitio real, armé nueve direcciones de diseño completas, cada una en su propia página, más una página selectora que enlazaba a todas. Las nueve existían al terminar el 10 de febrero. La que ganó fue de estilo editorial oscuro, con detalles dorados.

El 2 de marzo borré, en un solo cambio, los otros ocho diseños y la página selectora: 9,339 líneas en total. Después saqué del ganador los componentes compartidos. Para un dueño, la lección es práctica. Explorar mucho es rápido, pero solo si usted escoge una dirección y deja de explorar. Nueve diseños vivos habrían sido nueve códigos distintos que mantener.

El sitio dice que la casa se ofrece para estadías privadas por referencia. Por eso funciona con solicitudes: el huésped envía una y el dueño responde. Quien escribe deja su nombre, su correo y las fechas, y bajo el botón una línea aclara que enviar una solicitud no confirma la reserva.

En el proyecto no existe ningún paso de pago. Un motor de reservas instantáneas necesita reglas para depósitos, cancelaciones y reservas dobles; una solicitud solo necesita que una persona diga sí o no. Para una sola casa que se alquila por referencias, lo segundo es la herramienta más sencilla y deja la decisión en manos del dueño.

Al enviar, el huésped ve el mensaje «Request received», con la promesa de una respuesta en 24 a 48 horas, y el correo de confirmación la repite. Si promete un tiempo de respuesta, dígalo en los dos lugares y escoja uno que el dueño pueda cumplir.

La página llega con una copia de las fechas bloqueadas que se renueva cada cinco minutos y, apenas se abre, el calendario le pide al servidor la lista actual. El huésped ve lo que el dueño bloqueó hace un momento, no lo que era cierto en la última renovación.

Para elegir fechas se hace clic en el día de entrada y luego en el de salida. Los días pasados y los bloqueados no se pueden marcar, y el campo de fechas es de solo lectura, así que nadie puede escribir mal una fecha.

La parte automática importa más de lo que parece. Cuando el dueño confirma una solicitud en el panel, el sitio crea el rango bloqueado por sí solo, y si el dueño se arrepiente, lo quita. Nadie tiene que actualizar un calendario en un lado y una lista de solicitudes en otro. A cambio hay una pequeña consulta extra cada vez que se abre la página, y la acepté para que nadie pida fechas que ya no están.

Cuando un huésped envía el formulario, la solicitud llega al panel del dueño, protegido con contraseña, antes de que salga cualquier correo. Si un correo falla, la solicitud sigue ahí para que el dueño la encuentre. Cada solicitud genera dos mensajes mediante Resend: un aviso al dueño y un acuse al huésped que promete respuesta en 24 a 48 horas.

Empecé con una cuenta de Gmail como remitente y el 10 de marzo la cambié por Resend, un servicio hecho para correo automático. Sea cual sea su elección, envíe el correo automático desde un servicio pensado para eso y no desde un buzón personal.

El dueño puede cambiar las fotos sin llamarme. Las páginas de inicio, residencia y contacto tienen cada una un documento editable en Sanity, y las galerías de cada espacio y las tarjetas de experiencias cercanas también se editan. Los campos de foto de las páginas y las galerías piden texto alternativo, la descripción corta que leen los lectores de pantalla y los buscadores.

Las fotos editables traen un riesgo: que alguien suba un archivo enorme. La página de inicio ya usa una foto guardada a 8192 píxeles de ancho, un archivo de casi 6 MB. El sitio reduce las imágenes al servirlas y entrega AVIF, un formato compacto, a los navegadores compatibles, así que recorrer toda la página de inicio en una pantalla de escritorio carga 21 fotos en menos de 800 KB.

El sitio también tiene un punto de entrada para webhooks, mensajes automáticos entre dos servicios. Sanity puede llamarlo después de una publicación, y así el contenido afectado puede actualizarse sin sacar una versión nueva. Si Sanity no responde, cada página usa textos y fotos de respaldo.

La vista previa importa cuando un enlace llega a un chat de WhatsApp, así que cada una de las cuatro páginas tiene su propia imagen de 1200 por 630, su título y su descripción. Los datos estructurados, un bloque de código que le dice a Google qué tipo de negocio describe una página, identifican el sitio como alquiler vacacional. Un archivo robots les pide a los buscadores que omitan las direcciones de administración y de API.

Sobre los tiempos: la lógica de solicitudes, el panel, el editor y el dominio estaban listos 22 días después de mi primer commit, el primer cambio guardado del código. El editor de fotos de las páginas llegó después, el 20 de abril. Pongo las fechas porque los dueños suelen preguntar cuánto tarda.