MarketplaceViajes y hostelería

App de reservas

Dale a un hotel pequeño una web que vende la estancia y coge la reserva. Los huéspedes eligen fechas, ven qué habitaciones están libres, reservan en tres pasos y pagan en el alojamiento. El equipo lleva la casa desde un solo back office: reservas, calendario, habitaciones, huéspedes y mensajes, con sincronización de calendario para Booking.com.

Conseguir esta app
  • Incluida en los planes Starter y Pro
  • Una copia exacta de toda la aplicación
  • Frontend, backend y datos incluidos
  • Tuya para quedártela y cambiarla en tu propio repositorio
  • Multiidioma, para el país que necesites
Portada con barra de reserva sobre el mar al atardecer
Portada
páginas públicas
10
secciones del back office
8
workflows de backend
23
tablas de datos
10
bucket de imágenes para las fotos de las habitaciones
1
Pensada para
  • Casas de huéspedes, B&B y hoteles boutique, desde unas pocas habitaciones hasta un alojamiento pequeño
  • Propietarios que quieren más reservas directas
  • Agencias que la adaptan a la marca de un cliente de hostelería
Todas las pantallas

Míralo como lo ven huéspedes y equipo

Una web que vende la estancia

  • Portada a pantalla completa con una barra de reserva para fechas, huéspedes y habitación
  • Un carrusel de habitaciones con foto, precio, cama, plazas y tamaño
  • Sección con la historia, banda de servicios y galería de fotos
  • Sección de visita con dirección y enlace al mapa, y una página de contacto con formulario
Portada con barra de reserva sobre el mar al atardecer

1 / 8Portada con barra de reserva sobre el mar al atardecer

Cómo avanza una reserva

De las fechas retenidas al check-out

Una reserva retiene sus fechas al momento. Si se cancela, las libera, y el huésped no puede recuperarla.

  1. Pendiente
  2. Confirmada
  3. Check-in hecho
  4. Check-out hecho
Página de confirmación con la referencia de la reserva
Qué recibes

Toda la aplicación, tal cual

Web pública

  • Inicio
  • Habitaciones
  • Página de habitación
  • Reserva
  • Confirmación
  • Contacto
  • Iniciar sesión
  • Crear cuenta
  • Contraseña olvidada
  • My bookings

Back office

  • Panel
  • Reservas
  • Calendario
  • Habitaciones
  • Huéspedes
  • Mensajes
  • Channel sync
  • Ajustes

Backend

  • 23 workflows para el acceso, las habitaciones, la disponibilidad, las reservas, los huéspedes, los mensajes, la sincronización de calendarios y los ajustes
  • 10 tablas: usuarios, habitaciones, imágenes de habitaciones, reservas, bloqueos de disponibilidad, feeds de calendario, registros de sincronización, mensajes, ajustes, tokens de enlaces de acceso
  • 1 bucket de imágenes para las fotos de las habitaciones

Tecnología

  • React 18, Tailwind CSS 4, componentes de estilo shadcn, iconos Lucide
  • Contraseñas guardadas como hashes; el acceso usa tokens firmados
  • Las páginas del back office y sus datos requieren una cuenta de equipo
  • Correos de acceso enviados con Resend
  • El intercambio de calendarios usa el formato estándar iCal
En el back office

Cámbialo sin tocar código

  • Nombre del alojamiento, dirección, teléfono, correo y horas de check-in y check-out
  • Moneda, tasa turística y política de cancelación
  • Cada habitación y sus fotos
En el código

Un retoque rápido para un cambio de marca total

  • El titular de la portada, la historia, la banda de servicios y las citas de huéspedes
  • La línea «Lagos · Algarve · since 1998» y el título de la sección de visita
  • Los textos de contacto y de confirmación
  • La línea del pie de página y el título de la web
  • Las fotos de la web
Puesta en marcha

Ocho pasos hasta tu propia web de reservas

Vas a necesitar

  • Una cuenta de Ubex, donde se ejecutan los workflows y las tablas de la app
  • Una cuenta de Resend con un dominio de envío verificado, para los correos con el enlace de acceso
  • Acceso a la extranet de Booking.com, si quieres sincronizar calendarios
  1. Añade los secretos que usan los workflows: JWT_SECRET y, para los correos de acceso, RESEND_API_KEY y EMAIL_FROM. APP_URL es opcional y fija la dirección del enlace del correo.
  2. Verifica un dominio de envío en Resend. Sin él la app sigue funcionando con contraseñas.
  3. Pon la dirección de la app en los orígenes permitidos de los workflows. Si las direcciones de los workflows cambian al copiar el proyecto, actualízalas en el archivo de API de la app.
  4. Crea el primer propietario: registra una cuenta y cambia su rol a admin en la tabla Users.
  5. Elimina los usuarios, habitaciones y reservas de demostración.
  6. Introduce los datos del alojamiento en Ajustes y añade sus habitaciones y fotos en el back office.
  7. Para cada habitación, conecta los calendarios en la extranet de Booking.com desde la página Channel sync.
  8. Publica la app en un subdominio o un dominio propio.
Conviene saberlo

Lo que no hace

Mejor saberlo ahora que después. Cualquiera de estas cosas puedes añadirla tú: el código es tuyo para cambiarlo.

  • Sin pago onlineSin captura de tarjeta, depósitos, reembolsos ni preautorizaciones. Los huéspedes pagan en el alojamiento.
  • Sin correos de reservaNo se envían confirmaciones, recordatorios ni avisos de cancelación. El único correo es el enlace de acceso de un solo uso.
  • Sin avisos al equipoLas reservas y los mensajes nuevos esperan en el back office. Los mensajes no tienen estado de leído ni pantalla de respuesta: el equipo responde desde su propio correo.
  • No es un channel managerLa conexión con Booking.com solo intercambia fechas, no tarifas, número de habitaciones, nombres de huéspedes ni detalles de la reserva, y no funciona en tiempo real.
  • La sincronización se lanza a manoLos calendarios se sincronizan cuando el equipo pulsa Sync. Para que vaya con un temporizador, añade un schedule al workflow Channel Sync Clock.
  • Un precio por habitaciónSin precios de temporada, planes de tarifas, estancias mínimas, descuentos ni códigos promocionales. La tasa turística es el único extra.
  • Los huéspedes no pueden cambiar una reservaLa cancelan y reservan de nuevo.
  • La política de cancelación es solo textoSe muestra a los huéspedes. No se calculan ni se cobran penalizaciones.
  • Las reservas pendientes no caducanEl equipo las confirma o las cancela. Cada huésped puede tener hasta 3 reservas pendientes.
  • Uno de cada cosaUn alojamiento y una moneda por app.
  • Sin reseñas ni valoracionesLas citas de la portada son texto de ejemplo en el código.
  • Pocas pantallas de cuentaNo hay pantalla para cambiar la contraseña, ya que «Contraseña olvidada» envía un enlace de acceso. Tampoco para cambiar el rol de alguien del equipo o eliminar su cuenta.
  • Borra habitaciones con cuidadoBorrar una habitación no comprueba si tiene reservas, así que oculta las que las tengan. Las fotos de las habitaciones no se pueden reordenar arrastrándolas.
  • Back office para ordenador y tabletaNo está pensado para móviles. La parte del huésped sí.

Todo lo que aparece en estas pantallas es inventado: Casa Aurora, su dirección, teléfonos y correos, sus huéspedes, equipo, reservas, cifras de ingresos y citas. Las fotos son provisionales y proceden de Unsplash. No forman parte de la app, así que sustitúyelas por las tuyas.

Recibe reservas en tu propia web

Consigue una copia exacta, ponle tu nombre y hazla tuya.