DevQuestPROEstudos de Código
Voltar para o Catálogo de Projetos
IniciantefrontendEstimativa: ~5 horas de dedicação

Gerador de Senhas Seguras & Analisador de Entropia

Utilitário de geração de credenciais criptograficamente seguras com parâmetros configuráveis (maiúsculas, símbolos, comprimento), indicador visual de entropia (força da senha) e cópia instantânea.

Stack:JavaScript / TypeScriptWeb Crypto APITailwind CSSClipboard API
Funcionalidades Requeridas

O que o seu projeto final precisa conter para ser considerado concluído:

  • Geração usando window.crypto.getRandomValues para alta segurança
  • Sliders interativos para definir comprimento (8 a 64 caracteres)
  • Medidor de força em tempo real (Fraca, Média, Forte, Impossível)
  • Botão de cópia para área de transferência com feedback visual temporário
Conhecimentos Pré-requisitos

Recomendamos dominar os seguintes tópicos antes de iniciar a codificação:

  • Operações com strings e arrays
  • Geração de números pseudoaleatórios
  • Eventos de formulário
Documentação & Links de Apoio

Consulte materiais oficiais e tutoriais relacionados para acelerar o desenvolvimento do projeto:

Docs / MDN
MDN: Web Crypto API (crypto.getRandomValues)

Geração de números pseudoaleatórios criptograficamente seguros.

Guia / Artigo
OWASP: Password Storage & Strength CheatSheet

Diretrizes de segurança para senhas e boas práticas recomendadas.

W3Schools
W3Schools: JavaScript Regular Expressions

Expressões regulares para validar requisitos de maiúsculas e símbolos.

DevQuest Labs
DevQuest Labs: Playground Web

Teste seus algoritmos de cálculo de entropia com feedback visual.

Submeta o seu Repositório

Concluiu o projeto Gerador de Senhas Seguras & Analisador de Entropia? Envie o link do GitHub para registrar no seu portfólio.

Roteiro de Implementação Passo a Passo

Siga as etapas recomendadas, abra as dicas práticas e marque conforme for progredindo.

Progresso do Projeto(0/3 etapas concluídas)
0%
Etapa 1

Interface do Gerador & Controles

Monte o layout com display de senha destacado, slider de tamanho (8 a 64) e checkboxes de tipos de caracteres.

Etapa 2

Algoritmo Criptograficamente Seguro (CSPRNG)

Utilize a Web Crypto API para gerar aleatoriedade de padrão bancário em vez de Math.random().

Etapa 3

Cálculo de Entropia de Shannon & Estimativa de Crack

Calcule a métrica matemática de bits de entropia (E = L * log2(N)) e classifique a resistência da senha.

Estrutura de Pastas Recomendada

Uma organização limpa para o seu repositório de projeto:

src/
├── components/
│   ├── PasswordDisplay.tsx   # Visor com destaque de cor por tipo de caractere
│   ├── StrengthMeter.tsx     # Barra gradiente indicando bits de entropia
│   └── ConfigPanel.tsx       # Sliders e checkboxes de configuração
└── utils/
    ├── crypto.ts             # Web Crypto CSPRNG generator
    └── entropy.ts            # Cálculo de Shannon e tempo estimado de quebra
Dicas de Ouro para o seu Portfólio

Como valorizar este projeto no seu GitHub e entrevistas técnicas:

  • •Recrutadores adoram ver desenvolvedores que conhecem a diferença entre Math.random() e Web Crypto API. Destaque isso logo na primeira linha do seu README!
  • •Mostre que você pensou na UX com o feedback visual 'Copiado!' que some automaticamente após 2 segundos.