Create an E-Commerce Product Gallery in Remix

Remix is a full-stack React framework for building web applications that provides several useful features such as server-side rendering, file-system-based routing, TypeScript support, built-in support for cookies and sessions, and more.

In this article, we will build an e-commerce product gallery with Remix and Cloudinary's Product Gallery widget.

Sandbox

The completed project is on CodeSandbox. Fork it and run the code.

The source code is also available on GitHub.

Prerequisites

Knowledge of React, Remix, and a Cloudinary account is required to get the most out of this article.

Getting Started

Run the command below in the terminal to set up a new Remix application.

1npx create-remix@latest

The command above triggers a command-line interface (CLI) where we can configure the application. The images below show the configuration options the CLI provides:

Next, navigate into the project directory.

1cd remix-product-gallery

Then, run the command below to start the application.

1npm run dev

Setting up Cloudinary

Navigate to the Media Library section of the Cloudinary dashboard and create a new folder called image gallery.

Upload some images into the image gallery folder.

Cloudinary's Product Gallery Widget

We can dynamically display images, videos, 3D models, and 360-degree animations on our websites using Cloudinary's Product Gallery widget.

The following steps are required to integrate the widget into our application:

Tag the media assets we want to render in the widget
Provide access to client-side resource lists

To add tags to the images, click on any of them, and a sidebar will appear on the right side of the dashboard.

Next, click on the "metadata" setting in the sidebar. We'll set the tag of the images to dog-picture and then save the tag.

dog pictures

Cloudinary supports listing resources from the client side by their tags. However, the resource list is restricted by default, so we need to enable it on our account's s ecurity settings page.

On the security settings page, scroll down to 'Restricted media types', uncheck 'Resource list', and then save.

Initializing the Product Gallery Widget

Navigate to the app/routes/index.tsx file and update it with the code below.

1import { useEffect } from "react";
2
3export default function Home() {
4  useEffect(() => {
5    const productGallery = cloudinary.galleryWidget({
6      container: "#product-gallery",
7      cloudName: "OUR-ACCOUNT-CLOUD-NAME",
8      mediaAssets: [{ tag: "dog-picture", mediaType: "image" }],
9    });
10    
11    productGallery.render();
12  }, []);
13  
14  return (
15    <div className="container">
16      <h1>Remix Ecommerce Product Gallery</h1>
17      <div className="gallery-container">
18        <div id="product-gallery"></div>
19      </div>
20    </div>
21  );
22}

Let's break down the code above:

We imported useEffect from React, and from there, initialized the widget
We set up a div with an ID of product-gallery, this is the element with which we will render the product gallery
cloudinary.galleryWidget(options): Initializes the widget, takes in a container, cloudName, and mediaAsset as required parameters
container: References the div with the ID of product-gallery
cloudName: The cloud name of our Cloudinary account
mediaAssets: An array of the media assets we want to display; we populate the widget with all images tagged with dog-picture and set the mediaType of the images to image which will enable the widget to render the files in their appropriate formats
productGallery.render(): Renders the product gallery widget

Loading the Product Gallery Widget's Script

Navigate to the app/root.tsx file and add the widget’s script there.

1export default function App() {
2  return (
3    <html lang="en">
4      <head>
5        <Meta />
6        <Links />
7      </head>
8      <body>
9        <Outlet />
10        <ScrollRestoration />
11        <script
12          type="text/javascript"
13          src="https://product-gallery.cloudinary.com/all.js"
14        ></script>
15        <Scripts />
16        <LiveReload />
17      </body>
18    </html>
19  );
20}

With this, we see the product gallery widget.

Conclusion

This article taught us how to build an e-commerce product gallery with Remix and Cloudinary's Product Gallery widget.