QR Code Generator

A modern, responsive React application that generates QR codes from user URLs with download and share functionality.

Features

• 🎯 URL Input: Enter any valid URL to generate a QR code
• 📱 Responsive Design: Works perfectly on desktop, tablet, and mobile devices
• 🎨 Modern UI: Beautiful gradient design with smooth animations
• 📥 Download: Save QR codes as high-quality PNG images
• 📤 Share: Share QR codes directly or copy URLs to clipboard
• ✅ URL Validation: Ensures only valid URLs are processed
• 🚀 Fast: Built with Vite for lightning-fast development and builds

Technologies Used

• React 18 with TypeScript
• Vite for fast development and building
• QRCode.js for QR code generation
• html2canvas for image capture and download
• Modern CSS with gradients, shadows, and animations

Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn

Installation

1. Clone the repository or navigate to the project directory:

   cd qr-generator

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:5173

Building for Production

To create a production build:

npm run build

The built files will be in the dist directory.

Preview Production Build

To preview the production build locally:

npm run preview

Usage

1. Enter a URL: Type or paste any valid URL into the input field
2. Generate QR Code: Click the "Generate QR Code" button or press Enter
3. Download: Click the download button to save the QR code as a PNG image
4. Share: Use the share button to share the QR code or copy the URL to clipboard

Project Structure

src/
├── App.tsx          # Main application component
├── App.css          # Application styles
├── main.tsx         # Application entry point
├── index.css        # Global styles
└── assets/          # Static assets

Features in Detail

QR Code Generation

• Generates high-quality QR codes (300x300px)
• Supports any valid URL format
• Customizable colors and margins
• Error handling for invalid URLs

Download Functionality

• Converts QR code to high-resolution PNG
• Automatic filename generation with timestamp
• High-quality image capture using html2canvas

Share Functionality

• Native sharing on supported devices
• Fallback to clipboard copying
• Graceful error handling

Responsive Design

• Mobile-first approach
• Adaptive layouts for different screen sizes
• Touch-friendly interface elements

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

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

License

This project is open source and available under the MIT License.

Acknowledgments

• Built with React
• Powered by Vite
• QR code generation by QRCode.js
• Image capture by html2canvas