UPI QR Generator

A modern, feature-rich UPI QR code generator built with React, TypeScript, and Tailwind CSS.

Features

• 🎨 Advanced Customization: Multiple themes, colors, and styling options
• 📱 Responsive Design: Works perfectly on all devices
• 🔗 Shareable Links: Generate links that others can visit to view QR codes
• 💾 Gallery System: Save and manage your QR codes
• 🎯 High Quality: Multiple error correction levels and size options
• 🖼️ Logo Support: Add custom logos to your QR codes
• 🌙 Dark Mode: Full theme support
• ⚡ Fast & Modern: Built with Vite and modern React

Demo

🚀 Live Demo on Vercel

Usage

Basic QR Generation

1. Enter UPI ID and Name (required)
2. Add amount (optional)
3. Choose a theme or customize colors
4. Download or share your QR code

Advanced Features

• Error Correction: Choose from Low, Medium, Quartile, or High
• Custom Size: Adjust QR code dimensions
• Logo Integration: Add your logo to the center
• Shareable Links: Generate URLs that others can visit

Sharing QR Codes

• Direct Share: Use the share button for native sharing
• Copy Link: Copy the UPI payment link
• Shareable URL: Generate a link that shows the QR code on a webpage
• Download: Save as high-quality PNG

Technical Details

Built With

• React 19 - Modern React with hooks
• TypeScript - Type safety and better DX
• Tailwind CSS - Utility-first styling
• shadcn/ui - Beautiful, accessible components
• qrcode.react - QR code generation
• Vite - Fast build tool
• Vercel - Deployment platform

Browser Support

• Chrome/Edge 88+
• Firefox 85+
• Safari 14+
• Mobile browsers

Performance

• Lighthouse Score: 95+
• First Contentful Paint: <1s
• Bundle Size: <500KB gzipped

Customization

• Themes: Choose from built-in light/dark themes or create your own.
• Colors: Pick custom foreground/background colors.
• Logo: Upload a logo to embed in the QR code.
• Size: Adjust the QR code size as needed.
• Error Correction: Select error correction level for reliability.

Roadmap

• Add support for more QR code formats
• Export as SVG
• Multi-language support
• PWA support

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - feel free to use this project for personal or commercial purposes.

Support

If you encounter any issues:

1. Open an issue on GitHub

---

Made with ❤️ By Kapil Kumar