Dynamic QRIS Generator
QRIS Dynamic Generator Interactive QRIS utility built with React, TypeScript, and Vite. Paste or scan a static QRIS payload, add transaction details (amount, fees, merchant info), and the app recalculates the EMV payload plus a fresh CRC checksum before rendering a downloadable QR code. Features - Drag-and-drop or image upload with live QR decoding via `qr-scanner` - Manual input for amounts, optional service fees (fixed or percentage), and merchant metadata - Automatic CRC16 recalculation to keep generated QRIS valid - One-click copy/download of the generated dynamic QR payload and QR image - Light/dark theme toggle with preference persisted to `localStorage` - Password-gated merchant metadata editing using `VITE_MERCHANT_PASSWORD` Getting Started Prerequisites - Node.js 18+ - npm 9+ Installation Development Server Vite prints a local URL; open it in your browser to interact with the app. Production Build Serve the generated assets in `dist/` (for example via `npm run preview`). Environment Variables The admin unlock modal reads `VITE_MERCHANT_PASSWORD`. Set it in a `.env` file at the project root: Tech Stack - React 18 with TypeScript - Vite 5 - Tailwind CSS 3 - `qr-scanner` for decoding QR images - `qrcode` for generating QR bitmaps Project Structure (selected) - `src/main.tsx` – Vite entry that mounts ` ` and wires the theme provider - `src/App.tsx` – Main UI and QRIS conversion logic - `src/contexts/ThemeContext.tsx` – Theme state, toggling, and persistence - `src/components/ThemeToggle.tsx` – Sun/moon toggle button component