Validação de senha com React

Neste mini-projeto, você irá desenvolver uma interface de redefinição de senha que valida critérios de segurança em tempo real. O usuário precisa criar uma nova senha que atenda a requisitos como presença de letra maiúscula, caractere especial e mínimo de caracteres. O design traz um modal escuro contrastando com um fundo de paisagem montanhosa.

🤓 Antes de começar

Este projeto utiliza React e TailwindCSS. Certifique-se de ter o Node.js instalado e rode npm install antes de iniciar.

🔨 Requisitos

• Criar campos de senha e confirmação de senha.
• Exibir feedback visual (cores/verificações) para cada critério atendido.
• Validar em tempo real os seguintes critérios:
  • Pelo menos 8 caracteres.
  • Pelo menos uma letra maiúscula.
  • Pelo menos um caractere especial (como ! @ # %).
  • Senhas devem ser iguais.

👀 Dicas:

• Use useState para armazenar a senha e useEffect para validar.
• Considere usar regex para validar os critérios da senha.
• Exibir feedback visual (cores/verificações) para cada critério atendido.

🔨 Desafio extra para quem quer ir além

• Adicionar opção de exibir/ocultar senha com ícones.

• Aplicar animações sutis usando TailwindCSS.

• Tornar o layout responsivo.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.

Figma

🔗 Link do design

👉🏽 Sobre esse mini-projeto

O que você irá praticar:

React

• Uso de useState e useEffect

• Manipulação de formulários e validação em tempo real

TailwindCSS

• Estilização moderna e responsiva
• Uso de classes utilitárias para feedback visual

Pré requisitos

Conhecimento básico de React e JavaScript ES6+