Skip to main content

​
Quickstart

Get Generador QR Pro running on your local machine in just a few minutes. This guide will help you set up the project and create your first QR code quickly.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (version 16 or higher recommended)
  • npm (comes with Node.js) or your preferred package manager (yarn, pnpm)
  • Git for cloning the repository

​
Installation steps

1

Clone the repository

Clone the Generador QR Pro repository to your local machine:
git clone <repository-url>
cd generador_qr
2

Install dependencies

Install all required npm packages:
npm install
This will install:
  • React 19.2.0 and React DOM
  • qrcode.react 4.2.0 for QR generation
  • Lucide React 0.576.0 for icons
  • Vite 7.3.1 and build tools
3

Start the development server

Launch the application in development mode:
npm run dev
The application will start on http://localhost:5173 (or the next available port). Vite will display the exact URL in your terminal.
Vite provides hot module replacement (HMR), so your changes will be reflected instantly in the browser without manual refresh.
4

Open in your browser

Navigate to the URL shown in your terminal (typically http://localhost:5173). You should see the Generador QR Pro interface with the title “Generador QR Pro” and subtitle “Crea, personaliza y descarga códigos QR con un diseño premium al instante.”

​
Create your first QR code

Now that the application is running, let’s create your first QR code:
1

Select a template

Choose from one of four available templates in the tabs:
  • URL: For website links (default selection)
  • WiFi: For network credentials
  • Contacto: For vCard contact information
  • Email: For email links with pre-filled content
The URL template is selected by default with a sample URL (https://www.bbc.com/mundo).
2

Enter your data

Input your content based on the selected template:For URL:
https://your-website.com
For WiFi:
  • Network Name (SSID): Your WiFi network name
  • Password: Your network password
  • Security: WPA/WPA2, WEP, or No Password
For Contact (vCard):
  • First Name and Last Name
  • Phone number (e.g., +1 234 567 8900)
  • Email address
  • Company name (optional)
For Email:
  • Recipient email address
  • Subject line
  • Email body (optional)
The QR code preview updates in real-time as you type, so you can see your changes immediately.
3

Customize the appearance

Scroll down to the “Apariencia Premium” section to customize your QR code:
  • Color del QR: Change the foreground color (default: #0f172a - dark slate)
  • Fondo: Change the background color (default: #ffffff - white)
  • Logo Central: Upload a custom logo (PNG, JPG, etc.) to display in the center
  • Calidad: Select error correction level:
    • Normal (L): ~7% correction
    • Buena (M): ~15% correction
    • Alta (Q): ~25% correction
    • Máxima (H): ~30% correction (automatically used with logos)
When you upload a logo, the application automatically switches to Level H error correction to ensure the QR code remains scannable with the image covering approximately 22% of the center.
4

Export your QR code

Once you’re satisfied with your design, export it in your preferred format:
  • PNG: Click the “PNG” button to download a high-resolution raster image (2x scaling for print quality)
  • SVG (Vector): Click the “SVG (Vector)” button for infinitely scalable vector graphics
Your files will be saved as:
  • qr-premium.png for PNG exports
  • qr-premium-vector.svg for SVG exports

​
Example: Creating a WiFi QR code

Here’s a complete example of creating a WiFi QR code that guests can scan to connect to your network:
1

Switch to WiFi template

Click the “WiFi” tab with the Wifi icon.
2

Enter network details

Fill in your network information:
  • Nombre de Red (SSID): MyGuestNetwork
  • Contraseña: Welcome2024!
  • Seguridad: Select WPA/WPA2
3

Customize colors

Choose colors that match your brand:
  • Color del QR: #2563eb (blue)
  • Fondo: #ffffff (white)
4

Add your logo

Click “Subir Imagen” and select your company logo. The app will automatically set error correction to Level H.
5

Download and print

Click “PNG” to download a high-resolution image. Print it and place it where guests can easily scan it.
The generated WiFi QR code contains the data in the format: WIFI:S:MyGuestNetwork;T:WPA;P:Welcome2024!;H:false;;

​
Verify your setup

To ensure everything is working correctly:
  1. Generate a QR code with any data
  2. The preview should update in real-time
  3. Export as PNG and SVG - both should download successfully
  4. Scan the QR code with your phone to verify it works

​
Development workflow

While developing, you can:
  • Make changes to any file in the src/ directory
  • See updates instantly in the browser (HMR)
  • Check the browser console for any errors
  • Run npm run lint to check for code quality issues

​
Next steps

Installation guide

Learn about the project structure, available scripts, and development workflow

Customization

Explore advanced customization options including colors, logos, and quality settings

​
Troubleshooting

​
Port already in use

If you see an error that port 5173 is already in use, Vite will automatically try the next available port. Check your terminal for the actual URL.

​
Dependencies not installing

Try clearing npm cache and reinstalling: 
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

​
QR code not generating

Make sure you’ve entered data in the active template. The URL template has a default value, but other templates require you to fill in at least one field.

Build docs developers (and LLMs) love

Get started for freeTalk to us