Creating a fast e-commerce website using Remix, Turso, and Drizzle hosted on Cloudflare Workers

It's been a few months since I started using Remix. I've enjoyed using it too much for someone who was initially reluctant to get into the React side of things in front-end development (Hi Vue.js 👋).

I have recently been working on an e-commerce website, “The Mug Store”, a one-stop shop for all your ceramic coffee-holding buddies, and later decided to write a tutorial to share with you how pairing this framework with a few other technologies made for the edge makes for a robust e-commerce experience.

Fortunately (depending on your perspective), I enjoyed writing the tutorial so much that it ended up being the size of a short story. So, I had to break it down into a sectioned codelab for easy readability.

The codelab can be found inside the Turso docs tutorials section where you can read it and easily navigate to other Turso related references if need be.

If you want to see this project in action, you can jump straight to a live deployment. Overall, it includes features such as product listing, a complete and persistent shopping cart and a check out experience.

Here are some screenshots of what the final website looks like.

The product listing View.
The mini cart.
Details view.
Checkout view

The technologies that I used to build the e-commerce website in this tutorial are Turso, Drizzle, and Cloudflare Workers, where the demo provided on the link above is hosted. Let's see what these services are, and why they were selected as the stack for building the e-commerce website.

#Framework: Remix

Remix is a full stack web framework that lets us focus on the user interface and work back through web standards and deliver a fast, slick, and resilient user experience.

The “full-stack” aspect of Remix enables us to use a single codebase to build all the parts of the e-commerce website, without the need to create two separate components to cater for a single website. Remix also lets us implement a REST API through resource routes.

Remix exposes the CookieStore Web interface through its createCookieSessionStorage method which helps us implement a user authentication system without the need to depend on third party plugins.

#Database: Turso

For our database we're using Turso, the Edge database from the creators of LibSQL, a fork of SQLite.

There are three major advantages to using Turso in an e-commerce website setup.

The first being, the tendency for e-commerce websites to be heavier on reads than on writes since most interaction involves fetching rather than submitting data pairs nicely with Turso. This is because Turso's underlying technology, SQLite, is a like-for-like solution to such a need.

Second, since it is expected that visitors to websites are geographically diverse, Turso can help improve the user experience (UX) more so when dealing with e-commerce websites where UX can prove costly. Turso achieves this by putting data closer to the end users, reducing the latency of the requests they make from wherever they are.

It is essential to point out that the backend code that queries the database needs to also run at the edge so as to reap the benefits of using an edge database such as Turso.

And lastly, Turso is quite generous. It offers a capable free tier with 9GB of storage, 25 million writes, 1 billion reads, and up to 3 databases in up to 3 locations for you to try things out. Visit Turso's pricing page for more information.

#ORM: Drizzle

We are using Drizzle, a TypeScript Object-Relational Mapping tool (ORM) with support for PostgreSQL, MySQL, and SQLite databases like Turso to query our database.

At the moment I feel that Drizzle is the best ORM tool to pair with Turso since it has many of the essential features that you expect from an ORM, promising an overall good developer experience (DX). It has support for schema declaration and generation, relations and relational queries, support for transactions, views, joins, custom types, extensions, and a bunch of other goodies.

Drizzle has a “studio” feature that lets you easily visualize your database and modify it from the GUI without the need to issue queries via the SQL shell.

#Deployment: Cloudflare Workers

For the website's backend I used Cloudflare Workers which is the Cloudflare offering that lets you deploy serverless code instantly across the globe promising exceptional performance, reliability, and scale.

As I mentioned earlier, an edge database is only worthwhile when the code that accesses it is also deployed near the same edge locations, and Cloudflare Workers helps us do just that, otherwise “it is all chasing after the wind”, quoting an old wise man.

Visit the Turso docs website to read and get hands-on with the tutorial.

A live demo of the e-commerce website can be viewed on this link.

For more information on the stack choice used in this tutorial you can visit the following links:

If you love reading more tutorials like this, follow me on Twitter @xinnks. You can also send me feedback and suggestions on other kinds of tutorials or frameworks you'd like to see me cover on there too.