In the digital age, sharing contact information should be quick and effortless. My brother faced a challenge in efficiently exchanging his contact details with clients. Traditional business cards, while effective, had their limitations, and alternative solutions like online QR code generators often required payment or sign-up, which was inconvenient. This led me to develop a free, easy-to-use contact QR code generator. In this blog, I’ll share how you can build your own with React and deploy it for free using GitHub Pages.

Setting Up the Project

Prerequisites

• Basic knowledge of React and JavaScript
• Node.js and npm installed on your computer
• A GitHub account

Step 1: Creating the React Application

Start by creating a new React application using Create React App:

npx create-react-app contact-qr-code-generator
cd contact-qr-code-generator

Step 2: Adding TailwindCSS

To make our UI look good effortlessly, we’ll use TailwindCSS:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

In your tailwind.config.js, configure the purge option:

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  // ... other configurations
};

Include Tailwind in your CSS (in src/index.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

Building the Application

The ContactForm Component

This component (ContactForm.js) is responsible for rendering the form where users can input their contact details.

import React, { useState } from "react";

function ContactForm({ onSubmit }) {
  // ... useState and handleChange definitions
  // ... Form JSX with TailwindCSS classes
}

export default ContactForm;

The QRCodeGenerator Component

In QRCodeGenerator.js, we handle the QR code generation and display using qrcode.react library.

import React, { useState } from "react";
import QRCode from "qrcode.react";
import ContactForm from "./ContactForm";

function QRCodeGenerator() {
  // ... useState, handleSubmit, and createVCard definitions
  // ... Component JSX
}

export default QRCodeGenerator;

Integrating the Components in App.js

Finally, in App.js, we incorporate the QRCodeGenerator component.

import React from "react";
import QRCodeGenerator from "./QRCodeGenerator";

function App() {
  // ... JSX for App
}

export default App;

Deploying to GitHub Pages

Step 1: Install gh-pages

npm install gh-pages --save-dev

Step 2: Update package.json

Add homepage and deployment scripts:

{
  "homepage": "https://<username>.github.io/<repo-name>",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
    // ...  other scripts...
  }
}

Step 3: Deploy Your Application

Run the deployment script:

npm run deploy

Step 4: Configure GitHub Repository Settings

In your GitHub repo settings, set the GitHub Pages source to the gh-pages branch.

Conclusion

This project was a unique journey for me, especially as someone who is not fluent in ReactJS. Despite this, I dabble in React and can craft decent code when needed. For this tutorial, I leaned heavily on online tutorials and the innovative assistance of GitHub Copilot, which significantly streamlined the development process.

The creation of this contact QR code generator not only solved a practical issue but also provided me with valuable insights into the power of modern web technologies like React and TailwindCSS. It’s a testament to how accessible technology has become, allowing even those not deeply versed in a particular framework to create something useful and impactful.

Now, the application is live, offering a free and easy-to-use service. It’s a simple yet effective solution, transforming the sharing of contact information into nothing more than the quick scan of a QR code. Through this project, I’ve experienced firsthand how technology can be harnessed to create practical solutions that streamline everyday tasks.

Link to the Application

👉 Click here for the Application