project.case-study

QR Forge

免費 QR Code 產生器與解碼器

免費線上 QR Code 產生與解碼工具，純前端 React + Vite + Tailwind v3。支援自訂點陣樣式、顏色、容錯等級與中央 Logo，可輸出 SVG / PNG。部署於 Cloudflare Workers。

ReactTypeScriptViteTailwind v3Cloudflare Workers
前往作品 →GitHub →

01 問題

坊間 QR Code 工具多含付費限制、無法自訂角塊或點陣樣式，亦缺乏內建解碼；行銷與活動製作物常見的中央 Logo、SVG 匯出與行動端原生分享也少被滿足。

02 解法

React + TypeScript + Vite + Tailwind v3 打造純前端工具，使用瀏覽器 Canvas 解碼與重繪；自製 useTheme + ThemeToggle 支援深淺色，行動端用 Web Share API 提供原生分享，並用 React Portal 解 modal 在 backdrop-filter 下的堆疊問題。部署於 Cloudflare Workers。

03 成果

上線於 https://qr.zinzan.info，0 後端、繁體中文 UI、SEO meta 完整，並開源於 GitHub。

04 功能特色

  • ▸ QR Code 產生與圖片解碼
  • ▸ 自訂點陣 / 角塊樣式 / 顏色 / 容錯等級
  • ▸ 可置入中央 Logo
  • ▸ SVG / PNG 匯出，行動端走 Web Share API
  • ▸ 深淺色切換（自製 useTheme hook）
  • ▸ 44px touch target + 響應式 UI