Connecting a Storefront to an Order System: The Beam Creative Catalog Build

Here's a pattern I see in small businesses all the time: the customer-facing side and the operations side are completely disconnected. A customer submits a request on the website, someone copies the details into an internal system, and information gets lost or garbled in translation.

For Beam Creative, the solution was building a wholesale catalog that speaks directly to the order management system. No copy-paste, no re-entry, no "I thought you said 500, not 50."

The Architecture Decision

The Beam Creative Catalog and BCOrderHaus are separate applications. This is intentional. A public storefront and an internal order system have fundamentally different requirements:

• The catalog needs to be fast, pretty, and publicly accessible
• BCOrderHaus needs to be secure, feature-rich, and protected on the internal network
• They change at different rates — the catalog gets design updates, the order system gets workflow updates

But they share data. When a customer completes a quote request on the catalog, that data needs to appear in BCOrderHaus ready for staff to review. This is where the sync comes in.

The Quote Wizard

The catalog's quote wizard is a 4-step process:

1. Select products — Browse the catalog, search, filter by category, set quantities. Live pricing calculates as you adjust quantities based on volume tiers.
2. Contact details — Name, email, company, event type and date, rush flag.
3. Artwork — Three options: upload files, provide text for us to design, or request custom design services.
4. Review and submit — Summary of everything with edit buttons for each section.

The state management uses React Context with localStorage persistence. If a customer adds products, navigates to the product page for more details, then comes back — their selections are still there. This is a small detail that prevents a lot of frustration.

The Sync: Fire and Forget

When the customer hits submit, the catalog sends the quote data to BCOrderHaus via a simple API call. It's a fire-and-forget pattern: the catalog sends the data and shows the customer a confirmation page with a reference number. It doesn't wait for BCOrderHaus to process the order or send back status updates.

Why fire-and-forget? Because the customer's experience shouldn't depend on the internal system's availability. If BCOrderHaus is temporarily down for a deploy, the catalog should still work. The quote data gets queued and synced when the system is back.

On the BCOrderHaus side, the incoming quote creates a new order with all the customer details, product selections, quantities, and pricing pre-filled. Staff review it, adjust if needed, and send the formal quote back to the customer — from within BCOrderHaus, not from their email.

The Deployment Twist

Both applications run on the same VPS. The catalog and BCOrderHaus portal are separate Docker containers behind Caddy, which routes requests based on domain name. Same server, same deploy pipeline, different applications.

This keeps hosting costs low while maintaining clean separation. Each app has its own Docker Compose file, its own health check, and its own deploy script.

The Lesson

The biggest takeaway from this project: systems that talk to each other are worth more than the sum of their parts. A standalone catalog is useful. A standalone order system is useful. But a catalog that feeds directly into the order system? That eliminates an entire category of manual work and human error.

If your business has a customer-facing side and an operations side, and humans are the glue between them — that's an integration opportunity. The sync doesn't have to be complicated. Sometimes a single API call is all it takes.