A modern, user-friendly web application for generating customizable QR codes. Built with React and Ant Design, this application allows users to create QR codes with various customization options.
- Generate QR codes from website URLs
- Customize QR code appearance:
- Multiple image formats (PNG, JPEG, WebP)
- Adjustable margin size
- Quality settings
- Custom QR code color
- Custom background color
- Mask pattern selection
- Adjustable width
- Download generated QR codes
- URL validation for secure (https) links
- Modern, responsive UI using Ant Design
- Real-time QR code preview
- Node.js (version 14 or higher)
- npm (comes with Node.js)
- Docker and Docker Compose (for containerized deployment)
- Clone the repository:
git clone https://github.com/yourusername/qrcode-react.git
cd qrcode-react- Install dependencies:
npm install- Start the development server:
npm startThe application will open in your default browser at http://localhost:3000.
docker-compose up app-devdocker-compose up app-prodThe production application will be available at http://localhost.
- Enter a valid HTTPS URL in the input field
- Customize the QR code using the available options:
- Select image type (PNG, JPEG, WebP)
- Adjust margin using the slider
- Set quality using the slider
- Choose QR code color using the color picker
- Choose background color using the color picker
- Set mask pattern (0-7)
- Adjust width (200-1200px)
- Click the generate button to create the QR code
- Download the generated QR code using the download button
- React 17.0.2
- Ant Design (antd) 5.9.2
- QRCode library 1.5.0
- Create React App
npm start- Runs the app in development modenpm test- Launches the test runnernpm run build- Builds the app for productionnpm run eject- Ejects from Create React App
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
Samita Mondal