Aplicação para geração de imagens QR Code a partir de um link ativo. O usuário informa o link no campo de entrada, o sistema aciona a API react-qr-code, envia a solicitação para o servidor e retorna a imagem QR Code do link sugerido. A imagem aparece automaticamente na tela para download em .PNG.
🔗 Gere QR Codes ao vivo (substitua pelo link do seu deploy)
- ✅ Geração instantânea de QR Code via API
- ✅ Validação automática de URLs
- ✅ Download direto em formato PNG
- ✅ Preview em tempo real da imagem
- ✅ Responsivo para mobile e desktop
- ✅ Copiar link para área de transferência
- ✅ Histórico recente de QR Codes gerados
- ✅ Interface intuitiva drag & drop
- Usuário digita URL → 2. Validação → 3. Solicitação API ↓
- Código QR gerado → 5. Preview na tela → 6. Baixar PNG
- React 18+
- react-qr-code API
- HTML5 Canvas (Download PNG)
- Vite (Build Tool)
- Tailwind CSS
- React Hook Formqrcode-generator/
│
├── public/
│ └── favicon.ico
│
├── src/
│ ├── components/
│ │ ├── QRGenerator.jsx
│ │ ├── DownloadButton.jsx
│ │ └── URLInput.jsx
│ ├── hooks/
│ │ └── useQRCode.js
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
├── vite.config.js
└── README.md
- Node.js 18+ instalado
# Clone o repositório
git clone https://github.com/seuusuario/qrcode-generator.git
# Entre no diretório
cd qrcode-generator
# Instale dependências
npm install
# Inicie o servidor de desenvolvimento
npm run dev- Cole ou digite uma URL válida
- Clique em "Gerar QR Code"
- Visualize o QR Code na tela
- Baixe clicando no botão PNG
- Teste escaneando com seu celular!
| URL de Exemplo | Código QR Gerado |
|---|---|
| 'https://github.com' | |
| 'https://' |  |
| 'https://netlify.com' |  |
| Tela Principal | Código QR Gerado | Baixar |
|---|---|---|
|  |  |
// useQRCode.js
const [qrImage, setQrImage] = useState('');
const [loading, setLoading] = useState(false);
const generateQR = async (url) => {
// Integração com react-qr-code API
};
// Configurações disponíveis
const qrConfig = {
size: 256,
margin: 2,
color: {
dark: "#000000",
light: "#FFFFFF"
},
format: "PNG"
};
- Núcleos: Modifique e color.darkcolor.light
- Tamanho: Ajuste (128-512px)size
- Logo: Adicione overlay personalizado
- Formato: PNG, SVG, EPS
1. Fork o projeto
2. Crie branch `feat/nova-funcionalidade`
3. Commit suas mudanças
4. Push da branch
5. Abra Pull Request
MIT - Use livremente!
Desenvolvedor Frontend
ParreirasJuniorWeb
✉️ joaoparreiras2020@gmail.com
💼 jvparreiras
Transforme qualquer link em QR Code instantaneamente! ⚡