QR Express

Make a QR code, adjust its appearance and download it as PNG, SVG or PDF.

What it does

The app uses React for the settings and preview, while export logic converts the QR's SVG to the requested file format. Recent URLs stay in localStorage.

Decisions

Render the preview as SVG: `qrcode.react` produces an SVG from the URL, colors and error correction level. The preview updates with React state.
Use canvas for PNG and PDF: PNG and PDF exports draw the SVG to a canvas. jsPDF embeds the resulting image in a PDF.
Keep history in the browser: The history hook stores the 10 most recent URL entries locally; it does not require an account.

Screens

URL history sidebar with quick actions — Recently saved URLs.

QR Express customization panel — QR colors and error correction settings.

Mobile responsive view of QR Express — QR Express at a narrow screen width.

Exporting QR code as PNG, SVG, or PDF — File formats and export settings.

Full notes

More on the implementation and challenges.

Live preview and settings

The preview is an SVG generated by `qrcode.react`. Color and error correction changes flow through React state and update the displayed code.

Three download formats

SVG export serializes the displayed SVG. PNG and PDF exports draw that SVG on a canvas; jsPDF then places the PNG into a PDF.

Logo upload for raster exports

An uploaded image can be drawn over the center of the canvas used for PNG and PDF. The current SVG download does not incorporate that separate canvas logo.

Share and revisit URLs

Users can copy or share the entered URL. A history dropdown reads up to 10 recently saved entries from localStorage.

SVG first, then canvas when needed

The UI renders QRCodeSVG. SVG export serializes its markup; PNG and PDF take a canvas path with a selected pixel size.

Persistent UI hooks

`useQRHistory` reads and writes localStorage, retaining the 10 latest additions. `useDarkMode` manages theme selection.

Component tests

Vitest and React Testing Library tests cover the QR display, settings, sharing controls and custom hooks.

Keep export formats consistent

Problem: SVG, PNG and PDF need different download mechanisms.

Solution: The QR is rendered as SVG, then serialized directly for SVG downloads or drawn onto canvas for raster output and jsPDF.

Keep the history small

Problem: A history list can grow without bound if every generated URL is retained.

Solution: The hook prepends recent entries and limits storage to the latest 10. It does not deduplicate identical URLs.

Handle a custom logo

Problem: Raster exports need to include an uploaded logo without blocking downloads if the image cannot load.

Solution: The canvas path draws the logo when possible and continues the download if its image load fails.

Next project

Tactic Tac Toe

A two-player tic-tac-toe game with move history and win detection.

Working on something similar? Get in touch.

What it does

Decisions

Screens

Full notes

Features4 items

Technical notes3 items

Problems and fixes3 items

Next project

Tactic Tac Toe