Volver al portafolio
SaaS · Gestión

Minas Gás

Sistema de gestión para una distribuidora de gas: pedidos, stock y envases, entregas, caja y finanzas en una sola aplicación web, con app para los conductores

Mi rol
Desarrollador Full Stack · Diseñador UX/UI
Minas GásMinas Gás
01

Contexto

Minas Gás es un sistema creado para la rutina de una distribuidora de gas. Al acompañar de cerca a la empresa, quedó claro que el problema iba mucho más allá de registrar ventas: había que organizar los pedidos, controlar el stock y los envases, seguir las entregas, cerrar la caja y saber quién debe. Diseñé y desarrollé la aplicación de punta a punta, de la interfaz a la base de datos.

Cliente
Minas Gás
Categoría
SaaS · Gestión
Roles
Desarrollador Full Stack, Diseñador UX/UI
Stack
React, TypeScript, Vite, Supabase, PostgreSQL, Vitest, Vercel
02

Desafío

La operación dependía de cuadernos, planillas y memoria: el pedido llegaba por teléfono, la garrafa salía sin registro, el fiado se anotaba aparte y la caja solo cerraba al final del día, cuando cerraba. Además de reunir todo en un solo lugar, el sistema tenía que respetar quién puede hacer qué. El conductor no debe ver las finanzas, el vendedor no debe ver el precio de costo, y esas reglas no pueden depender solo de esconder un botón en la pantalla.

03

El sistema, módulo por módulo

Doce módulos con la misma estructura: menú lateral fijo en verde petróleo, los números del día arriba de cada pantalla, tablas con estados de colores y un único botón naranja para la acción principal.

  1. 01 / 15

    Acceso por perfil

    La pantalla de entrada ya dice para qué está el sistema (“Tu operación, bajo control.”) y cada persona entra con su propio usuario. Lo que ve después depende del perfil: administrador, vendedor o conductor.

  2. 02 / 15

    Visión general

    La central de operación abre con los números del día en tarjetas: ventas, facturación, ticket promedio, pedidos abiertos, cuentas por cobrar, caja actual y stock crítico. Debajo, los productos más vendidos y la actividad reciente, con el estado de cada pedido.

  3. 03 / 15

    Nueva venta

    El vendedor busca al cliente (o registra uno nuevo), confirma la dirección de entrega, agrega los productos y elige la forma de pago: Pix, efectivo, tarjeta o fiado. El resumen con el total queda fijo al costado hasta la confirmación.

  4. 04 / 15

    Pedido confirmado

    La confirmación muestra el número de pedido, el cliente, la dirección, los ítems y el total, y lleva directo a la preparación. Una clave de idempotencia impide que un doble clic cree el mismo pedido dos veces.

  5. 05 / 15

    Preparación

    Antes de liberarlo al conductor, el equipo revisa los ítems y el precinto y el envase de cada garrafa. Solo con el checklist completo el pedido sigue a la entrega.

  6. 06 / 15

    Gestión de pedidos

    Todos los pedidos en una lista con búsqueda y filtros por período y estado (confirmado, en preparación, entregado), con cliente, ítems, total y forma de pago en cada fila.

  7. 07 / 15

    Agenda

    Entregas programadas para el día, con horario, cliente, barrio, conductor y confirmación, y los números de hoy, confirmadas y por confirmar.

  8. 08 / 15

    Panel de entregas

    El seguimiento de la calle: lo que está en cola, en ruta y concluido, con el flujo de cada entrega (pedido confirmado, en preparación, en ruta, entregado) y las incidencias.

  9. 09 / 15

    Clientes

    La base de clientes con teléfono, barrio, última compra, saldo pendiente y estado, para que el vendedor sepa al instante quién debe antes de vender fiado.

  10. 10 / 15

    Productos

    El catálogo con código, categoría, precio de venta y stock mínimo de cada ítem. El precio de costo existe en la base de datos, pero solo el administrador puede verlo.

  11. 11 / 15

    Stock y envases

    La posición de cada producto con llenos, vacíos y envases, y la alerta de stock crítico en rojo cuando un ítem baja del mínimo. En una distribuidora de gas, el envase es patrimonio y la cuenta tiene que cerrar.

  12. 12 / 15

    Caja

    Apertura, movimientos y cierre de caja por operador: saldo actual, entradas, salidas y diferencia, con cada venta y gasto registrado en el momento.

  13. 13 / 15

    Cuentas por cobrar

    El fiado organizado: títulos abiertos con vencimiento y situación (pendiente, atrasado, pagado) y el registro del cobro, que entra en la caja.

  14. 14 / 15

    Compras y gastos

    Compras de gas y de agua, combustible, energía y mantenimiento, con proveedor, vencimiento y estado, para cerrar el mes sabiendo qué entró y qué salió.

  15. 15 / 15

    Usuarios y permisos

    El equipo con perfil y último acceso, y la matriz de permisos que muestra qué puede hacer cada perfil en ventas, datos financieros, precio de costo y entregas.

04

La app del conductor

El conductor usa el sistema en el celular, con una interfaz propia: las entregas del día con la próxima destacada, el detalle con dirección, ítems y valor, un checklist para confirmar la entrega y el cobro, y el registro de incidencias cuando algo sale de lo planeado.

Login, entregas del día, detalle de la entrega y cobro registrado
05

Arquitectura

La interfaz es una aplicación React; las reglas de negocio viven en la base de datos, donde ninguna pantalla puede saltearlas.

Front-end
React 19, TypeScript y Vite, con React Router y CSS propio
Back-end
Supabase con PostgreSQL 17; reglas de negocio en funciones de la base, separadas entre los schemas api y private
Calidad
Tests automatizados con Vitest y Testing Library, además de lint y build en cada revisión
Entrega
Versionado con Git y GitHub y deploy de la aplicación web en Vercel
06

Seguridad e integridad de los datos

La principal preocupación fue garantizar que los permisos valieran en la base de datos, y no solo en la interfaz. Estos mecanismos se implementaron y verificaron en una auditoría técnica:

Row Level Security
Políticas de RLS en las tablas: cada perfil solo lee y escribe lo que le corresponde
Perfiles
Permisos separados para administrador, vendedor y conductor
Datos sensibles
Información financiera, como el precio de costo, restringida a quien tiene permiso
Funciones expuestas
Cada función de la base valida el permiso de quien la llama antes de ejecutarse
Idempotencia
Claves que impiden pedidos y registros duplicados
Auditoría
Historial de los cambios hechos en los pedidos
07

Tests y calidad

En la última revisión técnica, el 29/09/2026, toda la batería de tests pasó, junto con las validaciones de lint y build. El sistema sigue evolucionando, con mejoras de interfaz, nuevas funcionalidades y verificaciones de seguridad e infraestructura.

358

tests automatizados ejecutados con éxito

12

módulos integrados en una sola aplicación

3

perfiles de acceso con reglas en la base (RLS)

08

Design system

Una biblioteca de componentes para mantener la coherencia entre los módulos: botones de acción principal, secundaria e inhabilitada, estados (confirmado, en curso, atención) y los estándares de espaciado, bordes y jerarquía de texto.

Componentes y estados

Sistema Visual

Una apariencia profesional con colores ligados al sector: el verde petróleo da estructura y confianza al menú y a las áreas principales, el verde operativo marca lo que está bien, y el naranja aparece solo donde hay acción o alerta, para que el equipo vea de un vistazo qué necesita atención.

Paleta

Verde Petróleo

#123D35

Menú lateral, encabezado de la app del conductor y áreas de marca

Verde Operativo

#16856B

Estados confirmados, valores cobrados y destacados positivos

Naranja

#F0782B

Acción principal, ítem activo del menú y alertas

Gris Claro

#F5F7F8

Fondo de las pantallas y áreas de trabajo

Grafito

#17212B

Títulos, textos y tablas

Tipografía

Inter

400 / 500 / 700

Fuente única: títulos de 28 a 32 px, secciones de 16 a 18 px y cuerpo de 12 a 14 px

09

Aprendizaje

Desarrollar software va mucho más allá de escribir código. Fue necesario entender los procesos de la distribuidora, modelar los datos, definir reglas de negocio y permisos, tratar las excepciones del día a día y construir pantallas que tengan sentido para quien atiende el teléfono y para quien está en la calle con la garrafa. Es el proyecto que reúne todo en lo que vengo profundizando como desarrollador: front-end, back-end, bases de datos, arquitectura, seguridad y tests.