Transforme textos e URLs em QR Codes de forma rápida, simples e segura.
Sobre • Funcionalidades • Demonstração • Tecnologias • Como executar
O QR Code Studio é uma aplicação web responsiva desenvolvida para criar QR Codes diretamente no navegador de maneira rápida e intuitiva.
O usuário pode inserir textos ou URLs, gerar o QR Code instantaneamente, copiar o conteúdo, baixar o código em formato PNG e alternar entre os temas claro e escuro.
O projeto foi desenvolvido com foco em simplicidade, responsividade, experiência do usuário e boas práticas de desenvolvimento Front-end.
- 🔳 Geração de QR Code a partir de textos ou URLs
- ⌨️ Geração rápida utilizando a tecla Enter
- ↵️ Quebra de linha utilizando Shift + Enter
- 📥 Download do QR Code em formato PNG
- 📋 Cópia do conteúdo para a área de transferência
- 🗑️ Limpeza completa do formulário e da visualização
- ✅ Validação de campo obrigatório
- 🔢 Controle de limite e contador de caracteres
- 🔔 Mensagens de sucesso e erro
- 💾 Armazenamento do último conteúdo com LocalStorage
- 🔄 Restauração automática do último QR Code
- 🌙 Tema claro e escuro com preferência salva
- 📱 Interface totalmente responsiva
- ♿ Recursos básicos de acessibilidade
Interface principal do QR Code Studio utilizando o tema escuro.
A aplicação permite alternar entre os temas claro e escuro, mantendo a preferência do usuário salva no navegador.
Após inserir um texto ou URL, o QR Code é gerado instantaneamente e pode ser baixado em PNG, copiado ou removido.
Interface adaptada para computadores, tablets e smartphones.
O projeto foi desenvolvido utilizando:
- HTML5 — estrutura e semântica da aplicação
- CSS3 — estilização, responsividade e temas
- JavaScript (ES6+) — lógica e interatividade
- LocalStorage — persistência das preferências e do conteúdo
- QRCode.js — geração dos QR Codes diretamente no navegador
qr-code-studio/
│
├── assets/
│ └── icons/
│ └── favicon.svg
│
├── images/
│ ├── banner.png
│ ├── screenshot-claro.png
│ ├── screenshot-generated.png
│ ├── screenshot-home.png
│ └── screenshot-mobile.png
│
├── index.html
├── styles.css
├── script.js
├── LICENSE
└── README.md
git clone https://github.com/marcelogomesdev/qr-code-studio.gitcd qr-code-studioVocê pode abrir o arquivo:
index.html
diretamente no navegador.
Outra opção é abrir o projeto no Visual Studio Code e utilizar a extensão Live Server.
Observação: a biblioteca QRCode.js é carregada por CDN. Portanto, é necessária conexão com a internet para carregá-la.
O projeto pode ser publicado gratuitamente utilizando o GitHub Pages.
No repositório do GitHub, acesse:
Settings → Pages → Deploy from a branch → main → /root
Após a publicação, a aplicação poderá ser acessada diretamente pelo navegador, sem necessidade de instalação.
Durante o desenvolvimento deste projeto foram aplicados conceitos importantes de desenvolvimento Front-end, incluindo:
- Manipulação do DOM com JavaScript
- Eventos e interações com o usuário
- Validação de dados
- Integração com biblioteca JavaScript externa
- Persistência de dados utilizando LocalStorage
- Implementação de tema claro e escuro
- Manipulação da área de transferência
- Geração e download de arquivos pelo navegador
- Desenvolvimento de interfaces responsivas
- Organização da estrutura de um projeto Front-end
- Boas práticas básicas de acessibilidade
Este projeto está sob a licença MIT.
Você pode usar, modificar e distribuir este projeto de acordo com os termos da licença.
Consulte o arquivo LICENSE para mais informações.
QR Code Studio
Transforme conteúdo em QR Code
Desenvolvido por Marcelo Gomes dev