Create a Brand Asset Visualizer in Blitz.js

Branding is one of the ways to gain relevance and credibility for both small businesses and large enterprises. A well-designed brand asset creates an excellent first impression that drags customers' attention and entices them to discover more about the business or company. Part of branding is testing the generated brand entity on different screens, including clothing merchandise, web page, business cards, and office stationery.

In this post, we will create a brand visualizer with Cloudinary and Blitz.js.

Cloudinary offers an end-to-end solution for all our image and video needs, including the upload, storage, administration, transformation, and optimized delivery.

Blitz.js is a full-stack React framework with a No-API data layer built on Next.js and inspired by Ruby on Rails. It also provides helpful defaults for routing, databases, and authentication while being extremely flexible.

We can find the completed project in the CodeSandbox. Fork it to get started quickly.

Github Repository

https://github.com/Kizmelvin/blitz-brand-visualizer

Prerequisites

The following are required to follow this project:

Basic knowledge of JavaScript and React.js
A Cloudinary account (Create an account here)
Knowledge of Next.js is good but not a necessity
Node.js version 12 or newer, installed on the computer

Setting up a Blitz.js Application and Cloudinary

Run the following command to install Blitz.js Command Line Interface globally on our machine:

1npm i -g blitz
2# OR
3yarn add global blitz

Next, scaffold a new Blitz.js project with the below command:

1blitz new brand-visualizer

Run the above terminal command and follow the prompts to create a new Blitz.js application in a brand-visualizer folder.

Next, navigate into the project directory and start the development server with the following commands:

1cd brand-visualizer # navigates into the project directory
2blitz dev #starts the dev server

Blitz.js will start a live development server at http://localhost:3000.

Next, log in to Cloudinary, navigate to the Media Library tab, create a brand-visualizer folder, and inside it, create two new folders; logos and mockups.

Download a few logos and mockups from freepik and upload them to the respective folder.

Next, navigate to the Dashboard tab and grab the Cloud Name, API Key and API Secret; we will use them to access the assets.

Building the Application

To start, let’s install the following npm packages:

cloudinary - To effortlessly optimize, transform, upload and manage our cloud assets
bootstrap and react-bootstrap - To handle styling and to use bootstrap components in a react environment
axios - A promise-based HTTP client for the browser and Node.js

Now, run the following command to install the above packages:

1npm install cloudinary bootstrap react-bootstrap axios

Next, update the .env.local file with the Cloudinary account credentials like below:

1//.env.local
2CLOUD_NAME = "CLOUD NAME HERE"
3API_KEY = "API KEY HERE"
4API_SECRET = "API SECRET HERE"

Now in the app directory, create an api folder and create a cloudinary.js file with the following snippets:

https://gist.github.com/Kizmelvin/549d7e66105fc56dbea82d8caf39f673

In the snippets above, we:

Imported C``loudinary, created a transformImage() function.
Configured a cloudinary instance with the credentials in the .env.local file.
Destructured id from req.query, targeted the mockup URLs.
Used transformations, and overlaid brand logo on the mockup images.

Next, in the app directory, inside the pages folder, update the index.js file with the following snippets:

https://gist.github.com/Kizmelvin/6a8c60046c6d8b227448bd2cd41b277f

In the above snippets, we:

Imported useState from “react,” Axios from “axios,” and Col, Row, Container from “react-bootstrap.”
Created coffeBrand, notepadBrand, hoodieBrand, and cardBrand states with the useState react hook.
Created the handleClick() function that sent a post request to the “api/cloudinary” route and passed the logoId as the id param.
Destructured mug, notepad, hoodie, and card from res.data in the handleClick() function and updated the states accordingly.
Used Row and Col components to display the logos and passed the handleClick() function to it.
Conditionally displayed the local mockup and state images when a logo is selected.

Now in the browser, we will have the application looking like the below:

Conclusion

This post discussed creating a brand asset visualizer with Cloudinary and Blitz.js.

Resources

The following resources might be helpful: