How to Build a QR Code Generator Service in Go: A Step-by-Step Guide

QR codes have become an essential tool for bridging the physical and digital worlds. From enabling quick logins on smart TVs to sharing promotional content on printed cards, QR codes are versatile and easy to use. In this blog post, I’ll walk you through how to build your own QR code generator service using Go. We’ll create a simple web application that takes a URL as input, generates a QR code, and displays it to the user. By the end of this guide, you’ll have a fully functional QR code service that you can deploy and customize for your needs.

What We’ll Build

Our QR code generator will:

Provide a simple web interface for users to input a URL.
Generate a QR code for the given URL.
Display the QR code along with a direct link to the image for easy sharing or downloading.
Be lightweight and easy to deploy.

Here’s what the final project structure looks like:

.
├── README.md
├── cmd
│   └── server
│       └── main.go
├── go.mod
├── go.sum
└── tmpl
    ├── index.html
    └── show.html

Prerequisites

Before we start, ensure you have the following installed:

Go 1.22.0 or higher: Download Go
A basic understanding of Go and web development concepts (HTTP, templates, etc.)
A text editor (e.g., VS Code)

We’ll also use the following Go package for QR code generation:

github.com/skip2/go-qrcode

Step 1: Set Up the Project

Let’s start by setting up the project directory and initializing a new Go module.

Create a new directory for your project and navigate into it:
```
mkdir qrcode-bucko
cd qrcode-bucko
```

Initialize a Go module:

go mod init github.com/yourusername/qrcode-bucko

Install the required dependency for QR code generation:
```
go get github.com/skip2/go-qrcode
```

Step 2: Create the Project Structure

Create the following directory structure inside your project folder:

├── cmd
│   └── server
│       └── main.go
├── tmpl
│   ├── index.html
│   └── show.html
├── go.mod
└── go.sum

cmd/server/main.go: The main application code.
tmpl/index.html: The homepage template where users input a URL.
tmpl/show.html: The template to display the generated QR code.

Step 3: Create the HTML Templates

Let’s create the HTML templates for the frontend of our application. These templates will provide a clean and modern UI for users to interact with.

`tmpl/index.html`

This template provides a form where users can input a URL to generate a QR code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code Generator</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            width: 100%;
            max-width: 500px;
            text-align: center;
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 1.5rem;
            font-weight: 600;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
        }

        label {
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: block;
            text-align: left;
        }

        input[type="text"] {
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            width: 100%;
            box-sizing: border-box;
            transition: border-color 0.3s;
        }

        input[type="text"]:focus {
            border-color: #3498db;
            outline: none;
        }

        input[type="submit"] {
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        input[type="submit"]:hover {
            background-color: #2980b9;
        }

        .qr-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: #3498db;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="qr-icon">📱</div>
        <h1>QR Code Generator</h1>
        <form action="/qr/create" method="post">
            <div>
                <label for="url">Enter URL to generate QR code</label>
                <input type="text" id="url" name="url" placeholder="https://example.com" required>
            </div>
            <input type="submit" value="Generate QR Code">
        </form>
    </div>
</body>
</html>

`tmpl/show.html`

This template displays the generated QR code along with the original URL and a direct link to the QR code image.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            width: 100%;
            max-width: 500px;
            text-align: center;
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 1.5rem;
            font-weight: 600;
        }

        p {
            color: #666;
            margin: 0.5rem 0;
        }

        a {
            color: #3498db;
            text-decoration: none;
            transition: color 0.3s;
        }

        a:hover {
            color: #2980b9;
        }

        img {
            max-width: 300px;
            margin: 2rem 0;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .qr-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: #3498db;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="qr-icon">📱</div>
        <h1>Your QR Code is Ready!</h1>
        <p>Original URL: <a href="{{.URL}}" target="_blank">{{.URL}}</a></p>
        <img src="{{.QRImageURL}}" alt="QR Code">
        <p>Direct link to QR image: <a href="{{.QRImageURL}}" target="_blank">View Image</a></p>
    </div>
</body>
</html>

Both templates use the Poppins font from Google Fonts and include some custom CSS for a clean, modern look.

Step 4: Write the Go Backend Code

Now let’s write the backend code to handle URL input, generate QR codes, and serve the templates.

Create a file cmd/server/main.go with the following content:

package main

import (
	"encoding/base64"
	"fmt"
	"net/http"
	"os"
	"text/template"

	qrcode "github.com/skip2/go-qrcode"
)

var (
	baseURL = os.Getenv("BASE_URL")
	port    = os.Getenv("PORT")

	showTmpl *template.Template
)

func init() {
	if baseURL == "" {
		baseURL = "http://localhost:8888"
	}
	if port == "" {
		port = "8888"
	}

	tmpl, err := template.ParseFiles("tmpl/show.html")
	if err != nil {
		panic(err)
	}

	showTmpl = tmpl
}

func main() {
	// Handle form submission to create QR code
	http.HandleFunc("/qr/create", func(w http.ResponseWriter, r *http.Request) {
		// Get the URL from the POST form
		embedURL := r.PostFormValue("url")
		// URL-safe base64 encode the URL
		embedURLB64 := base64.URLEncoding.EncodeToString([]byte(embedURL))

		// Redirect to the show page
		http.Redirect(w, r, fmt.Sprintf("/qr/show/%s", embedURLB64), http.StatusFound)
	})

	// Serve the QR code image
	http.HandleFunc("/qr/view/", func(w http.ResponseWriter, r *http.Request) {
		// Get the URL from the path
		embedURLB64 := r.URL.Path[len("/qr/view/"):]
		// URL-safe base64 decode the URL
		embedURL, err := base64.URLEncoding.DecodeString(embedURLB64)
		if err != nil {
			http.Error(w, err.Error(), http.StatusBadRequest)
			return
		}

		// Create the QR code
		qr, err := qrcode.Encode(string(embedURL), qrcode.Low, 256)
		if err != nil {
			http.Error(w, err.Error(), http.StatusInternalServerError)
			return
		}

		// Write the QR code to the response
		w.Header().Set("Content-Type", "image/png")
		_, err = w.Write(qr)
		if err != nil {
			http.Error(w, err.Error(), http.StatusInternalServerError)
		}
	})

	// Show the generated QR code
	http.HandleFunc("/qr/show/", func(w http.ResponseWriter, r *http.Request) {
		// Get the URL from the path
		embedURLB64 := r.URL.Path[len("/qr/show/"):]
		// URL-safe base64 decode the URL
		embedURL, err := base64.URLEncoding.DecodeString(embedURLB64)
		if err != nil {
			http.Error(w, err.Error(), http.StatusBadRequest)
			return
		}

		// Write the HTML response
		w.Header().Set("Content-Type", "text/html")
		qrImageURL := fmt.Sprintf("%s/qr/view/%s", baseURL, embedURLB64)
		// Read and serve the template file
		data := struct {
			URL        string
			QRImageURL string
		}{
			URL:        string(embedURL),
			QRImageURL: qrImageURL,
		}

		err = showTmpl.Execute(w, data)
		if err != nil {
			http.Error(w, err.Error(), http.StatusInternalServerError)
			return
		}
	})

	// Serve the homepage
	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		http.ServeFile(w, r, "tmpl/index.html")
	})

	// Start the server
	err := http.ListenAndServe(":"+port, nil)
	if err != nil {
		panic(err)
	}
}

Code Explanation

Environment Variables: The BASE_URL and PORT environment variables are used to configure the server. Defaults are provided if they’re not set (http://localhost:8888 and 8888).
Template Initialization: The show.html template is loaded during initialization using template.ParseFiles.
Endpoints:
- /: Serves the homepage (index.html).
- /qr/create: Handles the form submission, base64-encodes the URL, and redirects to the show page.
- /qr/show/<base64-url>: Displays the generated QR code using the show.html template.
- /qr/view/<base64-url>: Generates and serves the raw QR code image as a PNG.
QR Code Generation: The github.com/skip2/go-qrcode package is used to generate QR codes with the qrcode.Encode function.

Step 5: Run the Application

Now that we’ve written the code and templates, let’s run the application.

From the project root, run the following command:
```
go run cmd/server/main.go
```
Open your browser and navigate to http://localhost:8888.

You should see a simple form where you can input a URL. Enter a URL (e.g., https://example.com), click “Generate QR Code,” and you’ll be redirected to a page displaying the QR code.

Step 6: Test the Application

On the homepage (http://localhost:8888), enter a URL like https://example.com.
Click “Generate QR Code”.
You should see a page with the generated QR code, the original URL, and a direct link to the QR code image.
Scan the QR code with your smartphone to verify it redirects to the correct URL.

Step 7: Deploy the Application (Optional)

To deploy the application, you can use a platform like Heroku, Render, or a VPS. Here’s a quick guide for deploying on a VPS:

Build the binary for your target platform:

GOOS=linux GOARCH=amd64 go build -o qrcode-bucko cmd/server/main.go

Copy the binary and the tmpl directory to your server.

Set the environment variables:

export PORT=8080
export BASE_URL=https://yourdomain.com

Run the application:
```
./qrcode-bucko
```

Alternatively, you can use a process manager like systemd or pm2 to keep the application running.

Customization Ideas

Here are some ideas to extend this project:

Add Error Correction Levels: Allow users to choose the QR code’s error correction level (Low, Medium, High).
Custom Styling: Add options to customize the QR code’s colors or add a logo in the center.
Analytics: Track how many times a QR code is scanned.
API Endpoint: Add an API endpoint to generate QR codes programmatically.

Conclusion

In this guide, we built a simple QR code generator service using Go. The application provides a clean UI for users to input URLs, generates QR codes using the skip2/go-qrcode library, and displays them in a user-friendly format. Whether you’re using QR codes for TV logins, business cards, or promotions, this service is a great starting point.

Feel free to clone the repository from GitHub and experiment with it. You can also check out a live demo at qrcode.kfelter.com.

About the Author

I’m Kyle Felter, a developer passionate about building simple, effective tools with Go. Follow me on LinkedIn for more Go content and tutorials.

Happy coding! 🚀

What We’ll Build#

Prerequisites#

Step 1: Set Up the Project#

Step 2: Create the Project Structure#

Step 3: Create the HTML Templates#

tmpl/index.html#

tmpl/show.html#

Step 4: Write the Go Backend Code#

Code Explanation#

Step 5: Run the Application#

Step 6: Test the Application#

Step 7: Deploy the Application (Optional)#

Customization Ideas#

Conclusion#

About the Author#