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.
The following are required to follow this project:
- 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 blitz2# OR3yarn 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 directory2blitz 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.local2CLOUD_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:
In the snippets above, we:
C``loudinary, created a
- Configured a cloudinary instance with the credentials in the
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:
In the above snippets, we:
Axiosfrom “axios,” and
cardBrandstates with the
- Created the
handleClick()function that sent a post request to the “api/cloudinary” route and passed the
handleClick()function and updated the states accordingly.
Colcomponents 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:
This post discussed creating a brand asset visualizer with Cloudinary and Blitz.js.
The following resources might be helpful: