- Discovery to public launch
- ~13 months
- BigCommerce storefronts, one app
- 7+
- Configurable product types
- 6
- Medals in the public library
- 295
At a glance
| Project | Rack Builder |
|---|---|
| Client | An Australian medal-mounting and framing retailer |
| Industry | Military and service medals, mounting and framing (e-commerce) |
| Platform | Standalone web app (React + FastAPI) that pulls catalogue and pricing data from BigCommerce and sends orders to BigCommerce at checkout, plus a WordPress marketing site |
| Timeline | About 13 months, from discovery in July 2025 to public launch in mid-August 2026. Phase 2 is now in progress |
| Delivery | ~1,000 commits across two codebases: a React frontend (~60k lines of TypeScript) and a Python/FastAPI backend (~38k lines, 39 database tables) |
| Our role | Product design, UX/UI, frontend, backend, BigCommerce integration, WordPress site, cloud infrastructure, CI/CD |
The challenge
Our client mounts medals for veterans, serving personnel and their families. Every order is personal and every one has rules attached. Medals must sit in the official order of wear, which differs by country and jurisdiction. Clasps and ribbon devices go in exact positions. Full-size medals, miniatures and ribbon bars each follow their own mounting conventions. Many families also want the finished set framed, boxed or engraved.
Before Rack Builder, getting a correct rack meant a conversation: phone calls, emails and back-and-forth with staff to agree what goes where, then a manual quote. Customers couldn't see what they were buying, and staff re-keyed every specification by hand for the workshop.
The client wanted:
- a visual builder where anyone can assemble their medals and see the finished rack before paying;
- automatic enforcement of order-of-wear rules, so a rack is right the first time;
- real BigCommerce pricing, including wholesale and customer-group pricing, deals and tax;
- one app serving every storefront in their BigCommerce network;
- a workshop-ready specification attached to every order, so nothing is re-typed;
- an admin panel for the team to curate products, run promotions and follow up on unfinished racks.
What we built
Rack Builder is a standalone web application with two sides: a customer-facing configurator and a staff admin panel. It is not a BigCommerce theme or plugin: it has its own frontend, backend and database, and uses BigCommerce only as the source of product and pricing data and as the destination for checkout and orders. Customers arrive from any storefront through a "Build a Rack" link, design their rack, and check out through BigCommerce.
Six products, one builder
Customers choose what they're building:
- Full Size Medals (court or swing mounted)
- Miniature Medals
- Ribbon Bars, with optional ribbon devices and plastic covering
- Medal Frames, with engraved plates
- Medal Photo Frames, where the customer uploads and crops their own photo
- Medal Presentation Sets
Customers can then add storage and presentation options: solid timber boxes with engraving, premium presentation cases, and wallets.
A live, accurate preview
As medals are added, the builder draws the rack in real time: each medal at true relative size, clasps placed on the ribbon, and overlap calculated automatically as the rack fills. Frames and presentation sets render the medals inside the actual frame artwork, alongside the customer's engraving text or photo.
Order of wear, enforced
Medals are sorted into their correct order of precedence automatically, by country and jurisdiction, including Australian state-level medals and service medals. Customers don't need to know the rules. The builder applies them, and a custom order is still available when one is genuinely needed.
Pricing that matches the store, to the cent
All prices come from BigCommerce, including customer-group price lists. A wholesale customer sees wholesale pricing everywhere, from the medal cards to checkout. On top of that, the platform handles:
- per-item mounting, clasp, ribbon-device, engraving and personalisation charges;
- dynamic tax by product and jurisdiction;
- deals configured by staff, either percentage or fixed amount, applied per line item or across a "full rack". Deals show as badges on product cards and modals and carry through to the cart, checkout, saved racks and emails.
Save, quote, or buy
- Save a rack and come back later. Saved racks keep their rendered snapshots.
- Request a quote. Quotes are tracked, can expire, and convert to orders.
- Check out through BigCommerce, with the customer signed in to the storefront automatically.
Every order and quote comes with structured staff notes: order of wear, clasp positions, ribbon style and devices, magnetic or non-magnetic mounting, engraving text, frame plate, cropped photo, and any variant flagged unavailable. The workshop gets an exact build sheet and a snapshot image of what the customer approved.
Built for phones first
Many customers shop from their phones, so every product preview was rebuilt to scale fluidly from a 320px phone to a desktop monitor. The phone layout has its own medal drawer, a guided tour, and touch-friendly personalisation steps.
The admin panel
Staff run the platform from a role-based admin panel:
- Product curation. Products sync from BigCommerce into a pending queue. Staff configure each one (clasps, ribbon-device positions, availability, images, product links) before making it active in the builder. Includes bulk CSV export.
- Common groups. Pre-built medal sets that customers can start from, with auto-generated preview images.
- Order of wear management by country.
- Channels. One entry per BigCommerce storefront, each with its own sender email and a live/staging toggle.
- Deals for promotions and wholesale offers.
- Email templates and cadences. Branded quote, sales order and abandoned-rack emails, with timed follow-up sequences and delivery tracking through Amazon SES.
- Admin roles and access control.
The customer website and Medal Library
We also built the client's customer-facing WordPress website, the front door to the builder. Besides product, how-it-works, FAQ, support and blog pages, it includes a free Medal Library: a researched reference of 295 medals across national and military, police, emergency, corrective services, Imperial and foreign awards. Each medal page covers its history, eligibility, ribbon, clasps and place in the order of wear, and links straight into the builder with an "Add to my rack" button.
The library gives veterans and families genuinely useful information, and gives search engines hundreds of relevant, well-structured pages that lead visitors into the builder.
Under the hood
For readers who want the technical detail.
Architecture
| Layer | Technology |
|---|---|
| Frontend | React 18, TypeScript, Vite, Tailwind CSS, shadcn/ui, TanStack React Query, Framer Motion |
| Backend | Python, FastAPI, SQLAlchemy, Alembic migrations |
| Data | PostgreSQL (39 tables), Redis for sessions, caching and distributed locks |
| Commerce | BigCommerce Management, Storefront, Customer Login, Price List and Webhook APIs |
| Media | Amazon S3 with CloudFront CDN |
| Amazon SES with delivery and engagement tracking | |
| Analytics | Google Analytics 4, with sales tracking tied back to racks |
| Hosting | AWS App Runner (frontend); Dockerised backend on AWS with GitHub Actions CI/CD and separate staging and production pipelines |
| Marketing site | WordPress |
Hard problems we solved
Pixel-accurate medals at any screen size. Clasps are positioned as a percentage of each medal image, so any stretching or letterboxing makes them drift. We built a single sizing rule that every medal renders through, and used CSS container queries so frame and presentation-set previews scale as one unit with no fixed pixel offsets. The result looks identical on a small phone and a 4K screen.
Capturing exactly what the customer approved. Each cart item, saved rack, quote and order carries an image of the rack. We built a snapshot pipeline: a canvas renderer for medal racks and a DOM rasteriser for frames and sets. It waits for animations to settle, clips drop shadows correctly, compresses output for storage, and shares one image cache across captures. Along the way we diagnosed a CDN caching fault where a cached cross-origin header could break images for other users, and designed the loading strategy to stay robust against it.
One app, many storefronts. Each storefront reaches the app through an encrypted channel link. The backend issues a channel token that scopes products, pricing, tax, racks and emails to that storefront. That lets a single deployment serve the client's whole storefront network.
Seamless checkout into BigCommerce. At checkout we create the BigCommerce cart server-side and send the customer through a short-lived relay that signs them in to the storefront with a BigCommerce Customer Login token. They land in checkout already signed in, with addresses and saved payment methods ready.
Signed-in customers stay signed in. Customers already signed in on a storefront, and staff using BigCommerce's own "log in as customer", are carried into Rack Builder automatically. Staff sessions show a clear banner naming the staff member.
Keeping a large catalogue in sync. Product, variant and price changes flow in from BigCommerce through webhooks and background re-sync jobs. These run off the request path, with Redis locks so only one worker runs each job, which keeps the app responsive while the catalogue updates.
Follow-up that runs itself. Saved racks, quotes and orders each trigger a configurable email sequence. Emails include rack images served from the CDN, active deals, and a deep link that reopens the customer's exact saved rack.
How we worked
- Two environments, automated deploys. Every merge to
maindeploys production and every staging merge deploys a password-protected, non-indexed staging site, both through GitHub Actions. - Short, focused iterations. The client could see each feature on staging before it shipped.
- Design system. Midway through, we reskinned the whole product to a new forest-green, ivory and gold visual identity using design tokens, so the builder, checkout, emails and admin share one look.
Timeline
| Period | Milestone |
|---|---|
| Jul–Sep 2025 | Discovery, requirements and solution design. Backend development begins |
| Oct–Dec 2025 | Backend foundations: BigCommerce integration, channel authentication, admin authentication, product sync, cloud infrastructure |
| Dec 2025–Feb 2026 | Admin panel, product curation workflow, order of wear engine, first builder UI, customer accounts, saved racks |
| Mar–Apr 2026 | Frames, presentation sets, storage options, clasp positioning, pricing and tax, cart and checkout |
| May 2026 | Deals, React Query, email templates, quotes, workshop staff notes |
| Jun 2026 | Full mobile responsiveness across all six products, new design system, common groups, admin search and filters |
| Jul 2026 | Checkout relay into BigCommerce, product availability management, GA4 sales tracking, Docker-based CI/CD, staging environment |
| Aug 2026 | Email redesign and cadences per channel, SEO and social tags, CDN-served snapshots, durability fixes for image storage. Public launch in mid-August |
| Sep 2026–now | Phase 2 in progress. Already shipped: BigCommerce sign-in carry-over and staff masquerade, magnetic mounting variants, photo cropping for photo frames. More admin, customer-support and workflow features under way |
The result
The client now has a self-service channel for its most complex, most personal products:
- Customers design, see and price a correctly ordered medal rack, frame or presentation set themselves, on any device, at any hour.
- Every order reaches the workshop with a complete, structured build sheet and an image of what the customer approved.
- Staff curate the catalogue, run promotions and follow up on unfinished racks from one admin panel, without touching code.
- One platform serves every storefront, with each storefront's own pricing, tax and branding.
Services delivered
Product strategy · UX/UI design · Design system · React/TypeScript frontend · Python/FastAPI backend · BigCommerce integration · WordPress website · AWS infrastructure · CI/CD · Transactional email · Analytics · Ongoing support and enhancement
Planning something similar? See our Dev Shop Services or schedule a meeting.