QR Code Generator

A sophisticated, customer-ready QR Code Generator web application built with ReactJS and Vite. Transform any text into beautiful, customizable QR codes with an elegant black-and-white design.

✨ Features

• Real-time QR Code Generation: Instantly generate QR codes as you type
• Customizable Options: Adjust size, error correction level, margins, and colors
• Multiple Export Formats: Download as high-resolution PNG or scalable SVG
• Responsive Design: Flawless performance across all devices
• Accessibility First: ARIA-compliant with keyboard navigation support
• No Backend Required: Pure client-side application using qrcode.js
• Elegant UI: Sophisticated black-and-white design with subtle grid background
• Smooth Animations: Delightful user experience with thoughtful transitions

🚀 Quick Start

Prerequisites

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

Installation

1. Clone or download the project

   git clone <repository-url>
   cd qr-code-generator

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000 to see the application in action.

Building for Production

npm run build

The built files will be in the dist directory, ready for deployment.

🛠️ Technology Stack

• React 18: Modern React with hooks and functional components
• Vite: Fast build tool and development server
• qrcode.js: Reliable QR code generation library
• CSS3: Custom styling with CSS Grid, Flexbox, and animations
• ES6+: Modern JavaScript features

📱 Usage

1. Enter Text: Type any text, URL, or message in the input field
2. Customize: Click "Customize Options" to adjust QR code settings
3. Preview: See your QR code generated in real-time
4. Download: Choose PNG or SVG format and download your QR code

Supported Input Types

• URLs (https://example.com)
• Contact information (vCard format)
• Plain text messages
• Email addresses
• Phone numbers
• WiFi network credentials
• And much more!

Customization Options

• Size: 128px to 1024px
• Error Correction: Low (7%) to High (30%)
• Margin: None to Large
• Colors: Customize dark and light colors
• Format: PNG or SVG export

🎨 Design Philosophy

Powered by Sutralink, this application embodies the philosophy of creating value through elegant simplicity and functional excellence. The design features:

• Minimalist Aesthetic: Clean black-and-white theme
• Subtle Grid Background: Evokes precision and structure
• Thoughtful Typography: Concise, inspiring language
• Smooth Interactions: Delightful user experience
• Accessibility: Inclusive design for all users

🔧 Development

Project Structure

src/
├── components/
│   ├── Header.jsx          # Application header
│   ├── Header.css
│   ├── QRCodeGenerator.jsx # Main QR code generator
│   ├── QRCodeGenerator.css
│   ├── Footer.jsx          # Application footer
│   └── Footer.css
├── App.jsx                 # Main application component
├── App.css
├── main.jsx               # React entry point
└── index.css              # Global styles

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Customization

The application is highly customizable through CSS custom properties (variables) defined in src/index.css. Key variables include:

• Color palette
• Typography
• Spacing
• Shadows
• Border radius

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

For support or questions, please open an issue in the repository.

---

Powered by Sutralink - Creating value through elegant simplicity and functional excellence.