← All case studies

FlatPrice

Commodity Trading Mobile App React Native
FlatPrice — Know your cargo value. Instantly.

A friend of mine trades physical commodities. Oil products, mostly. He told me that at some point in every deal, no matter where in the world, everyone pulls out their calculators. How many barrels in this many metric tonnes of gasoil? What's the flat price at Brent plus 12? What's the cargo worth in Singapore dollars? How many days from Fujairah to Rotterdam?

There was no single tool that did all of that. Just calculators, spreadsheets, and mental math. So we decided to build one.

The team

Three of us. My friend brought the trading perspective. He knows what numbers come up in a deal, in what order, and what's annoying about doing it by hand. We brought in a chemical engineer who knows the product side: densities, conversion factors, which products are priced per barrel and which per tonne, and why that distinction matters. I built the app.

That split turned out to be the whole point. I couldn't have written this from a spec. The domain knowledge had to come from people who live in it.

What it does

FlatPrice iOS app, main view
Everything on one screen.
FlatPrice iOS app, tabbed skin
Tabbed skin with detailed breakdown.

You pick a product: crude oil, gasoil, diesel, jet fuel, HSFO, VLSFO, naphtha, or gasoline. Each has its own density at 15°C, and that density is what makes every conversion product-specific. A barrel is always 158.987 liters, but how many barrels fit in a metric tonne depends entirely on what you're shipping.

Enter a quantity in any unit (metric tonnes, barrels, or cubic meters) and the app converts to the other two instantly. Change the product, and everything recalculates because the density changed. All conversions go through metric tonnes as the pivot.

Then there's pricing. Commodities are almost never sold at a fixed price. It's a benchmark plus or minus a differential. The app takes both, adds them to get the flat price, calculates the cargo value in USD, and converts to whatever local currency you need. Live exchange rates, cached for 15 minutes, with a manual fallback if the API is down.

The density lock

This is a detail that came straight from the engineer. Not every cargo matches the textbook density. Off-spec loads exist. So the density starts locked to the product default, but you can unlock it and type in whatever the cargo certificate says. The app clamps the range to catch typos, but within reason, you're in control.

Voyage estimates

My friend said this always comes up in conversation: "how long does it take to get from A to B?" Not a full routing engine. Just a quick reference with nine major ports and 13 routes, showing min and max laden transit days. It's the kind of thing people used to look up or just know from experience. Now it's a dropdown.

How it works

No submit button. Everything is reactive. Change any input and all the derived values update immediately. Product, quantity, benchmark, differential, currency, density. You're adjusting numbers and watching the results shift in real time, which is how traders actually think through deals. They tweak and compare. They don't fill out forms and hit "Calculate."

I prototyped the web version with Alpine.js to get the logic right and test the UI. The real product is the mobile app. React Native with Expo, TypeScript, same dark monospace aesthetic. Traders aren't always at a desk. The app is what we're shipping.

There are also skins. Different color schemes and layouts that users can switch between to match their preferences. It sounds cosmetic, but in a tool you stare at all day, being able to adjust the look to what feels comfortable actually matters for usability.

The hard part

The math itself is simple. Multiplication, division, a handful of constants. Any developer could write the formulas. The hard part was the UI. Getting the right information on screen, in the right order, so it matches how someone actually works through a deal. Which inputs go together, what results should be visible at a glance, when to show a warning versus silently clamp a value.

That's what the three-person team was for. I could build the app, but I couldn't design the workflow without the trader and the engineer telling me what matters and what doesn't.

Stack

React Native Expo TypeScript Alpine.js ExchangeRate API JetBrains Mono

Need a domain-specific tool built for people who actually do the work?

Let's talk

Un amigo mío comercia con materias primas físicas. Productos petrolíferos, sobre todo. Me contó que en algún momento de cada operación, sin importar en qué parte del mundo, todos sacan sus calculadoras. ¿Cuántos barriles hay en tantas toneladas métricas de gasóleo? ¿Cuál es el precio plano con Brent más 12? ¿Cuánto vale el cargamento en dólares de Singapur? ¿Cuántos días de Fujairah a Róterdam?

No existía una sola herramienta que hiciera todo eso. Solo calculadoras, hojas de cálculo y cálculo mental. Así que decidimos construir una.

El equipo

Tres personas. Mi amigo aportó la perspectiva del trading. Sabe qué números aparecen en una operación, en qué orden, y qué resulta molesto de hacerlo a mano. Incorporamos a un ingeniero químico que conoce el lado del producto: densidades, factores de conversión, qué productos se cotizan por barril y cuáles por tonelada, y por qué esa distinción importa. Yo construí la aplicación.

Esa división resultó ser la clave. No podría haber escrito esto a partir de una especificación. El conocimiento del sector tenía que venir de personas que viven en él.

Qué hace

Aplicación FlatPrice para iOS, vista principal
Todo en una sola pantalla.
Aplicación FlatPrice para iOS, aspecto con pestañas
Aspecto con pestañas y desglose detallado.

Eliges un producto: crudo, gasóleo, diésel, combustible de aviación, HSFO, VLSFO, nafta o gasolina. Cada uno tiene su propia densidad a 15°C, y esa densidad es lo que hace que cada conversión sea específica del producto. Un barril siempre son 158,987 litros, pero cuántos barriles caben en una tonelada métrica depende completamente de lo que estés transportando.

Introduces una cantidad en cualquier unidad (toneladas métricas, barriles o metros cúbicos) y la aplicación convierte a las otras dos instantáneamente. Cambia el producto y todo se recalcula porque la densidad cambió. Todas las conversiones pasan por toneladas métricas como pivote.

Luego está la fijación de precios. Las materias primas casi nunca se venden a un precio fijo. Es un índice de referencia más o menos un diferencial. La aplicación toma ambos, los suma para obtener el precio plano, calcula el valor del cargamento en USD y lo convierte a la moneda local que necesites. Tipos de cambio en tiempo real, cacheados durante 15 minutos, con un respaldo manual si la API no está disponible.

El bloqueo de densidad

Este es un detalle que vino directamente del ingeniero. No todos los cargamentos coinciden con la densidad de los libros de texto. Existen cargas fuera de especificación. Así que la densidad empieza bloqueada con el valor predeterminado del producto, pero puedes desbloquearla y escribir lo que diga el certificado de carga. La aplicación limita el rango para detectar erratas, pero dentro de lo razonable, tú tienes el control.

Estimaciones de viaje

Mi amigo dijo que esto siempre sale en las conversaciones: «¿cuánto se tarda en ir de A a B?» No es un motor de rutas completo. Solo una referencia rápida con nueve puertos principales y 13 rutas, mostrando los días mínimos y máximos de tránsito con carga. Es el tipo de información que la gente solía buscar o simplemente sabía por experiencia. Ahora es un desplegable.

Cómo funciona

Sin botón de enviar. Todo es reactivo. Cambia cualquier entrada y todos los valores derivados se actualizan inmediatamente. Producto, cantidad, índice de referencia, diferencial, moneda, densidad. Vas ajustando números y viendo cómo los resultados cambian en tiempo real, que es exactamente cómo los operadores razonan sus operaciones. Ajustan y comparan. No rellenan formularios y pulsan «Calcular».

Prototipé la versión web con Alpine.js para pulir la lógica y probar la interfaz. El producto real es la aplicación móvil. React Native con Expo, TypeScript, la misma estética oscura y monoespaciada. Los operadores no siempre están en un escritorio. La app es lo que estamos lanzando.

También hay skins. Diferentes esquemas de color y disposiciones que los usuarios pueden alternar según sus preferencias. Suena cosmético, pero en una herramienta que miras todo el día, poder ajustar el aspecto a lo que te resulte cómodo realmente importa para la usabilidad.

La parte difícil

Las matemáticas en sí son sencillas. Multiplicación, división, un puñado de constantes. Cualquier desarrollador podría escribir las fórmulas. Lo difícil fue la interfaz. Conseguir que la información correcta apareciera en pantalla, en el orden adecuado, para que coincidiera con la forma en que alguien trabaja realmente una operación. Qué entradas van juntas, qué resultados deben ser visibles de un vistazo, cuándo mostrar un aviso frente a limitar silenciosamente un valor.

Para eso estaba el equipo de tres personas. Yo podía construir la aplicación, pero no podía diseñar el flujo de trabajo sin que el operador y el ingeniero me dijeran qué importa y qué no.

Stack

React Native Expo TypeScript Alpine.js ExchangeRate API JetBrains Mono

¿Necesitas una herramienta específica de tu sector, creada para quienes realmente hacen el trabajo?

Hablemos