Vandana reddy Balannagari requested to merge fix/qrdisplay into develop May 06, 2026

Merge Request: Centralize and Enhance QR Code Generation

Overview

This MR introduces a reusable and centralized QR code generation component across the application to improve consistency, maintainability, and user experience.

The implementation standardizes QR rendering, increases QR visibility for better mobile scanning, and adds enhanced user features including QR code download and sharing support.

What does this MR do and why?

Previously, QR code generation logic existed separately in multiple pages such as volunteer QR generation and profile-related screens. This created inconsistent UI behavior, duplicate implementation logic, and smaller QR sizes that were difficult to scan reliably on mobile devices.

This MR centralizes all QR-related functionality into a reusable QRCodeDisplay component.

Motivation

Remove duplicated QR generation logic
Improve maintainability and scalability
Standardize QR UI across modules
Improve mobile QR scan reliability
Add download and sharing capabilities for digital IDs

Approach Taken

Created a centralized reusable component inside src/components/
Implemented canvas-based QR rendering using the qrcode package
Added responsive sizing using Tailwind utility classes
Integrated Web Share API support with fallback handling
Refactored existing pages to consume the reusable component

Trade-offs

Introduces a slightly larger reusable component footprint
Web Share functionality depends on browser support and includes fallback handling where unsupported

Changes Made

Files Added

File	Purpose
`src/components/QRCodeDisplay.tsx`	Reusable centralized QR code component

Files Modified

File	Purpose
`src/pages/volunteer/QRGenerationPage.tsx`	Replaced local QR implementation
`src/pages/profile/ProfilePage.tsx`	Integrated reusable QR display component

Features Added

Centralized QR generation logic
High-resolution canvas QR rendering
Responsive QR sizing (256px → 320px)
Download QR as PNG
Native mobile share support
Unsupported browser fallback handling
Improved Digital ID UI styling
UUID display below QR code
TypeScript typings and reusable props support

Technical Details

Root Cause

QR generation was duplicated across multiple pages with inconsistent styling and small rendering dimensions that reduced scan reliability.

Solution

The new QRCodeDisplay component:

Handles QR generation internally using useEffect
Renders QR codes on canvas for higher clarity
Encapsulates download/share functionality
Standardizes responsive styling and layout
Improves maintainability through component reuse

Architecture Decisions

Component-based reusable architecture
Canvas rendering preferred over inline SVG for download/share support
Local component state used for QR lifecycle management
Toast-based feedback for user actions and failures

Type of Change

Related Issues / References

Closes #334 (closed)

Screenshots or Screen Recordings

qrdisplay

Before	After
Small inconsistent QR code UI	Standardized responsive QR component
No download/share support	Download and Share actions available
Multiple QR implementations	Centralized reusable component

Viewport Size	Breakpoint	Before	After
Extra Small	<576px	Small QR rendering	Responsive 256px QR
Small	≥576px	Inconsistent sizing	Standardized layout
Medium	≥768px	Limited visibility	Improved scan clarity
Large	≥992px	Non-responsive display	320px responsive QR
Extra Large	≥1200px	Inconsistent UI	Consistent Digital ID layout

How to Set Up and Validate Locally

Checkout the MR branch
```
git checkout <fix/qrdisplay>
```
Install dependencies
```
bun install
```
Run development server
```
bun dev
```
Navigate to:
- Volunteer QR Generation page
- User Profile page
Validate:
- QR code renders successfully
- QR size is responsive
- UUID text appears below QR
- Download button saves PNG file
- Share button opens native share dialog on supported devices
- Unsupported browsers show fallback toast

Testing Done

Manual testing completed
Unit tests added/updated

Test Cases Covered

Scenario	Expected Result	Status
Render QR from UUID	QR canvas renders successfully	✅
Responsive QR scaling	QR scales between mobile and desktop	✅
Download QR	PNG download starts successfully	✅
Share QR on supported device	Native share dialog opens	✅
Unsupported share fallback	Toast error displayed	✅

Code Quality Checklist

Code Standards

Code follows project conventions (naming, structure, formatting)
No console.log() or debugger statements left in code
No unused imports, variables, or functions
No duplicate code and use of existing components for reusability
i18n check passed with no hardcoded strings in codebase for i18n support
TypeScript types are properly defined (no any unless justified)
ESLint and Prettier checks pass

bun run lint

React Best Practices

Components are properly split and single-responsibility
Hooks follow rules (no conditional hooks, proper dependencies)
State management is appropriate (local vs global state)
No unnecessary re-renders (memoization used where needed)
Event handlers are properly cleaned up

Component Patterns

shadcn/ui components used correctly
Tailwind classes follow utility-first approach
Responsive design considered (mobile-first if applicable)
Accessibility attributes included (aria-*, role, etc.)
Icons from lucide-react used consistently

API & Data Fetching

TanStack Query used for server state (if applicable)
Loading and error states handled
API types defined in src/types/api.ts
Axios interceptors handle auth tokens correctly
Use of Zod for data validations

Error Handling

Errors are caught and handled gracefully
User-friendly error messages displayed
Errors are being toasted properly
Network failures handled appropriately

Documentation

README.md updated (if setup steps changed)
.env.example updated (if new env vars added)
CHANGELOG.md updated (if applicable) closes #334 (closed)

Edited May 06, 2026 by Vandana reddy Balannagari

qr display for all users in their profiles