DEV Community: Arinze Joachim

Video Transcription using Cloudinary Add-on in a Nuxt 3 Application

Arinze Joachim — Mon, 06 Feb 2023 03:42:52 +0000

Video transcription is the process of converting the spoken words in a video into written text. This can be done automatically using speech recognition technology or manually by transcribers. The transcribed text is usually synchronised with the video, allowing viewers to read along as they watch.
There are a variety of use cases for video transcription, including:

Accessibility: Transcription can make videos more accessible to people with hearing impairments or those who speak different languages.
Searchability: Transcribed videos can be searched and indexed, making it easier for viewers to find specific information within the video.
Subtitling: Transcription can be used to create subtitles for videos, making them more accessible to a broader audience.
Language Learning: Transcription can be used as a tool for language learning, allowing students to read along with native speakers and improve their listening and comprehension skills.

This implies that video transcription is a necessity for improved accessibility. As a result, several SaaS companies, such as Cloudinary, offer a method to transcribe videos smoothly.

Cloudinary, a cloud-based platform for managing and optimising media assets such as images and videos, also offers a video transcription add-on. The add-on converts the audio in our videos to text automatically. It applies an effective AI algorithm to our videos using Google’s Cloud Speech API to generate the best possible speech recognition results. These generated texts can be overlayed on our video as subtitles using Cloudinary video transformations.

In this article, we will build a Nuxt application that uploads a video to Cloudinary and applies the Cloudinary transcription add-on on upload. Then we will use the Cloudinary transformation API to overlay the AI-generated text on the video. Finally, we will make the transformed video downloadable.

Application Repository and Demo

Repo: https://github.com/yhuakim/nuxi-transcription
Demo: https://nuxi-transcription.netlify.app/

Prerequisites

A Cloudinary free tier account and valid API keys.
Good knowledge of Nuxt version 3.

Registering the Google AI Video Transcription Addon

After creating a free tier account, enable the Google AI video transcription addon to use the Cloudinary transcription endpoint. We can do this by following the steps below:

Navigate to the addon tab, then click the Google AI video transcription card as shown in the image below:
The preceding step will take us to the screen below, where we can select the Free plan link. This will enable our free plan.

Now, we have successfully registered the Google AI video transcription addon.

Setting Up a Development Environment

To set up a development environment, we will need to run the following commands in the terminal:

npx nuxi init video-transcription && cd video-transcription

This command creates a Nuxt project in a directory called video-transcription and navigates into the directory.

Next, we need to install the Nuxt3 dependencies by running the following command in the terminal:

yarn install

Installing Dependencies
After initializing a Nuxt project, we will add other dependencies necessary for the current project. These dependencies include:

Cloudinary: A Node.js SDK for media management. We can add this package by entering the following command:

yarn add cloudinary

File saver: A package to download the transcribed video to the storage device. This can be added using the following command:

yarn add file-saver

TailwindCSS: A CSS framework to assist with the page styles. To use this, we can run the following command:

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then, we can follow the instructions here for a complete guide to set up TailwindCSS in a Nuxt3 application.

Building Out The User Interface

To create the UI of this project, we will split it into two major sections namely:

The Form handling section: This will handle the user’s input, the video file and the upload to our Cloudinary endpoint.
The Transcribed video preview: Here, the returned transcribed video is displayed to the user with a download button.

Before we start writing the code, let's adjust our file structure as follows:

Navigate to the project directory and create a pages folder.
Then, open the app.vue file and add <NuxtPage /> component as shown below, and then run yarn dev -o to start the development server.

<template>
    <div>
       <NuxtPage />
    </div>
</template>

Form Handling
Now let’s create a file in the pages folder called index.vue then, add the following snippet

<!-- pages/index.vue -->
    <template>
      <div class="max-w-[60rem] grid justify-center items-center mx-auto py-4">
        <header class="text-4xl font-bold text-gray-700 text-center">
          <h1>Video Transcription App</h1>
        </header>
        <main class="py-5">
          <section class="py-5 flex">
            <form @submit="handleSubmit">
              <div class="upload">
                <label
                  for="video-file"
                  class="block mb-2 text-sm font-medium text-gray-500"
                  >Upload a Video file</label
                >
                <input
                  type="file"
                  @change="handleChange"
                  name="video-file"
                  id="video-file"
                  class="g-gray-50 border border-gray-300 text-gray-900 text-sm 
                  rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                />
              </div>
              <button
                v-if="selected !== null"
                type="submit"
                class="text-white bg-gradient-to-r from-blue-500 via-blue-600 
                to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none 
                focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg 
                text-sm px-5 py-2.5 text-center mr-2 mb-5 mt-2"
              >
                Upload
              </button>
            </form>
          </section>
        </main>
      </div>
    </template>

The snippet above is a markup for our Form, which consists of an input element with a type of file and a button with a type of submit. The submit button is configured to be visible only when a user has selected a valid input.

Next, let’s create the handleSubmit and handleChange methods that we have defined in the markup above. Let’s add the following snippet just above our template markup

<!-- pages/index.vue -->
    <script setup>
    const selected = useState("selected", () => null);
    const videoUrl = useState("videoUrl", () => "");
    const downloaded = useState("downloaded", () => false);

    const handleChange = (e) => {
      if (e.target.files && e.target.files[0]) {
        const i = e.target.files[0];
        let reader = new FileReader();
        reader.onload = () => {
          let base64String = reader.result;
          selected.value = base64String;
        };
        reader.readAsDataURL(i);
      }
    };

    const handleSubmit = async (e) => {
      e.preventDefault();
      try {
        const body = JSON.stringify(selected.value);

        const config = {
          headers: {
            "Content-Type": "application/json",
          },
        };
        const { data } = await useFetch(`/transcribe`, {
          method: "POST",
          headers: config.headers,
          body,
        });
        videoUrl.value = JSON.parse(data.value.data);
      } catch (error) {
        console.error(error);
      }
    };
    </script>

The snippet above shows how we manage our states, monitor and process the user’s input using the handleChange method and what to do with the file once the user submits it. To manage our states we will use the Nuxt provided useState composable. To learn more about the useState composable visit here.

In the handleChange method, we will convert the user-selected video file into a data url format using Javascript’s built-in FileReader() constructor. Then we will assign it to the selected state.

Then, in the handleSubmit method, we will:

prevent the default action of the onSubmit event by calling the preventDefault() function
send a POST request to our server route (/transcribe), with the value of the selected state as the body of the request
now assign the response to our videoUrl state

Creating the Server Route
From the above snippet, we are making a POST request to the /transcribe route but we have not created this route. To create this route, let’s navigate to the project directory and create a folder named server. Inside this folder, let’s create another folder called routes and create a file called transcribe.js.

In the transcribe.js file, we will handle two major logic:

Upload and Transcription: Here we will use the Cloudinary upload API to upload the user-selected video file. Also, we will ask Cloudinary to transcribe this video using the transcription addon.
Video Transformation: Here we will use the Cloudinary video transformation API to overlay the generated text on the video.

First, let’s add the following snippet to /transcribe.js:

    import { v2 as Cloudinary } from 'cloudinary';
    import { parse } from 'path'

    export default defineEventHandler(async (event) => {
        const { name, path } = await readBody(event)
        const filename = parse(name).name

        try {
            Cloudinary.config({
                cloud_name: process.env.CLOUD_NAME,
                api_key: process.env.API_KEY,
                api_secret: process.env.API_SECRET,
                secure: true
            });

            await Cloudinary.uploader.upload(path,
                {
                    resource_type: "video",
                    public_id: `demo/${filename}`,
                    raw_convert: "google_speech:srt:vtt"
                },
                function (error, result) {
                    if (result) {
                        return result
                    }
                });

        } catch (error) {
            console.log(error);
        }
    })

In the snippet above, we

imported the cloudinary and path packages
created a handler function for our server logic which takes an event parameter.
destructured the name and path from the body of our request using Nitro’s built-in readBody query and passing in the event parameter.
trimmed off the file extension from the user-selected file name using the parse method we imported, by passing in the file name and then retrieving only the name attribute.
set up a Cloudinary instance by passing in our cloud_name, api_key and api_secret, inside a try-catch statement.
used the Upload method provided by the Cloudinary instance to upload the video file located at the path stored in our path variable. Additionally, we will set the raw_convert option to google_speech:srt:vtt. This will trigger an automatic transcription of the video as it uploads.

Once this process is completed, we have one more task to perform, and that’s to overlay the generated text file on our video. To do this, we will add the following snippet just below our upload method.

    // server/routes/transcribe.js
    const transcribedVideo = Cloudinary.url(`demo/${filename}`, {
          resource_type: "video",
          loop: false,
          controls: true,
          autoplay: true,
          fallback_content: "Your browser does not support HTML5 video tags",
          transformation: [
              {
                  overlay: {
                      resource_type: "subtitles",
                      public_id: `demo/${filename}.en-US.srt`
                  }
              },
              { flags: "layer_apply" }
          ]
      })
    return {
        statusCode: 200,
        data: JSON.stringify(transcribedVideo)
    };

In the above snippet, we;

used the Cloudinary url endpoint to retrieve the uploaded video by its name, and then we applied an overlay transformation to it. The overlay will be of resource_type subtitles, then we will provide the location of our generated text using the public_id option.
returned the url generated from our Cloudinary transformation as a JSON string to the client side with a statusCode of 200.

Now we have successfully created our server logic and can post and retrieve data from our client side, let’s display our transcribed video to the user.

Displaying The Transcribed Video and Adding a Download Button
Here we will strive to display the transcribed video as returned from our server logic to our users. Additionally, we will provide a download button, so the user can save the video to their local storage.

Now let’s navigate to our pages/index.vue file and add the following snippet just below the Form section.

    <section class="transcribed-preview">
      <!-- preview Transcribed video here -->
      <div v-if="videoUrl === ''" class="">
        Your transcribed video will appear here
      </div>
      <div v-else class="max-w-[35rem] shadow-2xl">
        <video autoplay controls className="mb-5 w-100">
          <source
            :src="videoUrl ? `${videoUrl}.webm` : ''"
            type="video/webm"
          />
          <source :src="videoUrl ? `${videoUrl}.mp4` : ''" type="video/mp4" />
          <source :src="videoUrl ? `${videoUrl}.ogv` : ''" type="video/ogg" />
        </video>
      </div>
      <button
        v-if="videoUrl !== ''"
        @click="handleDownload"
        class="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 
        hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 
        dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 
        text-center mr-2 mb-2"
        :disabled="downloaded ? true : false"
      >
        Download Video
      </button>
    </section>

The above snippet only displays when we have a response from our server. Now let’s handle our download button logic. To do this we will add the following snippet inside our script element.

    import { saveAs } from "file-saver";

    const handleDownload = () => {
      if (videoUrl.value !== "") {
        saveAs(videoUrl.value, "transcribed video");
        downloaded.value = true;
      }
    };

The method above uses the saveAs method we imported to initiate a download when the button is clicked. The saveAs method takes in two parameters; the first is the url of the file and the second is the name of the file that will be saved.

Finally, we will have the following screen once we have successfully executed all these procedures.

dropbox.com

Conclusion

This article shows a managed method to implement video transcription with Cloudinary in a Nuxt version 3 application. It exposes the usage of server routes to protect and manage our API keys. Additionally, we explored the use of Nuxt3 reactive state management to manage our application states.

Resources

The following are resources for further reading and guides to set up our next project.

Modern eCommerce storefront with Xata and Cloudinary Gallery Widget

Arinze Joachim — Wed, 23 Nov 2022 12:08:08 +0000

E-commerce stores, as we all know, have a high demand in current times. From my observation on freelancing platforms, more than 50% of developers have had a gig to build an e-commerce storefront at least once. As such, developers need a fast and straightforward approach to creating e-commerce websites without compromising security and performance.

In this article, we will look at a quick method of building a performant e-commerce storefront using the following tools:

Xata — a serverless database that saves the time and effort of handling the servers ourselves.
Cloudinary Product gallery — a Cloudinary widget handles product image displays with already-styled components.
FingerprintJS — a fingerprinting library that assigns a unique id to site visitors based on their browser attributes.
Next.js — a React framework that offers serverside rendering and a fast build time.

Prerequisite

This article requires knowledge of Next.js and its API routes for a smooth flow. Also, we will need to create a Xata account, a Cloudinary account and FingerprintJS keys. They are all free-tier accounts.
We also assume to have a Next.js boilerplate with TailwindCSS configured and opened in our text editor.

What is Xata

Xata is a serverless database built on Next.js. It offers a variety of data types that includes:

String: a short text
Link: a connection between data tables
Email: an email address
Date
Integer: all whole numbers
Long text: a lengthy text; as seen in a description
decimals: all fractions of numbers

It also supports a variety of languages, such as Typescript and Python.

What is Cloudinary

Cloudinary is a SaaS solution for managing web and application media assets
. It helps developers serve optimised web assets while modifying them on the fly.
Cloudinary offers a variety of other services asides from media hosting and management. Some of this includes; the product gallery widget, which will be used in this article.

Setup Development Environment

Install the following dependencies in your Next.js boilerplate:

yarn add fingerprintjs/fingerprint-pro-react axios @xata.io/client

App Demo

The app demo can be found here, and the code here.

Dropbox - Screen Recording 2022-11-08 at 05.55.25.mov - Simplify your life

Shared with Dropbox

dropbox.com

Getting Started with Xata

Here we will talk about how to integrate Xata into our applications seamlessly.

Setting up a database

To use Xata, we will create a workspace in our free tier account. The image below shows steps for creating a database in Xata;

Next, navigate to the e-commerceDB and click on the Schema navigation on the menu bar. Now, the screen below comes into view;

At this point, let's create our database schema for the demo store. Every store has products it sells; thus, let's create a products table for our store. The products table will consist of the following columns:

name: a type of string. Stores the name of each product
desc: a type of long-text. Holds the description of each product
imageUrl: a type of string. Stores the image URL served from Cloudinary for each product
price: a decimal type. Stores each product's price
tags: a type of string. Stores the tags for each product
discount_id: a link that is a reference to the product_discount table.

The product_discount table consists of

name: a string type that stores the discount's name, such as "ECOMMERCE20."
isActive: a boolean type that holds the validity of the discount
discount_percent: a decimal type that stores the percentage decrease in the product price.

Next, let's create a user table that will store the id generated by FingerprintJS. After this, let's create a cart table that stores each user's selected products. This table will consist of the following column:

product_id: a reference to the properties of the desired product
user_id: a reference to the user who picked the product(s)
quantity: the total quantity per product selected by the user
amount: the total price per product picked by the user

Once we have successfully created these tables, it's time to populate them with some dummy data.
First, let's download and host our product images on Cloudinary. To do this, we will upload our desired product images to Cloudinary while adding a unique tag to each. Then, Cloudinary generates a URL for each image we will use in the imageUrl column of each product. The image below shows a sample record created.

Fetching Products from Xata Database

Open up the Next.js boilerplate and navigate to the pages/index.js directory. In the file add the following snippet

// pages/index.js
import { BaseClient } from '@xata.io/client';
    import Products from '../components/Products';

    export default function Home({ products }) {
      return (
        <div className="">
          <main>
            <div id='products' className="">
              <h1 className="text-3xl font-semibold text-center py-10">Products</h1>
              <Products products={products} />
            </div>
          </main>
        </div>
      )
    }
    export async function getServerSideProps() {
      const xata = new BaseClient({
        branch: 'main',
        apiKey: process.env.API_KEY,
        databaseUrl: process.env.XATA_DATABASE_URL
        //fetch: fetchImplementation // Required if your runtime doesn't provide a global `fetch` function.
      });
      const page = await xata.db.products
        .select(["*", "discount_id.*"])
        .getAll()
      return {
        props: {
          products: page,
        }
      }
    }

The snippet above handles fetching our products from the database. To achieve this,

First, import BaseClient from @xata.io/client, and axios from axios
Next, export a Home page function with a prop of products
Then, create an asynchronous getServerSideProps() function, that initialises the Xata client. To initialise our Xata client we need to have gotten our API keys from Xata and added them to a .env file

Our API keys and database URL, can be found as shown in the image below

Next, our products will be fetched using the Xata method; xata.db.products and selecting all products using "*". While appending each linked(referenced) table to the results. This will return a response as shown below;

Since the products are now available as props on our Homepage, let’s display them. To achieve this, let’s create a components directory and a Products.jsx file. Inside this file add the following snippet:

    //components/Products.jsx
    import Link from "next/link"
    const Products = ({ products }) => {
        return (
            <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 justify-items-center">
                {
                    products && products.map((prod, index) => (
                        <div className="relative w-36 md:w-52 bg-white rounded-md border border-gray-200 shadow-md m-3" key={index}>
                            <small>
                                <b className={`${!prod.discount_id ? 'none' : 'absolute top-2 right-2 text-xs text-red-300 bg-red-100 p-1'}`}>{prod.discount_id && prod.discount_id.isActive ? `${prod.discount_id.discount_percent * 100}%` : ''}</b>
                            </small>
                            <div className="">
                                <Link href={`/product/${prod.id}`} className="">
                                    <img className='object-cover w-36 md:w-52 h-48' src={prod.imageUrl} alt="" />
                                </Link>
                            </div>
                            <div className="card-info py-2 px-2">
                                <Link href={`/product/${prod.id}`}>
                                    <h3>{prod.name}</h3>
                                    <p>
                                        <b>₦{prod.discount_id && prod.discount_id.isActive ? (prod.price - (prod.price * prod.discount_id.discount_percent)) : prod.price}</b> <br />
                                        <small><s className={`${!prod.discount_id ? 'hidden' : 'text-gray-500 decoration-gray-500'}`}>₦{prod.discount_id && prod.discount_id.isActive ? prod.price : ''}</s></small>
                                    </p>
                                </Link>
                            </div>
                        </div>
                    ))
                }
            </div>
        )
    }
    export default Products

The above component is then imported into our pages/index.js file. Where the fetched products are passed as props to it. Then, it maps through these products and displays them as shown below:

Creating User Identification using FingerprintJS

An e-commerce store must be aware of its visitors to track their activities. One of the essential activities to follow is the "what" product the user is adding to their cart.
However, we wouldn't want to bug your user with a login form constantly. To eliminate this, the app will silently create an ID unique to every user using a fingerprinting library. Now, let's walk through the code. Navigate to /pages/_app.jsx and add the following snippet.

// pages/_app.jsx
import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-react'
    import NavBar from '../components/NavBar'
    import '../styles/globals.css'
    function MyApp({ Component, pageProps }) {
      return (
        <FpjsProvider
          loadOptions={{
            apiKey: process.env.FPJS_KEY
          }}
        >
          <NavBar />
          <Component {...pageProps} />
        </FpjsProvider>
      )
    }
    export default MyApp

In the snippet above, FingerprintJS is tied to our application using a provider from @fingerprinjs/fingerprintjs-pro-react and initialised with the API Keys.

Next, let’s create a server logic in our API route. This logic will receive our user’s id and search for instances in the database. Then create a new user record if there is no instance of the user. To achieve this, we will add a file to /pages/api called assignuser.js. Then we add the following snippet:

// pages/api/assignuser.js
import { BaseClient } from '@xata.io/client';
    export default async function handler(req, res) {
      const { visitorID } = req.body
      const xata = new BaseClient({
        branch: 'main',
        apiKey: process.env.API_KEY,
        databaseURL: process.env.XATA_DATABASE_URL
        //fetch: fetchImplementation // Required if your runtime doesn't provide a global `fetch` function.
      });
      try {
        //Fetch all users and find a match for the visitorID
        const records = await xata.db.anon_user.select(["*"]).filter("id", visitorID).getAll()
        //if a match is not found, create a user with the visitorID
        if (records.length === 0) {
          await xata.db.user.create(visitorID, {
            _id: visitorID
          })
        }
        res.status(200)
      } catch (err) {
        console.error(err)
      }
    }

In the above snippet, we will:

import BaseClient from our @xata.io/client and initialise a client with our valid credentials
create a handler function where we fetch users from Xata and filter them by the visitorId received from our clientside
check if a User with the visitorID exists. If it doesn’t exist, we create a new record but if it does we will do nothing

Next, let’s create a client side logic to post the user’s id to our API route /api/assignuser. Navigate to /pages/index.jsx and add the following snippet:

    // pages/index.jsx
    import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'
    import { useEffect } from 'react'
    import axios from 'axios'
    export default function Home({ products }) {
      const { isLoading, data } = useVisitorData({ immediate: true })
      useEffect(() => {
        const registerAnon = async () => {
          if (!isLoading) {
            const visitorID = data?.visitorId
            await axios.post('/api/assignuser', { visitorID })
          }
        }
        registerAnon()
      }, [isLoading, data])
      return (
        <div className="">
          ...
        </div>
      )
    }
    export async function getServerSideProps() {
      ...
    }

In the above snippet, we will:

import useVisitorData from @fingerprintjs/fingerprintjs-pro-react
destructure the values of isLoading and data from useVisitorData
initiate a useEffect hook and create a registerAnon function. Here we will, pull the value of visitorId from data. Next, we will make a post request to the API route /api/assignuser with the generated visitorID as the body

With this, we have successfully assigned an ID to the visitor and stored it in our database.

Creating a Single Product Page

Here we will leverage Next.js dynamic routing features to create a page for a single product gallery display.

Creating Dynamic Routing
First, create a product directory in the pages folder. Then we will create a dynamic file named [id].jsx. In this file add the following snippet:

   // pages/product/[id].jsx
    import { BaseClient } from '@xata.io/client';

    const Product = ({ product }) => {
        return (
        ...
        )
    export default Product;
    export async function getStaticPaths() {
        const xata = new BaseClient({
            branch: 'main',
            apiKey: process.env.API_KEY,
            databaseURL: process.env.XATA_DATABASE_URL
            //fetch: fetchImplementation // Required if your runtime doesn't provide a global `fetch` function.
        });

        const page = await xata.db.products
            .select(["*", "category_id.*", "inventory_id.*", "discount_id.*", "tag_id.*"])
            .getAll()
        const products = page
        const paths =
            products &&
            products.map((prod) => ({
                params: { id: prod.id }
            }));
        return {
            paths: paths,
            fallback: false
        };
    }

In the above snippet, we will:

create a Product page component and import BaseClient from @xata.io/client
create a getStaticPaths asynchronous function. Here we will fetch all our products id from Xata and assign them as paths

Next, we will filter these paths and return only the user-requested product. To do this add the following snippet:

    // pages/product/[id].jsx

    // this line is below getStaticPaths()
    export async function getStaticProps({ params }) {
        const xata = new BaseClient({
            branch: 'main',
            apiKey: process.env.API_KEY,
            databaseURL: process.env.XATA_DATABASE_URL
            //fetch: fetchImplementation // Required if your runtime doesn't provide a global `fetch` function.
        });

        const page = await xata.db.products
            .select(["*", "category_id.*", "inventory_id.*", "discount_id.*", "tag_id.*"])
            .getAll()
        const products = page
        const product =
            products && products.filter((prod) => params.id === prod.id);
        return {
            props: {
                product
            }
        };
    }

In the above snippet, we have also returned our filtered product as a page props.

Now, we need to display this requested product to the user by adding the following snippet to pages/product/[id].jsx:

    // pages/product/[id].jsx

    import { useState } from "react";
    const Product = ({ product }) => {
          return (
            <div className='relative mx-auto'>
                <div className="flex flex-col md:w-6/6 p-8 md:flex-row">
                    <div className="price md:w-2/6">
                        <h3 className='text-3xl font-semibold'>{product[0].name}</h3>
                        <p className='text-lg'>
                            {product[0].desc} <br />
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium eaque totam aperiam temporibus asperiores, soluta eligendi architecto magni tempora. Perspiciatis a sequi id ut qui eligendi illo non unde vero!
                            Numquam quia maxime laudantium, provident libero fuga, voluptatem animi eveniet aliquid beatae mollitia odit laborum amet dolores. Id adipisci quidem nostrum alias dolorem ea, commodi rem repellendus repellat nihil molestias.
                        </p>
                        <p>
                            <b>₦{product[0].discount_id && product[0].discount_id.isActive ? (product[0].price - (product[0].price * product[0].discount_id.discount_percent)) : product[0].price}</b> <br />
                            <small><s className={`${!product[0].discount_id ? 'hidden' : 'text-gray-500 decoration-gray-500'}`}>₦{product[0].discount_id && product[0].discount_id.isActive ? product[0].price : ''}</s></small>
                        </p>
                    </div>
                </div>
            </div>
        );
    }

The snippet above renders our product title, price and description.
Next, we will display the images for each product. To achieve this, we will use Cloudinary’s product gallery widget feature.

Setup for Clouding Product Gallery Widget
Cloudinary gallery widget retrieves images (or videos) with specified tags based on the Client-side asset lists feature. To learn more about cloudinary product gallery see here.

Ensure that the Resource list option is enabled on your Cloudinary account to use this feature. By default, the list delivery type is restricted. In your console, navigate to Security settings and clear the Restricted media types item under the Resource list.

Next, add the following snippet to /pages/_document.js

    // pages/_document.js
    import Document, { Html, Head, Main, NextScript } from "next/document";
    class MyDocument extends Document {
        render() {
            return (
                <Html>
                    <Head />
                    <body>
                        <Main />
                        <NextScript />
    //script for cloudinary product gallery
                        <script
                            src="https://product-gallery.cloudinary.com/all.js"
                            type="text/javascript"
                            strategy="beforeInteractive"
                        ></script>
                    </body>
                </Html>
            );
        }
    }
    export default MyDocument;

The script marked above fetches the product widget before the page becomes interactive.

Next, to render this in our product page, we will add the following snippet:

    // pages/product/[id].jsx'

    import { useState, useEffect } from "react";
    import axios from 'axios';
    const Product = ({ product }) => {
        useEffect(() => {
            const productGallery = cloudinary.galleryWidget(
                {
                    container: "#gallery",
                    cloudName: "jilis",
                    mediaAssets: [{ tag: `${product[0].tag_id.tagname}`, mediaType: "image" }]
                },
                []
            );
            productGallery.render();
        });
          return (
            <div className='relative mx-auto'>
                <div className="flex flex-col md:w-6/6 p-8 md:flex-row">
                    //the line below renders the product gallery
                    <div className="md:w-4/6 md:h-96 px-5">
                        <div className='' id="gallery"></div>
                    </div>
                  ...
                </div>
            </div>
        );
    }

In the above snippet, we are using the useEffect hook to fetch and render the Gallery widget into an element with an id of gallery. The images to be rendered are hosted on cloudinary and have same tagname with the user-requested product. Below is how the UI will appear:

Conclusion

Building with the Xata database was a swift experience. I enjoyed working out my code on their Playground interface before going into my editor. Also, integrating the Cloudinary gallery widget was seamless, not to mention how fast my images were delivered since it was hosted on Cloudinary. These tools are amazing and I believe every developer will be excited to jump on them too to create awesomeness.

Resources

Cloudinary Gallery Widget
Xata Documentation
FingerprintJs Docs