<aside> 💡 This page is a work in progress

</aside>

We developed the first version of pictureroom.shop on Lightspeed, an e-commerce platform that turned out to be a developer's worst nightmare. When Lightspeed shut its doors, we did a landscape audit of platforms that integrate with Square (their payment processor of choice) and recommended BigCommerce. We were happy to discover that they had developer tools and a modern framework for local development, which was lacking in other e-commerce platforms. This was a unique opportunity to optimize site performance with a brand new design, and provide a more SPA like experience by extending the BigCommerce Stencil framework to include React.

Frontend

Hybrid framework

• React — SPA homepage with filterable product grid
• BigCommerce Stencil templates — static server rendered pages

News, Events, Artist profiles

Accessibility

Backend

Cron job every hour to sync database with BigCommerce API

• Artists, products, metadata, images, inventory

Custom endpoint for fetching filtered products

• Golang + SQLC

Dev Ops

We decided to deploy the app on Digital Ocean App Platform, after having spiked GCP as well, because it was cheaper for what we needed (simple container + Postgres database) and much faster to deploy.

The project started out in a public Github repo so we couldn't check in the prod configuration. Instead, we used a Github Action to write the config at deploy time using a Node.js script.

import fs = require("fs");

const {promises} = fs;

function template(connStr, store, client, token) {
	return `
### RUNTIME APP CONFIGURATIONS
version: 0.0.1
connStr: "${connStr}"
bigCommerce:
  store: ${store}
  client: ${client}
  token: ${token}
`;
}

export default async function writeConfig(
	CONN_STR,
	BC_STORE,
	BC_CLIENT,
	BC_TOKEN,
) {
	try {
		return await promises.writeFile(
			"../server/config/prod.yaml",
			template(CONN_STR, BC_STORE, BC_CLIENT, BC_TOKEN),
			"utf8",
		);
	} catch (e) {
		throw e;
	}
}

Also worth noting we opted for a yaml config as you can see here instead of using environment variables through out the code to make the configuration more manageable. This also allowed us to develop against BigCommerce API locally including listening to webhooks for product and brand updates.