DEV Community

Cover image for How I Built a Fully Client-Side QR Code Generator (And Why I Avoided a Backend)
Shahed Ahmed
Shahed Ahmed

Posted on

How I Built a Fully Client-Side QR Code Generator (And Why I Avoided a Backend)

#webdev #javascript #privacy #showdev

The Problem with Most QR Generators

I was building a simple tool for my own use and needed to generate a QR code for a WiFi network. I tried the popular free tools, and they all did the same thing:

  1. They routed the QR code through their own server.
  2. They set an expiry date (7 days, 30 days, etc.).
  3. They charged you to keep the QR code alive after that.

I was frustrated. A QR code is just a pattern of black and white squares that encodes a URL. Why does it need to expire?

That's when I decided to build my own.

The Goal: A Truly Private, Client-Side Tool

My goal was simple: create a QR code generator where:

  • The QR code points directly to the content (no redirect server).
  • The tool runs entirely in the user's browser.
  • There is no backend, no database, and no tracking.

This meant the QR code would never expire. It would work forever, even if my site went offline.

The Tech Stack: Keeping It Simple

I chose to build the tool with plain HTML, CSS, and JavaScript.

I didn't need React, Next.js, or a server. The entire logic for generating the QR code could run in the browser. This kept the site incredibly fast, and it meant I could host it for free on Cloudflare Pages.

The core of the tool uses a small JavaScript library to generate the QR code image, but everything elseโ€”the UI, the form logic, and the history featureโ€”is built from scratch.

The Hardest Part: No Backend

The biggest challenge was figuring out how to handle features without a server.

For example, I wanted users to be able to see a history of the QR codes they had generated. But I didn't want to store that data on a server. The solution was to use the browser's localStorage API. This means the history is saved locally on the user's device, and it's never sent anywhere. It's private by design.

What I Learned

Building this tool taught me a valuable lesson: you don't always need a complex framework or a backend.

For many simple tools, the browser is a powerful enough platform on its own. By removing the server, I also removed the need for user accounts, privacy policies about data storage, and a lot of complexity.

It made me think about how many other tools could be built this wayโ€”fast, free, and private.

Try It Out

The tool I built is called EvoTechTool. It's a free, client-side QR code generator with support for 11 types of content (URL, WiFi, vCard, etc.). Everything runs in your browser.

You can check it out here: https://evotechtool.pages.dev

I'd love to hear your thoughts on building serverless, client-side tools. Do you think this approach is the future for simple utilities?

Top comments (0)