How To Create a Business Profile Card using React and Cloudinary

businesscard

How to create a business card from generated templates containing profile information and QR code that links more business profile information(includes online card storage via Cloudinary API)

User Guide

  • Open project
  • Enter user details
  • Preview card and generated profile(edit your details here before you generate QR)
  • Generate card QR code
  • Download your business card using the card Link.
  • Scan QR in card to view all your business profile details

Prerequisites

  • Basic knowledge in react and java script.

Requirements

  • Linux, Windows 8 or any higher version
  • Chrome, Firefox browser
  • This article uses the git bash terminal
  • Node js
  • Next js(used for react framework production)

What you will learn

  • Environment setup
  • UI and Qr code implementation in react through next js
  • URL integration with react QR Code.

CREATE APP

download node page

Create your specific project folder and use the following code to create your project. npx create-next-app businesscard

  • The project is now successfully built.
  • In the terminal, run npm run dev to run to view the first instance of your project.
  • The sidebar is where your root project components are displayed.
  • Go to the ‘pages’ folder and choose the index file. Your first page contents will reside from this file/component.
first project launch page

in your browser, use the link http://localhost/3000 to access your webpage. You should see the following

first next js page

Our first phase of the project is complete. We have a functioning next js project. Now we include our required components.


We begin with integrating our back end, also known as server-side. Next, js offers server-side rendering for its React applications which is powerful for our use case.

BACK END

These will contain the parts of the web application that allow the application to operate and are not visible to the user. We will use nextjs server-side rendering for our project back end.

To achieve this, we need to integrate our backend to Cloudinary, storing our generated business card.


In your project, head to the pages/API directory and create a file named upload .js. In the file, paste the following code.

code guide

  • line 1:Function with handler method for initiating server side POST HTTP requests.
  • line 2: specifies the POST function to fire on request
  • line 3: Log a string in the terminal to testif the function works.

I would recommend you to use postman for your API functioning test.

Use this link to download postman

Open your postman application and create a new workspace in postman using the workspace option near the top left.

post,man new workspace
  • In the next window, write your workspace name and select create a workspace.
  • Open a new tab and use this link to test your post function. (the link is based on how you named your project API file. Here we called it ‘upload.js’; hence we use http://localhost/3000/api/upload
postman api test

To confirm the api call head to your terminal to view the console.log('api works') command

Api works

We are ready to build our back-end command. However, we also need our api parameters to integrate our back end

CLOUDINARY

Cloudinary is an Image and Video API that provides secure and comprehensive tools for quickly uploading media files from server-side code.

We will use Cloudinary to store our generated card and business profile content.

Use the following link to access the Cloudinary website and log in or sign up to begin authentication in your browser. For every logged-in user, there will be a dashboard containing account details used for authentication.

cloudinary dashboard

We will require the Cloud name, API Key, and API secret to authenticate our app. To achieve this in next js we need to install Cloudinary and dotenv from npm

In the terminal use npm install cloudinary to install Cloudinary

Install dotenv –> npm install dotenv

All your installed dependencies can be viewed in the package.json file in your project’s root folder.

Create a file called ‘.env’ in the root folder and paste the following code inside it. Use your Cloudinary account details to fill in the required information.

Go to your pages/api folder and create a folder named ‘utils’. Inside it create a file called ‘cloudinary.js’ and paste the following codes inside

code guide

  • line1: include dotenv module file configurations
  • line2:include cloudinary modules
  • line3-7:configure respective key configurations from .env file
  • line 10: export created module as cloudinary

Were almost done

One important step here is to include from Cloudinary what is known as an upload preset. Upload preset will enable you to define a set of upload options instead of specifying them in every upload call.


To create an upload preset, head to your Cloudinary account in your browser and near the top right, click the settings icon.

cloudinary settings option

Select options in the settings page

select upload option

Scroll down to the Upload presets option and click to add upload preset.

Enter your upload preset name and ensure to change your signing mode to unsigned since we will be using unsigned upload calls in our project.

All upload presets will be viewed from the upload page in the settings.

upload presets list

We now include cloudinary to our post function and proceed with our post function.

code guide

  • line 1: include Cloudinary module
  • line 3-9: The body parser determines the maximum file size limit passed in our function
  • line 11:initiate our function’s request handler method
  • line12: create string variable called ‘uploaded_url’
  • line13: declare a constant variable called ‘fileStr’ and assign it to the body data received from our front end.
  • line 15:  initiate POST function
  • line 17:  (Optional) use this command to test your POST function once request data is received
  • line 19-33: we use try catch method to our post request codes for errors while being executed
  • line21-22: declare a constant variable called ‘uploadedResponse’ that initiates the Cloudinary upload and passes the request’s body data (fileStr) to it.
  • line24: specify the upload preset we created by passing its name in our parameters.
  • line 27:(optional) Upon uploading, we should access the string URL that Cloudinary has merged to our uploaded fileStr. Use this command to log it into your terminal.
  • line 27: assign the object URL to the variable declared in line 12.
  • line 30: Catch and display incoming errors on the terminal(31)  and show error message as a json file (32)
  • line34: If there is no error, send back json response to the front end containing updated string variable ‘updated_url ‘.

Our backend is complete!

FRONT END

The front end will entail what the user will interact with directly. The aim will be to create an interactive UI that is as user-friendly as possible.

Dependencies

Install the following dependencies

  • @material ui/core –npm install @material-ui/core
  • react-qr-code- npm install react-qr-code
  • use-react-screenshot – npm install use-react-screenshot

In your root directory, create a folder and name it ‘components’. Inside it create a file called ‘card.js’, which is our card component.


First, import the project dependencies at the beginning of your card component.
In the same file, create a function named BuildCard.js

code guide:

  • line 1: Import react and respective hooks
  • line2: a function is passed to make styles to adapt generated value based on components’ props
  • line 3: We’ll use material UI’s text field to enter and edit text
  • line 4: Typography will be used to present our design and content as clearly and efficiently as possible
  • line 5: We use a button to trigger onClick events, which will be useful when passing through the various stages when creating our profile.
  • line 7: We will use this module to capture all required inputs to be uploaded
  • line9-13: We create a temporary function to test component functionality

To view our component import it to our index component.

Go to the index component(pages/index) and replace its contents with the following.

code guide:

line1: imports the card component from components folder

line 3-9: Create our app’s index/home page function called “Home” that returns HTML web page containing all the contents we will place in our ‘Buildcard’ function inside the ‘card.js’ component

Run the project through your terminal with npm run dev

The project by default runs on port 3000. In your browser use http://localhost/3000.

project first instance

With our page set up, we need to fill it with the required commands.

  • We start with adding styles to our compoments . Edit your card.js component to add the following
  • The above code adds useEffect hook to to manage the side effects of our functional components.

Go to the ‘styles/global.css’ directory and paste the following, ensuring better styling of our components.

We can begin working on our ‘Build card’ function

Start by declaring the variables involved. Add the following codes inside your BuildCard function

code guide:

  • line 1: variable to store received card link from backend
  • line2:  variable to store received profile URL from backend
  • line 3: variable to store card QR code link
  • line 4: creates a reference to our element that will contain profile information
  • line 5: makes reference to our element that will have our card
  • line 9: Constant variable to set our QR link text
  • line 10: Constant variable to set our username
  • line 11: Constant variable to set our user email
  • line 12: Constant variable to set our business/company name
  • line 13: Constant variable to set our phone number
  • line 14: Constant variable to set our location
  • line 15: Constant variable to set our user/ business
  • line 16: Constant variable to setup logo
  • line17: Constant variable to setup userProfile
  • line18: useful to take final user profile details and store them as image for upload
  • line 19: useful to take final user last card and keep it as the image for upload

With our variables ready, we create functions that use them for our card.

below your variables include the following functions which will set up our user/company logo

code guide:

  • line 1: Create an async function called ‘handleFileInputChange’
  • line 2: Create a constant variable that accepts user image file input
  • line 3: Abort if there were no files selected
  • line 4:(optional) view selected file in browser terminal console
  • line 7-12: for each file received, pass it through the readFile function to encode it before the encoded file is set to the value of the logo State.
  • line 13: function called ‘readFile’ that receives the file passed in from line 18
  • line 14: the function returns a promise whose successful call completions are indicated by the resolve function and errors shown by reject function call.
  • line 15: Create a file reader which we use to read the contents of the uploaded files
  • line 17-19:  Create an event handler executable when the load event is fired.
  • line 21-23: Receives an event object as a parameter and allows error to be accessed from the file reader object.
  • line 25: this method reads the contents of the FIle and triggers the readystate to become DONE to trigger loadend.

The following step is to set up functions to receive our uploaded information and store it in respecteve state

code guide:

  • line 1-3: set state of user name
  • line 4-6: set state of email
  • line 7-9: set state of business or company name
  • line 10-12: set state of user phone number
  • line 13-15: set state of business/company location
  • line 16-19: set state of company website

Below the above codes add the following functions

code guide :

line 1-12: We will use this function to trigger onClick events to show hidden containers. An id will specify each container.

line13: here, we take a screenshot of all profile information and pass it to the upload Function. If the screenshot, stored in the ‘userprofile’ state is not received the function is aborted.

Create your function to upload user profile

  • line 1: Create a function called ‘uploadProfile ‘ that will receive the encoded file passed in line 123.
  • line 2:(Optional) log the passed image vile in terminal
  • line 3-18: Use the try catch statement to fetch the backend URL through a POST method and pass the received file as a json object body. The content header is just information of the type of returned data. The method then returns a response containing the link cloudinary uses to store our uploaded file. The data is mapped and pushed into the URLs array variable from line 2 and passed into the ‘toStringUrl’ function. The try…catch method also specifies a response should an exception be thrown

code guide:

  • line 1:Function toStringUrl that accepts response passes from uploadProfile function.
  • line 2: (Optional) display received object in terminal
  • line 3: converts the array object to String and assign it to variable text.
  • line6-10:display string text in terminal if text is not received otherwise set the string to the QrCodeText state from line 9.

Add the following function to capture and upload the generated card.

code guide:

  • line 2-5: Create a function called getCard that captures our generated card using card reference from line 5, referencing our card container and passing it to the Upload Card function.
  • line 6: uploadCard function accents the captured card
  • line 7:(optional): verify the received card from the terminal.
  • line 8-23: Use the try catch statement to fetching the back end URL through a POST method and passing the received file as a json object body. The method then returns a response containing the link cloudinary uses to store our card. The data is mapped and pushed into the cardurl array from line 2 and passed into the setLink state. The try…catch method also specifies a response should an exception be thrown.

At this point, we design our page in the return function. On the first page, the user will get to select a template card to be used to fill in respective details. To design this page

  • Go to ‘pages/index’ directory , delete everything and paste the following codes;
  • line1-5: Include required imports
  • line 8: Begin root function called ‘Home’
  • line 10-15: Function when a user selects the first card. The function will omit the rest of the components except the one the user requires.
  • line16-21: Omits all oponent except the ones required to the second card once the function is fired
  • line 24-28: Include project Headers
  • line 30-93: Design a row containing two columns. In each column is a card template which the user chooses when they begin. This template will then be filled with user/company information. All the omitted profile details will be accessible through the QRCode, integrating all omitted profile information from Cloudinary. Line 88-93 shows two hidden 2divs. Using the Onclick events in respective buttons, The components will activate depending on which template the user selects.
  • Run the project using npm run dev to view current progress
select card

With this set up, head back to your ‘componets/getcard.js’ in the return function and paste the following

In the return function, we design a UI based on a template required by the user. The function above is based on the first template. Once the template is selected the user gets a list of forms to fill for their profile.

**NOTE** Card backgrounds are edited from the css file in the ‘styles/global.css’ directory

As a developer, you can add as many forms as you want for your target users. Any information omitted from the card will be viewed through the Cloudinary website

fill forms

Once the forms are filled proceed by clicking the create profile button. You should see a preview of your card. At this point, the input details are still editable

preview card

Proceed by clicking preview. You should see the generated preview of your profile. You can still edit any information at this point. Ensure to complete your profile before you click to generate the QR code.

Once the qr is generated you will be able to use it to receive a link containing all the generated profile information. The activation also pops up the final card image

Clicking the generate card button stores the final card image URL in the ‘Get_Card’ option. Click to receive its image file and download it via your browser.

**NOTE**

More designed cards will be in the images directory from the Github repo. For every template, you can add required codes, including adding as many forms as possible respective to your client’s needs.

Github Repo: https://github.com/apeli23/businessCard.git

This concludes our project.

Happy coding!

0 Shares:
You May Also Like