La expansión de FuelBuddy en los Emiratos Árabes Unidos necesitaba una aplicación de franquicias dedicada, adaptada a los requisitos operativos regionales. Construí la Aplicación de Franquicias de Dubái desde cero, tanto en el frontend como en las APIs de datos.
Lo que construí
- Frontend desde cero: Construí el sistema de componentes y la estructura de la aplicación desde el principio, entregando una interfaz limpia y responsive para las operaciones de franquicia.
- APIs de Hasura GraphQL: Construí la capa de datos del backend sobre el motor GraphQL de Hasura, definiendo las operaciones CRUD y los modelos de datos que necesitaba la aplicación.
- Mapas, programación y exportaciones: Integré mapas en vivo, una vista de programación tipo calendario/Gantt, y exportación a hoja de cálculo/PDF para los informes de franquicia.
- Autenticación y seguridad: Configuré la autenticación respaldada por Firebase, con control de acceso basado en roles aplicado mediante los propios claims JWT de Hasura.
Por qué importó
Entregar una plataforma dedicada les dio a los operadores de franquicia de FuelBuddy en los Emiratos Árabes Unidos una herramienta construida específicamente para las operaciones regionales, sobre un stack pensado para datos de mapa en tiempo real e informes pesados.
La capa de datos
Esta app obtiene datos mediante graphql-request contra un SDK tipado generado por codegen, con stores de Pinia guardando el estado del cliente, sin TanStack Query en ningún punto del árbol de dependencias. La autenticación funciona sobre Firebase, y el acceso basado en roles proviene de los propios claims JWT personalizados de Hasura (x-hasura-default-role, x-hasura-user-id) en lugar de un sistema de permisos construido por separado.
Más que un generador de formularios
Esta es una app genuinamente cargada de funcionalidades para lo que podría haber sido una simple herramienta CRUD: Mapbox GL junto con mapbox-gl-draw para dibujar y editar zonas de franquicia directamente sobre el mapa, FullCalendar combinado con vue-ganttastic para la programación al estilo Gantt, Chart.js para los paneles de informes, y una canalización de exportación completa (xlsx, papaparse, jszip, html2pdf.js, dom-to-image, html-to-image) para que los informes de franquicia salgan de la app como hojas de cálculo, PDFs o imágenes según lo que necesite el operador, no en un único formato fijo.
Codegen, no consultas escritas a mano
Las operaciones de GraphQL se generan en tiempo de compilación mediante vite-plugin-graphql-codegen contra codegen.yml, produciendo un cliente src/sdk.ts tipado a partir del esquema de Hasura. Cada consulta y mutación está tipada contra el esquema en vivo, en lugar de strings escritos a mano que se desalinean en silencio cuando cambia el backend.
Enfoque de las pruebas
Playwright cubre dos flujos de principio a fin: el login y la gestión de pedidos, la puerta detrás de la cual se sitúa cualquier otra pantalla y la transacción central para la que existe la app. Todo lo que viene después de esos dos flujos (programación, exportaciones, informes) es superficie más nueva que las pruebas, no un descuido.
Stack
Vue 3, Vite, Pinia, graphql-request con GraphQL Code Generator contra Hasura, Firebase para la autenticación, Mapbox GL con mapbox-gl-draw, FullCalendar con vue-ganttastic, Chart.js para los informes, Playwright para las pruebas.