04 · Case study

AJ Esportes

End-to-end sports gear store: catalogue, live shipping quotes, Mercado Pago checkout, and an admin panel where the owner runs products, categories and metrics.

  • TypeScript
  • Supabase
  • React
  • Payment Gateway

Selling sports gear online is a whole flow, not a shop window. The customer has to find the product, see the real shipping cost for their postcode, pay, and end up with an order that actually exists on the other side. Any missing piece turns into a manual conversation: someone works out the freight by hand, someone confirms the payment by hand, someone writes the order down somewhere. It works for ten orders a week and falls apart above that.

And there is the other side of the counter. The catalogue changes all the time — new lines, seasonal items, prices that move. If adding a product means touching the database or asking the developer, the store runs at the speed of whoever has the credentials, and the shelf ends up out of date.

The obvious path
  • A flat shipping table: a fixed price per region, or free above a certain amount.
  • Mark the order as paid when the customer comes back from checkout.
  • Edit the database directly, or ask the developer whenever something new comes in.
What I did
  • A live quote from SuperFrete, calculated from the cart and the postcode. Weight and distance are what freight actually costs, so a flat table either eats the margin on the heavy orders or scares the customer off on the cheap ones.
  • Only confirm it when the Mercado Pago webhook says so. The redirect tells you the customer came back, not that the money arrived — they can close the tab on a paid order or return on an abandoned one, and only Mercado Pago knows which.
  • An admin panel with full CRUD for products and categories, plus a dashboard of metrics. The person who knows the stock is the shop owner, not me, and a catalogue that needs a deploy to change is a catalogue that stops being updated.

The store runs end to end without anyone in the middle: the customer picks the product, sees the freight calculated for their own postcode, pays, and the order is only created once the payment is confirmed at the source. On the inside, the owner adds products, opens categories and reads the numbers in the dashboard without asking anyone for anything — which is the difference between a site that was delivered and a store that is being run.