🔗 LerCode - Gerador de QR Code

Um aplicativo web simples e eficiente para gerar QR codes instantaneamente, com interface moderna e responsiva, sem necessidade de registro ou instalação.

📌 Sumário

1. Sobre o Projeto
2. Objetivos
3. Tecnologias
4. Funcionalidades
5. Pré-requisitos
6. Instalação
7. Como utilizar
8. Estrutura do Projeto
9. Contribuição
10. Licença
11. Contato
12. Recursos Adicionais

💻 Sobre o Projeto

O LerCode é um projeto web que oferece uma solução intuitiva e gratuita para gerar QR codes instantaneamente. Com uma interface moderna e responsiva, permite aos usuários criar QR codes para URLs, textos e outras informações de forma rápida e eficiente, sem necessidade de registro ou instalação de software.

• Motivação: Proporcionar uma ferramenta prática e acessível para criação de QR codes, demonstrando boas práticas de desenvolvimento web com HTML5, CSS3 e JavaScript vanilla.
• Público-alvo: Desenvolvedores, profissionais de marketing, estudantes e qualquer pessoa que precise gerar QR codes de forma rápida e simples.

🎯 Objetivos

🛠️ Técnicos

• Implementar uma interface web responsiva e moderna usando HTML5, CSS3 e JavaScript vanilla.
• Desenvolver um gerador de QR codes funcional utilizando a biblioteca QRCode.js.
• Garantir compatibilidade com todos os dispositivos e navegadores modernos.
• Implementar funcionalidade de download de QR codes em alta qualidade.
• Criar uma experiência de usuário intuitiva e sem fricção.
• Adicionar suporte a múltiplos idiomas com detecção automática de idioma.

🚀 Tecnologias

Frontend

• HTML5
• CSS3 (com Flexbox e Grid)
• JavaScript (ES6+)
• QRCode.js (biblioteca para geração de QR codes)
• Google Fonts (Inter)
• Responsive Design

Funcionalidades Especiais

• Detecção automática de idioma
• Suporte a tradução via Google Translate
• Design responsivo para mobile-first
• Animações CSS suaves

✨ Funcionalidades

• ✅ Geração Instantânea: Cria QR codes em segundos com interface intuitiva
• ✅ Múltiplos Formatos: Suporte para URLs, textos e outras informações
• ✅ Tamanhos Personalizáveis: Opções de tamanho pequeno (200x200), médio (300x300) e grande (400x400)
• ✅ Download em Alta Qualidade: Download dos QR codes em formato PNG com bordas
• ✅ Interface Responsiva: Funciona perfeitamente em desktop, tablet e mobile
• ✅ Design Moderno: Interface limpa e profissional com gradientes e animações
• ✅ Detecção de Idioma: Detecta automaticamente o idioma do usuário e oferece tradução
• ✅ Sem Registro: Uso imediato sem necessidade de cadastro ou login
• ✅ Gratuito: Totalmente gratuito sem limitações ou custos ocultos

⚙️ Pré-requisitos

• Navegador Web Moderno: Chrome, Firefox, Safari, Edge (versões recentes)
• Conexão à Internet: Necessária apenas para carregar fontes e bibliotecas externas
• JavaScript Habilitado: Necessário para o funcionamento da aplicação

🛠️ Instalação

1. Clone o repositório:

   git clone https://github.com/lucasgleria/LerCode.git

2. Navegue até a pasta do projeto:

   cd LerCode

3. Abra o arquivo index.html no seu navegador:

   # No Windows
   start index.html
   
   # No macOS
   open index.html
   
   # No Linux
   xdg-open index.html

   Alternativamente, você pode:

   • Duplo-clicar no arquivo index.html
   • Arrastar o arquivo para o navegador
   • Usar um servidor local (recomendado para desenvolvimento)

4. Para desenvolvimento local (opcional):

   # Usando Python
   python -m http.server 8000
   
   # Usando Node.js
   npx serve .
   
   # Usando PHP
   php -S localhost:8000

   Depois acesse http://localhost:8000 no seu navegador.

❗ Como Utilizar

1. Acesse a aplicação: Abra o arquivo index.html no seu navegador ou acesse a URL de deploy.

2. Digite o conteúdo: No campo "Enter text or URL", digite:

   • Uma URL (ex: https://google.com)
   • Um texto qualquer
   • Informações de contato
   • Qualquer informação que deseje codificar

3. Escolha o tamanho: Selecione o tamanho desejado:

   • Small (200x200): Para uso em documentos pequenos
   • Medium (300x300): Tamanho padrão, ideal para a maioria dos casos
   • Large (400x400): Para impressão ou uso em materiais maiores

4. Gere o QR Code: Clique no botão "Generate QR Code"

5. Baixe o resultado: Clique em "Download QR Code" para salvar a imagem em PNG

6. Teste o QR Code: Use o aplicativo de câmera do seu celular para escanear o QR code gerado

▶️ Demonstração

(QR Code do Site do projeto, gerado por ele mesmo)

📂 Estrutura do Projeto

LerCode/
├── index.html              # Página principal da aplicação
├── style.css               # Estilos CSS responsivos
├── script.js               # Lógica JavaScript do gerador
├── favicon.ico             # Ícone do projeto
├── qr-code.png             # qr-code do projeto
└── README.md               # Este arquivo
└── LICENSE                 # Licença do projeto

📋 Detalhes dos Arquivos

• index.html: Estrutura HTML5 semântica com seções para features, gerador e informações do desenvolvedor
• style.css: Estilos CSS modernos com design responsivo, gradientes e animações
• script.js: Lógica JavaScript para geração de QR codes, download e detecção de idioma
• favicon.ico: Ícone personalizado do projeto

🤝 Contribuição

Contribuições são bem-vindas! Siga estas etapas:

1. Reporte Bugs

• Abra uma issue no GitHub
• Descreva o problema detalhadamente
• Inclua logs e screenshots se possível

2. Sugira Melhorias

• Envie ideias através de issues
• Proponha novas funcionalidades
• Discuta melhorias de arquitetura

3. Desenvolva

• Faça um fork do projeto
• Crie uma branch (git checkout -b feature/nova-funcionalidade)
• Faça suas alterações seguindo os padrões do projeto
• Adicione testes para novas funcionalidades
• Faça commit (git commit -m 'feat: nova funcionalidade')
• Envie um Pull Request

🎨 Áreas para Contribuição

• Melhorias na interface do usuário
• Novos formatos de QR code
• Otimizações de performance
• Suporte a mais idiomas
• Funcionalidades de personalização
• Testes automatizados

📜 Licença

MIT License - Veja LICENSE para detalhes.

Este projeto é distribuído sob a licença MIT, que permite uso comercial, modificação, distribuição e uso privado, com a única restrição de que a licença e os avisos de copyright sejam incluídos em todas as cópias ou partes substanciais do software.

📞 Contato & Evidências

• Autor: Lucas Leria
• LinkedIn: lucasleria
• GitHub: lucasgleria
• Portfolio: lucasgleria.github.io/resume/
• Medium: @lucasleria17
• Dev.to: lucas_leria

🔍 Recursos Adicionais

• QRCode.js Documentation - Biblioteca para geração de QR codes
• HTML5 Specification - Documentação oficial
• CSS3 Guide - Guia completo de CSS
• JavaScript MDN - Documentação JavaScript
• Google Fonts - Biblioteca de fontes web
• Responsive Design - Guia de design responsivo