โ† Back to Projects

QR Code Generator

Livetool

A lightweight, fast QR code generator that converts any text or URL into a scannable QR code instantly, with dark mode support and persistent theme preference.

๐ŸŒ Live Site๐Ÿ“ GitHub RepoBy Kyle Parsotan ยท 2024

Problem

Generating QR codes typically requires navigating third-party sites filled with ads and friction. A self-hosted, distraction-free tool with customization options fills that gap.

Solution

Built a minimal Vite-powered static app that uses a QR generation library to render codes on input change. Dark mode is toggled via CSS class switching and the user's preference is saved to localStorage, so it persists across sessions.

Tech Stack

Frontend
HTML5CSS3JavaScript (ES6)Vite
DevOps
Vercel
Other
QRCode.js library

Architecture

Frontend

Vite bundles the static app for fast HMR in development and an optimized production build. QRCode.js listens to the text input and re-renders the QR canvas on every keystroke. Dark mode is applied by toggling a `dark` class on the <body> element, driven by a button click handler that also writes the preference to localStorage. On page load, the stored theme is read and applied before first paint to prevent flash.

Backend

None.

Database

None โ€” localStorage used for theme persistence only.

Features

Future Improvements

By Kyle Parsotan ยท 2024

Get to Work

Contact me for freelance work, full-time opportunities! I'm always open to discussing new projects, creative ideas, or opportunities to be part of your visions.