DEV Community: Abhishek Maurya

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

Abhishek Maurya — Sun, 30 Nov 2025 12:21:31 +0000

✨ 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

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>
  )
}

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
  )
}

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', () => { ... })
})

🎨 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);
}

Background Gradient

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

🛠️ 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

🚀 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

⏱️ 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

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

🔗 Submission Links

GitHub Repository: github.com/abhishek-maurya576/qr-genie
Live Demo: qr-genie-henna.vercel.app

👨‍💻 About Me

Abhishek Maurya

GitHub: github.com/abhishek-maurya576
LinkedIn: linkedin.com/in/abhishekm9118

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

AI for Bharat Workshop 1 Lab Report

Abhishek Maurya — Thu, 27 Nov 2025 14:22:24 +0000

Building Multiple AI-Powered Apps Using PartyRock: Chatbots, Summarizers, Document Analysis & AI Art Generator

PartyRock has completely changed the way we build AI applications. Without writing any backend code, you can create powerful tools such as chatbots, document analyzers, summarizers, and even AI-art generators. In this blog, I am sharing the complete overview of the AI apps I built using PartyRock:

Geek Chatbot
Content Summarizer
Document Chat
ArtGenius: AI Painting Creator

These apps were created as part of my learning journey and experimentation with PartyRock’s no-code AI builder.

1. What is PartyRock?

PartyRock is a no-code AI playground where you can:

Build AI-powered apps
Use input/output blocks
Generate images
Analyze data
Create chat-style interfaces
Combine multiple workflows

Everything is drag-and-drop, making it ideal for rapid prototyping.

2. App 1 — Geek Chatbot (AI Explainer Bot)

The Geek Chatbot is designed to answer technical questions in a friendly, enthusiastic way.

link: Geek Chatbot

Features:

Explain complex tech topics (AI, ML, Deep Learning, RNNs, CNNs, etc.)
Generate diagrams using the image block
Provide bullet-point breakdowns
Chat-style interface for conversational learning

How it Works:

User enters a technical topic.
The chatbot explains the concept in a friendly tone.
A second block generates a visual diagram (example: RNN architecture).
A summary block highlights the main points.

Example Interaction

User: “What is RNN in deep learning?”

Geek Chatbot:

Gives enthusiastic explanation
Breaks it down into bullet points
Shows sequential data examples
Generates an RNN diagram image

This app is perfect for students who want a fun, interactive AI tutor.

3. App 2 — Content Summarizer

The Content Summarizer converts long text into short, readable summaries.

Link: Content Summarizer

Features:

Detailed summary section
One-line summary
Key takeaways
Simple textbox + output blocks
Clean UI for quick comprehension

How it Works:

Paste any long content.
The summarizer block processes the text.
Three outputs are generated:
- Detailed summary
- One-line summary
- Key bullet points

This is ideal for students, bloggers, researchers, and professionals who want quick insights.

4. App 3 — Document Chat

The Document Chat Application allows users to upload documents (PDF/text) and ask questions directly.

Link: Document Chat

Features:

Upload document
Ask follow-up questions
Extract answers from content
Perfect for academic notes and technical papers

How it Works:

Upload your document.
Ask a question like:
- “Explain the formula on page 2”
- “Summarize the introduction”
- “What is the main objective?”
The chat block reads the document and answers.

This app helps transform static documents into interactive study material.

How These Apps Were Built

All apps were built using the same core PartyRock building blocks:

Input Blocks

Text input
Document upload
Prompt fields

Output Blocks

Text responses
Summaries
Bullet points
Image generation

Logic Blocks

AI model response blocks
Connected workflows
Multi-output pipelines

PartyRock’s drag-and-drop system makes it possible to design multi-feature workflows with zero backend code.

Scaling These Apps (Future Plans)

Even though these apps run inside PartyRock, they can be scaled in the future by:

Moving heavy tasks to external APIs
Adding user authentication (Cognito/Firebase)
Hosting a dedicated frontend
Adding cloud storage for uploaded documents
Creating APIs to integrate with other apps

These steps can turn simple prototypes into production-ready tools.

Conclusion

Building AI-powered apps has never been easier. With PartyRock, anyone can create:

Chatbots
Summarizers
Document analysis tools
Creative AI generators

— all without writing code.

These apps helped me learn prompt engineering, interface design, and multi-block AI workflows.

If you're a beginner or even an experienced developer, PartyRock is the perfect playground to test ideas, build prototypes, and create real AI applications in minutes.

Stay tuned — I’ll be creating and sharing more AI apps soon!