El problema: gestionar propiedades vacacionales es un caos operativo
Los operadores de alquileres vacacionales (Airbnb, Booking, directos) enfrentan un problema recurrente: manejar múltiples propiedades, reservas, huéspedes y calendarios desde hojas de cálculo o herramientas genéricas que no fueron diseñadas para su flujo de trabajo. Overbooking, check-ins olvidados y falta de visibilidad sobre la ocupación son los síntomas más comunes.
Un cliente nos contactó con exactamente este dolor. Tenía 3 propiedades en Perú y dependía de WhatsApp y Google Sheets para coordinar todo. Necesitaba una plataforma centralizada — pero las opciones del mercado (Guesty, Hostaway) costaban más de $100/mes por propiedad.
La solución: VR PMS — un sistema integral a medida
Diseñamos y construimos VR PMS (Vacation Rental Property Management System), una plataforma web que permite gestionar todo el ciclo operativo de alquileres vacacionales desde un solo panel.
Arquitectura técnica
El stack elegido fue:
- Frontend: React + Next.js con TypeScript
- Estilos: Tailwind CSS + shadcn/ui para componentes consistentes
- Iconos: Lucide React
- Despliegue: Vercel (edge-optimized)
La decisión de usar Next.js se basó en tres factores: SSR para SEO del sitio público, API Routes para el backend, y la capacidad de generar páginas estáticas para el marketing del producto.
Los 5 módulos que construimos
1. Dashboard — Vista de pájaro del negocio
El dashboard muestra en tiempo real:
- Propiedades activas con su estado actual
- Reservas activas del mes
- Ingresos del mes (revenue tracking)
- Tasa de ocupación con indicador visual (Low/Medium/High)
- Check-ins y Check-outs del día con hora y nombre del huésped
El diseño utiliza tarjetas métricas con iconos codificados por color. Los check-ins se muestran en verde y los check-outs en ámbar para que el operador identifique prioridades de un vistazo.
2. Schedule — Calendario tipo timeline
Este fue el módulo más desafiante técnicamente. Implementamos un calendario horizontal tipo Gantt donde:
- Cada fila es una propiedad/unidad
- Las columnas son días del mes
- Los bloques de color representan estados: Confirmado (verde), Pendiente (amarillo), Mantenimiento (gris), Limpieza (cian) y Bloqueado (rosa)
Cada bloque muestra el nombre del huésped y la duración de la estancia. El calendario se puede navegar por meses y tiene un botón "Hoy" para saltar a la fecha actual.
3. Bookings — Gestión de reservas
Una tabla interactiva que muestra todas las reservas con:
- Nombre del huésped
- Propiedad asignada
- Fechas de entrada/salida
- Estado (confirmada, pendiente, cancelada)
- Monto total
4. Properties — Catálogo de propiedades
Vista en grid de tarjetas que muestra cada propiedad con:
- Imagen de la propiedad
- Estado de disponibilidad
- Ubicación geográfica
- Tarifa por noche
5. Guests — Directorio de huéspedes
Listado limpio con nombre, email y teléfono de cada huésped, con opciones de edición rápida.
Decisiones técnicas clave
¿Por qué shadcn/ui en vez de Material UI?
Elegimos shadcn/ui porque:
- Cero dependencia de runtime — los componentes se copian al proyecto, no son un paquete externo
- 100% personalizable — podemos ajustar cada componente sin luchar contra overrides de CSS
- Basado en Radix UI — accesibilidad nativa (ARIA compliant) sin esfuerzo adicional
- Integración perfecta con Tailwind — no hay conflictos de estilos
El patrón de sidebar con estado persistente
La sidebar utiliza un diseño dark-on-light que contrasta con el contenido principal. El estado activo se indica con un fondo verde vibrante que coincide con la identidad visual del producto. El componente mantiene estado de navegación en el cliente para evitar re-renders innecesarios.
Resultados
- Tiempo de carga del dashboard: <1.5s (First Contentful Paint)
- Overbookings eliminados: El calendario visual previene conflictos de fechas
- Tiempo de gestión reducido: de ~2 horas/día (WhatsApp + Sheets) a ~20 minutos/día
Tecnologías utilizadas
| Categoría | Herramientas | |-----------|-------------| | Framework | Next.js 14, React 18, TypeScript | | Estilos | Tailwind CSS, shadcn/ui | | Iconos | Lucide React | | Calendario | Implementación custom (no librería externa) | | Deploy | Vercel |
¿Necesitas un sistema de gestión para tu negocio de alquileres? En Árkos diseñamos soluciones a medida. Contáctanos para una consulta gratuita.