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)
- 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
- Basic knowledge in react and java script.
- 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.
- In your browser use the following link https://nodejs.org/en/download/ and select the node version respective to your operating system.
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.
in your browser, use the link http://localhost/3000 to access your webpage. You should see the following
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.
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.
- 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.
- 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
To confirm the api call head to your terminal to view the
console.log('api works') command
We are ready to build our back-end command. However, we also need our api parameters to integrate our back end
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.
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
- 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.
Select options in the settings page
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.
We now include cloudinary to our post function and proceed with our post function.
- 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!
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.
Install the following dependencies
- @material ui/core –
npm install @material-ui/core
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
- 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.
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.
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
- 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
- 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
- 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
- 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.
- 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 devto view current progress
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
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
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.
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.