Building an NFT Preview Card With KendoReact

Kendo UI is a UI library built by Progress Telerik to develop user interfaces for small and enterprise-level applications. Kendo UI is available for the following JavaScript frameworks: React, Angular, Vue, and jQuery.

KendoReact is a React component library that makes designing and building powerful apps much faster. It includes fantastic features that help build a fast and sleek user interface, ensuring the UI has a modern feel and look to it. KendoReact is also prepared to handle any new requirements easily, which could create a perfect sync with your designer to avoid unnecessary iterations during the development cycle.

With that being said, In this post, I will demonstrate how to use the KendoReact library to build an NFT preview card for your React application.

Prerequisites

To follow along with this tutorial, you will need to have:

• React v16 or newer
• A basic understanding of React
• A code editor

React Project Setup

Those who are already familiar with scaffolding a React app using npx can skip ahead, but I will show how to get a React app off the ground for those who aren't. All you just need to do is follow along, and you will get the React app development server running on your local machine.

Enter the following command into your preferred CLI (command line interface), then run the following boilerplate command listed below, provided by React, to help us quickly set up a React project for development.

npx create-react-app NFT-demo --use-npm
cd my-app
npm start

And those who use Yarn can run the following commands.

yarn create react-app NFT-demo
cd my-app
yarn start

Now, locate the NFT-demo project's directory and open it in your code editor. You can begin by striping down the codes in the App.js file to look like this.

    import "./App.css";

    function App(){
     return <div classname="app"></div>
    }
    export default App;

Now that we are done scaffolding our React application, let's begin installing the dependencies for the application.

Dependency Installation

Next, let's add the KendoReact packages we'll be using for this project. I will use the KendoReact Default theme for this project, but other options exist—for example, the KendoReact Bootstrap and the KendoReact Material themes.

Note: KendoReact is a commercial UI component library, and as a part of this you will need to provide a license key when you use the components in your React projects. You can snag a license key through a free trial or by owning a commercial license. For more information, you can head over to the KendoReact Licensing page.

Install the KendoReact Default theme by running the following command in the terminal.

npm install --save @progress/kendo-theme-default

Now that we've installed the theme, let's import the theme CSS file into the project. Add the following code into the App.js file.

import "@progress/kendo-theme-default/dist/all.css";

The imported file adds the theme style to our application. Let's move on to installing the KendoReact layout module we will be using to develop the application.

Integrating Multiple KendoReact Components

KendoReact is a rich suite of many modular components. As mentioned earlier, in this demonstration, we will use multiple components imported from KendoReact to build the NFT preview card. Before we begin, let’s install and import the React Layout Library package and its dependencies.

    npm install --save @progress/kendo-react-layout @progress/kendo-react-progressbars @progress/kendo-licensing @progress/kendo-react-intl

I am sure by now you will have noticed the @progress scope we’ve used. The KendoReact library provides many decoupled modules for different purposes; they all scope to @progress (Progress is the parent company behind KendoReact)—think of it as a global scope for the modules in KendoReact.

Now that all the modules we need are installed, let's start developing the card.

The NFT Preview Card

The image below shows a finished copy of the project demo we will be building.

Let's start with importing the package into the project. Add the following code to the top of the App.js file.

import {
    Card,
    CardBody,
    CardImage,
    CardSubtitle,
} from "@progress/kendo-react-layout"; 

We imported the Card, CardBody, CardImage and CardSubtitle; these are UI components available to the layout modules. But this isn’t all KendoReact offers. KendoReact has more than 100 components available in different npm packages, all scoped to @progress.

The App.css file will contain all the aesthetic code. Empty the file and add the following code:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

The code above prevents the browser from adding automatic padding and margin, and the box-sizing deals with the possible padding issue we may incur.

Let's add this code into the return section of the App function located in our App.js file.

return (
    <div
    style={{
    backgroundColor: "#0D1A2D",
    height: "100vh",
    padding: "150px 650px 0px 650px",
    }}
    >
    <Card
    style={{
        backgroundColor: "#14263E",
        boxShadow: "0px 0px 25px rgba(0,0,0,0.2)",
        width: "240px",
        borderRadius: "7px",
    }}
    >
    <div style={{ margin: "20px auto" }}>
        <CardImage
        src={`${process.env.PUBLIC_URL}image-equilibrium.jpg`}
        style={{
        width: "200px",
        height: "200px",
        backgroundColor: "rgba(0,0,0,0.0)",
        borderRadius: "7px",
        }}
        />
        <CardBody style={{ padding: "0", margin: "10px 0px" }}>
        <p style={{ color: "white", fontWeight: "bold" }}>
        Equilibrum #3429
        </p>
        <p
        style={{
        color: "#455B78",
        width: "200px",
        fontWeight: "bold",
        }}
        >
        Our Equilibrum collection promotes balance and calm
        </p>
        <p
        style={{
        color: "#0F5F74",
        width: "200px",
        fontWeight: "bold",
        }}
        >
        0.034 ETH
        </p>
        </CardBody>
        <CardSubtitle
        style={{ borderTop: "1px solid #203A56", paddingTop: "10px" }}
        >
        <p style={{ position: "relative" }}>
        <img
        src={`${process.env.PUBLIC_URL}WhatsApp Image 2021-10-31 at 12.18.47 AM.jpeg`}
        alt=""
        style={{
            width: "40px",
            height: "40px",
            objectFit: "cover",
            borderRadius: "20px",
        }}
        />{" "}
        <span
        style={{
            position: "absolute",
            top: "13px",
            left: "50px",
            fontWeight: "bold",
            color: "white",
        }}
        >
        <span style={{ color: "#455B78" }}> Creation of</span> John Doe
        </span>
        </p>
        </CardSubtitle>
    </div>
    </Card>
    </div>
    );

Now that we have the code, let's begin by examining each component to understand the code in depth. First, we passed CardBody, CardImage and CardSubtitle as special props known as props.children (passed in as an array structure) into the Card component. Bypassing props.children, KendoReact can traverse every nested data and render them appropriately.

Let's analyze these card parts: CardBody, CardImage, CardSubtitle.

<CardImage
src={`${process.env.PUBLIC_URL}image-equilibrium.jpg`}
style={{
width: "200px",
height: "200px",
backgroundColor: "rgba(0,0,0,0.0)",
borderRadius: "7px",
}}
/>

As shown in the code and image above, the CardImage component is where we inserted the link to the image file; we used ${process.env.PUBLIC_URL}image-equilibrium.jpg to point to our public directory where we kept the image file. We also passed the style props to help us customize the CardImage component to how we see fit, which is one of the remarkable qualities of KendoReact.

<CardBody style={{ padding: "0", margin: "10px 0px" }}>
<p style={{ color: "white", fontWeight: "bold" }}>
Equilibrum #3429
</p>
<p
style={{
color: "#455B78",
width: "200px",
fontWeight: "bold",
}}
>
Our Equilibrum collection promotes balance and calm
</p>
<p
style={{
color: "#0F5F74",
width: "200px",
fontWeight: "bold",
}}
>
0.034 ETH
</p>
</CardBody>

In the CardBody component, we passed the data we wanted to display in p tag because we can pass any kind of tag we want in KendoReact components that are containers (have other components or JSX composed in them).

<CardSubtitle
style={{ borderTop: "1px solid #203A56", paddingTop: "10px" }}
>
<p style={{ position: "relative" }}>
<img
src={`${process.env.PUBLIC_URL}WhatsApp Image 2021-10-31 at 12.18.47 AM.jpeg`}
alt=""
style={{
    width: "40px",
    height: "40px",
    objectFit: "cover",
    borderRadius: "20px",
}}
/>{" "}
<span
style={{
    position: "absolute",
    top: "13px",
    left: "50px",
    fontWeight: "bold",
    color: "white",
}}
>
<span style={{ color: "#455B78" }}> Creation of</span> John Doe
</span>
</p>
</CardSubtitle>

Finally, in the CardSubtitle component, we passed both an IMG and a p tag because, like we said earlier, wrapper container components like CardBody and CardSubtitle can receive other components or JSX elements in them.

Conclusion

In the article, we showed only one of the capabilities of KendoReact using the Card component, which we used in defining our UI. Still, KendoReact has other components for Grid systems, buttons, animations, etc. And all this comes in place to help us quickly develop a full-fledged application.

Please note that KendoReact has to be licensed before you can use your application for commercial purposes, as it is not free for commercial purposes.