SSR storefrontEpisode 51 4:53 11 chapters October 2026

A Real Online Store on Four Databases, Rendered by API Maker

The Calm Home storefront: a real shop on four databases, rendered by API Maker. Walk through it as a customer, from the home page and categories to a product read from four engines, the cart, sign in and an order with its shipment, then read the code of each page and see it on a phone.

Next: Developer tools Read the docs SSR Websites

In the playlists The complete course SSR websites

Chapters

What you will learn

The home page and categories
One product, four engines
The cart, and a customer who signs in
An order and its shipment
The code of a product, the layout and lib, every table in one file
On a phone, and what it took

In the docsExamples

Transcript732 words · click a time to play from there

Intro

This is the Calm Home storefront : a real shop on four databases, rendered by API Maker. In this video, you walk through it as a customer, then read the code of each page.

A storefront, the usual way

A storefront on several databases usually means a frontend application, an API for each source of data, sign in and sessions to build, a filter in every query so customers see only their own orders, and a cache and an SEO setup on top. With API Maker, pages are TSX next to the data, one loader reads several engines at once, customers sign in with the auth providers of the account, and rules keep every table to what it may show.

In this video : the storefront in a browser, one product from four engines, the cart, the orders of a customer, the code of each page, the shop on a phone, and what it took.

The storefront

The home page shows the featured products, read from MongoDB. The categories come from the catalog too : eight of them, read by the loader of the layout, so every page has them in its menu. A category lists its products, nine to a page, each with its icon from Lucide, a UI library of the catalog. The menu leads to every category.

One product, four engines

The page of a product reads four engines, in one request. The product and its reviews come from MongoDB. How often it was ordered comes from MySQL : twenty times. Its stock in each warehouse comes from SQL Server, and the first names of the reviewers from PostgreSQL. No API was written for any of it.

The cart

Add to cart. The cart is a cookie of the visitor ; its prices are read again from the catalog on the server, never taken from the browser. And since the page of a product shows nothing of its visitor, the server keeps it a minute, for everyone.

A customer

Now a customer. The orders page needs a signed-in customer, so the visitor goes to the sign in page. Kabir types an email and a password, and signs in with the auth provider customers, over PostgreSQL. The menu greets Kabir, and the orders come from MySQL : only the orders of Kabir. One order : its lines and its discount from MySQL, and its shipment from SQL Server : Blue Dart, in transit, from the Ahmedabad hub.

The account page shows what the auth provider gave : the name, the email and the loyalty tier.

Four engines

MongoDB holds the catalog, its categories and reviews. SQL Server holds the stock and the shipments. PostgreSQL holds the customers who sign in. MySQL holds the orders and their lines. Every page reads what it needs, on the server, under the rules of one file.

The code

Now the code. The page of a product is one loader : five reads at the same time, the product, its stock, the warehouses, its reviews and the count of its orders, then the first names of the reviewers. Below it, the page is plain TSX. The layout has a loader too : the categories of the menu. lib slash shop holds the order of a customer : its row checked against the rule of the table, then its lines and its shipments.

And site dot config lists the nine tables the storefront reads, in four engines, each with its rule : columns for the products and the customers, rows for the orders. A table that is not listed can not be read. On a phone, the storefront fits the screen. The menu folds. The page of a product keeps its stock and its reviews.

What it took

What did it take? The Shop template, thirteen of its files changed, two hundred and thirty four lines added, four engines, and not one API endpoint written. The storefront is in the folder of this video, to make it again.

Built on standards

Every page follows the same layout, so a person or an AI assistant finds their way. The rules are in one file, easy to review. The cache, CSRF, escaping and the content security policy come by default.

Recap

To sum up. A storefront on four engines, from a template. One loader reads several databases at once. Customers sign in and see their own orders. Every table has its rule. Responsive, cached and safe by default. Next : the tools that make developers faster. API Maker. Build faster, spend smarter, deliver better.