LeoFam
Commerce storefront and admin console
A customer-facing storefront with an admin side behind it — catalogue, cart, checkout, payment and order tracking — rebuilt on the Next.js App Router for route-level rendering control. A dated discount engine drives displayed pricing, the storefront navigates by a nested category tree, and Firebase Cloud Messaging pushes order notifications.
The problem
A hosted store template gets you selling but caps you almost immediately: you cannot shape the checkout, the discount rules do not match how the business actually prices, and the admin side is somebody else’s idea of your workflow. Worst of all, when a customer asks why they were charged what they were charged, nobody can show them.
Our approach
The storefront was rebuilt on the Next.js App Router for route-level rendering control and fast first paint, with Tailwind for layout and Framer Motion carrying the motion design. The Express and MongoDB API guards every protected route with a signed JWT, stores uploaded artwork through multer, and keeps Firebase for the one job it is good at here — pushing order notifications to a device. Discounts are records rather than fields: a percentage or an amount, aimed at a product or a category, live only between two dates.
The outcome
A storefront whose checkout, pricing and admin workflows belong to the business, plus a migration path off the original create-react-app build that shipped incrementally rather than as a rewrite.
What is inside
Next.js App Router storefront with product, cart, checkout, payment and order routes
Storefront navigation generated recursively from a nested category tree, per tenant
Discounts as dated records — percentage or amount, per product or per category
An editable homepage: hero carousel slides and the featured section are configuration
Customer dashboard alongside an admin area for catalogue, orders, users and discounts
JWT-guarded API with multer-handled uploads, and Firebase Cloud Messaging for push
Migrated from an earlier create-react-app front end, kept in-tree during the transition
Engineering notes · 4 min read
A price you cannot explain is a support ticket
Rule chain
Pricing
records what appliedIncremental
Migration
both front ends in treeFirebase
Identity
verified server-sideDiscounting is where commerce software quietly becomes unmaintainable. A category promotion, a customer tier and a voucher all apply to the same line, in an order that matters, and the result is a single number on a receipt.
Pricing here resolves through an explicit chain of rules, and the chain records which rules fired and what each one did. That is why the order price breakdown is the demo’s signature screen: it answers "why was I charged this" without anyone reading code.
Migrating without a rewrite
The storefront started as create-react-app and moved to the Next.js App Router. The move shipped route by route, with both front ends in the tree and traffic split by path, rather than as a cutover with a date attached.
That is slower and uglier for a few weeks. It also means there was never a moment where the store could not take an order, which is the only metric that mattered.
- Route-level rendering control, so product pages and the cart make different tradeoffs
- Firebase for authentication and asset storage, verified server-side with the Admin SDK
- The API kept narrow on purpose: catalogue, pricing and orders — identity is not its job
- Motion choreography as a first-class part of the design, not a decoration pass at the end
The template gets you selling. It stops you the first time the business prices something in a way the template did not anticipate.
Front end
Front end (styling)
Back end
Platform
Platforms
Web · Mobile web
Need a platform like LeoFam?
We can walk you through how this was built, what it cost to run, and what the equivalent looks like for your business.
Or email us directly at [email protected]