QRGen

A feature-rich, real-time QR code generator built with React and Vite. Create, customize, and download QR codes instantly.

✨ Visit Site ✨

Note: This Project is under MIT License. 
I have made this project with much efforts, so please don't try to steal the project. 
If you want to use the project, don't remove copyright and license otherwise
strict action can be taken against you.

---

📖 About The Project

I built this QR Code Generator as a fun, fast-paced project to put my React skills into practice. I wanted to go beyond a basic generator and create a feature-rich tool that was both powerful and enjoyable to use.

This was a fantastic opportunity to dive deeper into handling user interactions in React, from real-time updates as you type, to managing file uploads for the custom logo feature. Figuring out the logic to render the customized QR code onto a canvas for a perfect PNG download was a particularly rewarding challenge. The result is a clean, fully-featured, and interactive tool that I had a blast building.

✨ Features

This application is packed with features that make it a powerful and flexible tool:

• ⚡ Real-time Generation: The QR code updates instantly as you type.
• 🎨 Full Customization:
  • Size: Adjust the QR code's size with a dynamic slider.
  • Colors: Choose custom foreground and background colors using native color pickers.
  • Error Correction: Select from four levels of error correction (L, M, Q, H).
• 🖼️ Custom Logo Upload: Upload a PNG logo to be embedded in the center of the QR code.
  • Smart Error Correction: Automatically switches to 'High' error correction when a logo is added to ensure scannability.
• 📥 Download as PNG: A robust download function that correctly renders the customized QR code with its logo onto a canvas and saves it as a high-quality PNG file.
• 📱 Fully Responsive Design: Works beautifully on desktop, tablets, and mobile devices.

🛠️ Tech Stack

This project leverages a modern and efficient technology stack:

• React
• Vite
• Tailwind CSS
• qrcode.react
• Lucide React

---

🚀 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

You will need Node.js and npm installed on your machine.

Installation & Setup

1. Clone the repository:

   git clone https://github.com/Yash-775/QR-Generator.git

2. Navigate to the project directory:

   cd qr-code-generator

3. Install NPM packages:

   npm install

4. Run the development server:

   npm run dev

   The application will be available at http://localhost:5173/.

---

📄 License

Distributed under the MIT License. See LICENSE.md for more information.

👤 Contact

Yash - Yash-775

Project Link: https://github.com/Yash-775/QR-Generator