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ásContexto
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.
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.
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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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 / 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 / 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 / 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 / 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 / 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
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.
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.
Arquitectura
La interfaz es una aplicación React; las reglas de negocio viven en la base de datos, donde ninguna pantalla puede saltearlas.
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:
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)
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.
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
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.
Otros proyectos para conocer.
SaaS · JurídicoValverde Jurídico
Sistema SaaS de gestión jurídica para un despacho de abogados: clientes, procesos, agenda, portal del cliente y sitio institucional, del UX al back-end
Ver proyecto
SaaS · Producto propioSeu Barba
SaaS de agendamiento para barberías: marca, app y landing page de ventas, producto propio en desarrollo
Ver proyecto
Ciudadanía e InmigraciónVogel Cidadania Italiana
Landing page de captación para una asesoría de ciudadanía italiana, del UX/UI al código en React, con formulario de evaluación gratuita, API de leads y versión móvil
Ver proyecto