Saltar al contenido
Caso · 05 / 09← Todos los trabajos

Posta

Una red de delivery en un monorepo: landing, admin de operaciones, tres apps móviles y una API.

Rol
Diseño y desarrollo full-stack
Stack
React + TanStack Router/Query, tRPC, Hono, Expo, MapLibre GL, Astro
Landing
LandingTipos de punta a punta, de la API al admin
(01) El problema

Posta coordina una red de cadetes independientes para comercios locales. Conseguía clientes con publicidad en redes y los gestionaba por WhatsApp. Ese proceso manual no escalaba. Comercios, cadetes y clientes necesitaban cada uno su app, y la operación un lugar para verlo todo.

Mi rolDiseñé y construí el monorepo de punta a punta: API, admin, landing y las tres apps de Expo.
(02) ResultadosContados en el código
6apps en un monorepo
34rutas en el admin
22routers de tRPC
(03) Arquitectura

Tres decisiones que lo definieron.

  1. 01

    Tipos de punta a punta, de la API al admin

    Por qué. El admin importa el tipo AppRouter de la API en Hono y la llama por tRPC. Los schemas de Zod viven en un paquete que usan la API y las tres apps móviles.

    El costo. Admin y API quedan acoplados en el build. Las apps móviles todavía llaman a los procedimientos por nombre y pierden parte de esa seguridad.

  2. 02

    WebSocket para lo urgente, polling alineado para el resto

    Por qué. La posición y el estado de los cadetes llegan por WebSocket y parchean el caché de TanStack Query. El resto se consulta cada múltiplos de 15 segundos. Los temporizadores coinciden y tRPC junta esas llamadas en una request.

    El costo. Dos canales de datos para tener en la cabeza. Lo que se consulta por polling puede tener hasta un minuto de atraso, a propósito.

  3. 03

    MapLibre con un estilo armado desde los design tokens

    Por qué. Mapbox cobraba por carga de mapa y pedía la clave del cliente. MapLibre con tiles de OpenFreeMap no necesita clave. El estilo se arma en código con los design tokens, así el mapa usa los colores del producto.

    El costo. Dependemos de un servicio de tiles gratuito y sin SLA. La URL es configurable, así que se puede pasar a uno pago o propio.

(04) GaleríaSeguí scrolleando →
Landing
Landing · La página pública para comercios, hecha en Astro.
Mapa en vivo
Mapa en vivo · Los cadetes en el mapa, actualizados por WebSocket, con vista de mapa de calor.
Detalle de pedido
Detalle de pedido · Un pedido en el admin, con su recorrido en el mapa.
App de clientes
App de clientes · La app de Expo donde el cliente final busca comercios y pide.
(05) Qué haría después
01Darles a las tres apps de Expo el cliente tipado de tRPC que usa el admin. Hoy un procedimiento renombrado las rompe recién en runtime.
02Sacar los casteos de tipos en las queries del admin y dejar que tRPC infiera lo que devuelve cada una.
03Sumar tests al admin. La API tiene 46 archivos de test y el admin ninguno.
Próximo proyecto · 06 / 09
Maderera Juan B. Justo →ERP, punto de venta y facturación, en uso todos los días
Caso · 05 / 09

Posta

Una red de delivery en un monorepo: landing, admin de operaciones, tres apps móviles y una API.

Rol
Diseño y desarrollo full-stack
Stack
React + TanStack Router/Query, tRPC, Hono, Expo, MapLibre GL, Astro
Posta
(01) El problema

Posta coordina una red de cadetes independientes para comercios locales. Conseguía clientes con publicidad en redes y los gestionaba por WhatsApp. Ese proceso manual no escalaba. Comercios, cadetes y clientes necesitaban cada uno su app, y la operación un lugar para verlo todo.

Mi rolDiseñé y construí el monorepo de punta a punta: API, admin, landing y las tres apps de Expo.
(02) Resultados
6apps en un monorepo
34rutas en el admin
22routers de tRPC
(03) Arquitectura

Tres decisiones que lo definieron.

01

Tipos de punta a punta, de la API al admin

Por qué. El admin importa el tipo AppRouter de la API en Hono y la llama por tRPC. Los schemas de Zod viven en un paquete que usan la API y las tres apps móviles.

El costo. Admin y API quedan acoplados en el build. Las apps móviles todavía llaman a los procedimientos por nombre y pierden parte de esa seguridad.

02

WebSocket para lo urgente, polling alineado para el resto

Por qué. La posición y el estado de los cadetes llegan por WebSocket y parchean el caché de TanStack Query. El resto se consulta cada múltiplos de 15 segundos. Los temporizadores coinciden y tRPC junta esas llamadas en una request.

El costo. Dos canales de datos para tener en la cabeza. Lo que se consulta por polling puede tener hasta un minuto de atraso, a propósito.

03

MapLibre con un estilo armado desde los design tokens

Por qué. Mapbox cobraba por carga de mapa y pedía la clave del cliente. MapLibre con tiles de OpenFreeMap no necesita clave. El estilo se arma en código con los design tokens, así el mapa usa los colores del producto.

El costo. Dependemos de un servicio de tiles gratuito y sin SLA. La URL es configurable, así que se puede pasar a uno pago o propio.

(04) Galería
Landing
Landing · La página pública para comercios, hecha en Astro.
Mapa en vivo
Mapa en vivo · Los cadetes en el mapa, actualizados por WebSocket, con vista de mapa de calor.
Detalle de pedido
Detalle de pedido · Un pedido en el admin, con su recorrido en el mapa.
App de clientes
App de clientes · La app de Expo donde el cliente final busca comercios y pide.
(05) Qué haría después
01Darles a las tres apps de Expo el cliente tipado de tRPC que usa el admin. Hoy un procedimiento renombrado las rompe recién en runtime.
02Sacar los casteos de tipos en las queries del admin y dejar que tRPC infiera lo que devuelve cada una.
03Sumar tests al admin. La API tiene 46 archivos de test y el admin ninguno.
Próximo proyectoMaderera Juan B. Justo →
Nahuel SantillánES