{"id":28350,"date":"2022-07-14T08:32:07","date_gmt":"2022-07-14T08:32:07","guid":{"rendered":"http:\/\/create-an-e-commerce-product-gallery-in-remix"},"modified":"2022-07-14T08:32:07","modified_gmt":"2022-07-14T08:32:07","slug":"create-an-e-commerce-product-gallery-in-remix","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-e-commerce-product-gallery-in-remix\/","title":{"rendered":"Create an E-Commerce Product Gallery in Remix"},"content":{"rendered":"

Create an E-Commerce Product Gallery in Remix<\/h1>\n

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.<\/p>\n

In this article, we will build an e-commerce product gallery with Remix and Cloudinary\u2019s Product Gallery widget.<\/p>\n

Sandbox<\/h2>\n

The completed project is on CodeSandbox<\/a>. Fork it and run the code.<\/p>\n\n

The source code is also available on GitHub<\/a>.<\/p>\n

Prerequisites<\/h2>\n

Knowledge of React, Remix, and a Cloudinary account<\/a> is required to get the most out of this article.<\/p>\n

Getting Started<\/h2>\n

Run the command below in the terminal to set up a new Remix application.<\/p>\n

npx<\/span> create-remix<\/span>@latest<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
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:<\/p>\n
\"\"<\/p>\n
Next, navigate into the project directory.<\/p>\n
cd remix-product-gallery\n<\/code><\/pre>\n
Then, run the command below to start the application.<\/p>\n
 npm run dev\n<\/code><\/pre>\n
Setting up Cloudinary<\/h2>\n
Navigate to the Media Library section of the Cloudinary dashboard and create a new folder called image gallery<\/code>.<\/p>\n
\"\"<\/p>\n
Upload some images into the image gallery<\/code> folder.<\/p>\n
\"\"<\/p>\n
Cloudinary\u2019s Product Gallery Widget<\/h2>\n
We can dynamically display images, videos, 3D models, and 360-degree animations on our websites using Cloudinary\u2019s Product Gallery widget<\/a>.<\/p>\n
The following steps are required to integrate the widget into our application:<\/p>\n