DEV Community

Abhishek Maurya
Abhishek Maurya

Posted on

QR-Genie: Building a Single-Purpose QR Code Tool with Kiro AI

#ai #webdev #showdev

✨ QR-Genie: Building a Single-Purpose QR Code Tool with Kiro AI

AI for Bharat Hackathon - Week 1: Micro-Tools Submission

📌 The Problem

QR codes are everywhere — restaurant menus, payment apps, event tickets, WiFi sharing. Yet, most QR tools online are either:

  • Cluttered with ads and unnecessary features
  • Slow and require multiple steps
  • Ugly with outdated UI designs
  • Limited — generate only, no scanning

I needed a single-purpose micro-tool that does ONE thing elegantly: Generate and scan QR codes instantly with a clean, modern interface.

💡 The Solution: QR-Genie

QR-Genie is a lightweight, beautiful web app that solves this tiny but annoying problem:

✅ Generate QR codes from any text or URL instantly

✅ Scan QR codes using your device camera

✅ Download as PNG with one click

✅ Copy to clipboard for quick sharing

✅ No ads, no clutter — just pure functionality

Live Features

Feature Description
Generate Convert any text/URL to QR code
Scan Use camera to decode QR codes
Download Save QR as PNG image
Copy One-click clipboard copy
Responsive Works on desktop & mobile

🤖 How Kiro Accelerated Development

Kiro is an AI-powered development assistant that dramatically sped up my workflow. Here's how:

1. Project Scaffolding with Specs

Kiro helped me define clear requirements and design specs upfront in the /.kiro directory:

/.kiro
├── specs/
│   └── qr-genie/
│       ├── requirements.md    # Feature requirements
│       ├── design.md          # UI/UX specifications
│       └── tasks.md           # Development tasks
├── context.json               # Project context
└── prompts.txt                # AI prompts used
Enter fullscreen mode Exit fullscreen mode

2. Rapid Component Generation

I described what I wanted, and Kiro generated the complete React components:

My prompt:

"Create a QR code generator component with textarea input, generate button, and preview area"

Kiro's output: Complete Generator.jsx with state management, error handling, and download functionality.

// Generated by Kiro - Generator.jsx
import { useState } from 'react'
import QRCode from 'qrcode'

function Generator() {
  const [text, setText] = useState('https://example.com')
  const [dataUrl, setDataUrl] = useState('')

  const generate = async () => {
    if (!text.trim()) return
    const url = await QRCode.toDataURL(text, { margin: 1, width: 400 })
    setDataUrl(url)
  }

  const download = () => {
    const a = document.createElement('a')
    a.href = dataUrl
    a.download = 'qr-genie.png'
    a.click()
  }

  return (
    <div className="card-glass p-6">
      <h2 className="text-2xl font-bold text-[#31694E] mb-4">Generate QR Code</h2>
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Enter text or URL"
        className="w-full h-32 p-3 rounded-lg bg-white/15 text-[#31694E]"
      />
      <button onClick={generate} className="button-primary">Generate</button>
      {dataUrl && (
        <>
          <img src={dataUrl} alt="QR Code" className="rounded-lg" />
          <button onClick={download} className="button-primary">Download PNG</button>
        </>
      )}
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

3. UI Theme Customization

When I wanted to change from the default blue-purple theme to a nature-inspired palette, I simply asked Kiro:

My prompt:

"Update the UI to use this color palette: #F0E491, #BBC863, #658C58, #31694E with glassmorphism effects"

Kiro updated:

  • tailwind.config.cjs — Added custom color palette
  • index.css — New gradient background, button styles, glassmorphism cards
  • All components — Updated text colors and borders

4. Camera Scanner Implementation

The camera-based QR scanner was complex, but Kiro handled it:

// Generated by Kiro - Scanner.jsx
import { Html5Qrcode } from 'html5-qrcode'

const startScanner = async () => {
  const scanner = new Html5Qrcode('html5qr-app')

  await scanner.start(
    cameraId,
    { fps: 10, qrbox: 250 },
    (decodedText) => {
      setResult(decodedText)
      scanner.stop()
    },
    () => {} // Ignore scan errors
  )
}
Enter fullscreen mode Exit fullscreen mode

5. Test Generation

Kiro also generated test files for both components:

// Generator.test.jsx - Auto-generated
describe('Generator Component', () => {
  it('renders input textarea', () => { ... })
  it('generates QR code on button click', () => { ... })
  it('downloads QR as PNG', () => { ... })
})
Enter fullscreen mode Exit fullscreen mode

🎨 Design: Nature-Inspired Glassmorphism

Color Palette

Color Hex Usage
Light Yellow #F0E491 Background gradient start
Olive Green #BBC863 Button gradients
Natural Green #658C58 Body text, borders
Forest Green #31694E Titles, headings

Glassmorphism CSS 

.card-glass {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(101, 140, 88, 0.35);
  box-shadow: 0 8px 32px rgba(49, 105, 78, 0.15);
  border-radius: 1rem;
}

.button-primary {
  background: linear-gradient(135deg, #BBC863 0%, #658C58 100%);
  border: 1px solid rgba(101, 140, 88, 0.5);
  color: white;
}

.button-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(101, 140, 88, 0.4);
}
Enter fullscreen mode Exit fullscreen mode

Background Gradient 

body {
  background: linear-gradient(
    135deg,
    #F0E491 0%,
    #BBC863 35%,
    #658C58 65%,
    #31694E 100%
  );
}
Enter fullscreen mode Exit fullscreen mode

🛠️ Tech Stack

Technology Purpose
React UI Components
Vite Build tool & dev server
TailwindCSS Utility-first styling
qrcode QR code generation
html5-qrcode Camera-based scanning
Kiro AI Development acceleration

📁 Project Structure 

qr-genie/
├── .kiro/                    # Kiro AI specs & context
│   ├── specs/qr-genie/
│   │   ├── requirements.md
│   │   ├── design.md
│   │   └── tasks.md
│   ├── context.json
│   └── prompts.txt
├── src/
│   ├── components/
│   │   ├── Generator.jsx     # QR generator
│   │   ├── Generator.test.jsx
│   │   ├── Scanner.jsx       # QR scanner
│   │   └── Scanner.test.jsx
│   ├── App.jsx               # Main app
│   ├── index.css             # Styles
│   └── main.jsx              # Entry point
├── tailwind.config.cjs
├── vite.config.js
└── package.json
Enter fullscreen mode Exit fullscreen mode

🚀 Getting Started 

# Clone the repository
git clone https://github.com/abhishek-maurya576/qr-genie.git

# Navigate to project
cd qr-genie

# Install dependencies
npm install

# Start development server
npm run dev
Enter fullscreen mode Exit fullscreen mode

⏱️ Development Timeline

Task Time with Kiro Traditional Estimate
Project setup 5 min 20 min
Generator component 10 min 45 min
Scanner component 15 min 60 min
UI theming 10 min 40 min
Testing 5 min 30 min
Total ~45 min ~3 hours

Kiro reduced development time by ~75%!

🎯 Key Takeaways

  1. Kiro specs-driven development — Defining requirements upfront in /.kiro keeps the project focused
  2. AI-assisted coding — Kiro generates production-ready code, not just boilerplate
  3. Rapid iteration — Changing the entire color theme took one prompt
  4. Single-purpose tools win — Focused micro-tools are more useful than bloated alternatives

🔗 Submission Links

👨‍💻 About Me

Abhishek Maurya

Built with ❤️ for the AI for Bharat Hackathon - Week 1: Micro-Tools

This project demonstrates how Kiro AI can accelerate development of single-purpose web tools while maintaining code quality and modern design standards.

#AIforBharat #Kiro #React #TailwindCSS #WebDev #MicroTools

Top comments (0)