Catálogo navegable por días recomendados
Excursiones agrupadas por días sugeridos de estadía, con filtros y páginas dedicadas para cada item.
Turismo · Tour operador en San Pedro de Atacama · Desarrollo Web
San Pedro de Atacama
Ecommerce multilingüe para que TurismoChileTours venda directamente excursiones y programas en San Pedro de Atacama, con tres pasarelas de pago, conversión automática CLP↔USD y un panel administrativo completo para gestionar catálogo, reservas y traducciones a cuatro idiomas.
Next.js 15React 19TypeScriptTailwind v4Drizzle ORMTurso (libSQL)TanStack QueryTanStack Tablenext-intlTransbank/WebpayPayPalFlowCloudinaryReact PDFRechartsZustandResendVercel
Cliente
TurismoChileTours
Duración
≈2 meses de desarrollo (octubre–diciembre 2024). Coordinación 100% remota.
En producción
Diciembre 2024 — en producción desde el lanzamiento, sin soporte continuo posterior.
El problema
Tras consolidar el sitio corporativo, TurismoChileTours quería sumar un canal de venta online directo. La operación seguía (y sigue) ocurriendo mayoritariamente por WhatsApp, lo que funciona con clientes habituales pero deja afuera al turista internacional que prefiere reservar y pagar antes de aterrizar, con su tarjeta y en su moneda.
El catálogo combinaba excursiones individuales y programas multi-día, agrupados por zonas y subzonas, con fotos pesadas y descripciones extensas en cuatro idiomas. Manejar ese contenido a mano o desde el código ya no era viable.
El cliente necesitaba operar la plataforma sin tocar código: dar de alta excursiones, gestionar reservas, escribir entradas de blog y ver estadísticas básicas. Eso obligaba a construir un panel administrativo completo, no solo una vitrina pública.
La solución
Una tienda online donde el turista navega excursiones por zona y subzona, las agrega al carrito, completa el checkout y paga en CLP o USD —con conversión automática vía OpenExchangeRates— usando una de tres pasarelas: Webpay/Transbank, PayPal o Flow, según prefiera. Tras el pago se emite un voucher PDF y se notifica por correo, manteniendo el branding del sitio.
Un panel administrativo separado gestiona todo el catálogo (zonas, subzonas, excursiones, programas), el blog, las reservas y las monedas, con tablas filtrables, dashboards y autenticación propia. Cada entidad tiene su tabla de traducciones, así el cliente edita el contenido en los cuatro idiomas desde el mismo lugar.
La stack completa se eligió pensando en costo operacional bajo: Vercel para hosting, Turso (libSQL) para la base de datos y Cloudinary para imágenes, manteniendo costos fijos cercanos a cero hasta tener tracción.
En números
3
pasarelas de pago integradas
Webpay, PayPal y Flow.
4
idiomas con traducción a nivel DB
Español, inglés, francés y portugués brasilero.
17
excursiones publicadas
Cifra de catálogo actual.
2
monedas con conversión automática
CLP y USD vía OpenExchangeRates.
Arquitectura
Aplicación Next.js 15 (App Router, Turbopack) con React 19, desplegada en Vercel. Persistencia en Turso (libSQL distribuido) accedida con Drizzle ORM; el esquema separa cada entidad de sus traducciones para soportar i18n a nivel de contenido (zona/subzona/excursión/programa/blog × 4 idiomas). Tres integraciones de pago — Transbank/Webpay, PayPal y Flow — abstraídas en Server Actions, cada una con su flujo de create/confirm y manejo idempotente del estado de la reserva. Imágenes en Cloudinary, vouchers generados con @react-pdf/renderer, correos transaccionales con Resend, y conversión de divisas vía OpenExchangeRates. Panel admin protegido con auth custom basado en JWT (jose), UI sobre TanStack Query + TanStack Table y dashboards en Recharts. Estado del carrito en Zustand.
Decisiones técnicas
Next.js 15 + React 19
App Router con Server Actions cubre todo el flujo transaccional (crear reserva, iniciar pago, confirmar) sin levantar un backend aparte. Turbopack acorta los ciclos de iteración en local.
Drizzle ORM + Turso (libSQL)
Decisión costo-primero: Turso ofrece SQLite distribuido con free tier muy generoso, suficiente para la carga esperada. Drizzle tipa el schema en TypeScript y genera queries de bajo overhead. También fue una apuesta por probar la combinación en producción.
Transbank/Webpay + PayPal + Flow
Tres pasarelas elegidas por el cliente: Webpay cubre tarjetas chilenas, PayPal capta al turista internacional y Flow agrega métodos locales adicionales. Reducir la fricción del pago era prioridad.
next-intl + traducciones a nivel DB
Los textos de UI viven en next-intl, pero el contenido del catálogo (nombres, descripciones, itinerarios) vive en tablas dedicadas por idioma. Así el admin edita las cuatro versiones sin tocar archivos de mensajes.
TanStack Query + Table
El panel admin tiene mucho CRUD con filtros, paginación y mutaciones. Query maneja caché y estado de servidor sin boilerplate; Table cubre las grillas grandes (excursiones, reservas, blog).
Cloudinary
Las excursiones tienen galerías pesadas. Cloudinary entrega transformaciones (formato, tamaño, calidad) on-the-fly sin procesar imágenes en el deploy.
@react-pdf/renderer
Los vouchers se generan como PDF desde el mismo runtime, sin servicios externos, manteniendo el branding del sitio en el comprobante.
Jose (JWT) + middleware
Auth admin propio y simple — sin terceros, sin costos extra, suficiente para un panel de un solo equipo.
Funcionalidades
Panel administrativo completo
CRUD de zonas, subzonas, excursiones, programas, blog, monedas y reservas, con tablas, filtros, dashboards y autenticación propia.
Checkout en CLP o USD
Conversión automática de divisas vía OpenExchangeRates; el turista elige moneda y método de pago.
Tres pasarelas de pago
Transbank/Webpay (tarjetas chilenas), PayPal (internacional) y Flow (métodos locales adicionales), con manejo idempotente del estado de la reserva.
Contenido multilingüe a nivel DB
Cada entidad del catálogo tiene su tabla de traducciones (ES/EN/FR/PT-BR) editable desde el panel.
Vouchers PDF y notificaciones
Generación de comprobantes PDF con branding propio y emails transaccionales vía Resend.
Línea de tiempo
Octubre 2024
Kickoff
Definición de scope: catálogo jerárquico, pagos múltiples, panel admin y soporte multilingüe a nivel de datos.
Oct – Dic 2024
Desarrollo
Modelado del schema con traducciones, panel admin, integración de las tres pasarelas, checkout, vouchers PDF y conversión de divisas.
Diciembre 2024
Lanzamiento
Salida a producción en toursanpedroatacama.com, desplegado en Vercel + Turso.
Hoy
En producción
Plataforma operativa con catálogo en crecimiento; venta directa activa.
¿Tienes un proyecto similar?
Construyo sistemas a medida de extremo a extremo. Conversemos.