A expansão da FuelBuddy nos Emirados Árabes Unidos exigia uma aplicação de franquia dedicada, ajustada aos requisitos operacionais regionais. Construí o Aplicativo de Franquia de Dubai do zero, tanto no frontend quanto nas APIs de dados.
O que construí
- Frontend greenfield: Construí o sistema de componentes e a estrutura da aplicação do zero, entregando uma interface limpa e responsiva para as operações de franquia.
- APIs GraphQL na Hasura: Construí a camada de dados de backend sobre o motor GraphQL da Hasura, definindo as operações CRUD e os modelos de dados de que a aplicação precisava.
- Mapas, agendamento e exportações: Integrei mapas ao vivo, uma visão de agendamento em calendário/Gantt e exportação em planilha/PDF para os relatórios de franquia.
- Autenticação e segurança: Configurei a autenticação apoiada em Firebase, com controle de acesso baseado em papéis aplicado através das próprias claims JWT da Hasura.
Por que importou
Entregar uma plataforma dedicada deu aos operadores de franquia da FuelBuddy nos Emirados Árabes Unidos uma ferramenta construída sob medida para as operações regionais, sobre uma stack pensada para dados de mapa em tempo real e relatórios pesados.
A Camada de Dados
Este app busca dados via graphql-request contra um SDK tipado gerado por codegen, com stores do Pinia guardando o estado do cliente, sem nenhum TanStack Query em toda a árvore de dependências. A autenticação roda sobre Firebase, e o controle de acesso baseado em papéis vem das próprias claims JWT personalizadas da Hasura (x-hasura-default-role, x-hasura-user-id), em vez de um sistema de permissões construído à parte.
Mais Que um Construtor de Formulários
Este é um app genuinamente rico em funcionalidades para o que poderia ter sido uma ferramenta CRUD simples: Mapbox GL mais mapbox-gl-draw para desenhar e editar zonas de franquia diretamente no mapa, FullCalendar combinado com vue-ganttastic para agendamento em estilo Gantt, Chart.js para dashboards de relatórios, e um pipeline completo de exportação (xlsx, papaparse, jszip, html2pdf.js, dom-to-image, html-to-image) para que os relatórios de franquia saiam do app como planilhas, PDFs ou imagens, dependendo do que o operador precisa, não em um formato fixo único.
Codegen, Não Queries Escritas à Mão
As operações GraphQL são geradas em tempo de build via vite-plugin-graphql-codegen contra o codegen.yml, produzindo um cliente tipado src/sdk.ts a partir do schema da Hasura. Toda query e mutation é tipada contra o schema ao vivo, em vez de strings escritas à mão que se desalinham silenciosamente quando o backend muda.
Foco dos Testes
O Playwright cobre dois fluxos de ponta a ponta: login e gestão de pedidos, o portão pelo qual toda outra tela passa e a transação principal que o app existe para tratar. Tudo o que vem depois desses dois (agendamento, exportações, relatórios) é uma superfície mais nova do que os testes, não um descuido.
Stack
Vue 3, Vite, Pinia, graphql-request com GraphQL Code Generator contra a Hasura, Firebase para autenticação, Mapbox GL com mapbox-gl-draw, FullCalendar com vue-ganttastic, Chart.js para relatórios, Playwright para testes.