Interface de autenticação moderna e modular, desenvolvida com HTML5, CSS3 e JavaScript ES Modules, focada em clean code, separação de responsabilidades e experiência do usuário. O projeto foi estruturado para demonstrar boas práticas de front-end em nível sênior, sendo adequado tanto para avaliação técnica quanto para portfólio profissional.
Este repositório demonstra a construção de um fluxo completo de autenticação front-end, incluindo:
- Login
- Cadastro de usuário
- Recuperação de senha
- Validações de formulário
- Persistência de preferências (tema claro/escuro)
- Deploy automatizado via GitHub Pages
O foco está em arquitetura simples, código legível, reutilizável e escalável, sem dependência de frameworks.
- Desenvolvedores Sênior / Tech Leads — avaliação de organização, padrões e legibilidade
- Recrutadores Técnicos — leitura clara, objetivo do projeto e decisões técnicas explícitas
- Times de Front-end — exemplo de projeto base bem estruturado
my-login-ui/
├── .github/
│ └── workflows/
│ └── deploy.yml # Pipeline CI/CD (GitHub Pages)
│
├── assets/
│ ├── css/
│ │ ├── global.css # Estilos globais e reset
│ │ ├── auth.css # Estilos específicos de autenticação
│ │ └── theme.css # Variáveis e temas (light/dark)
│ │
│ ├── js/
│ │ ├── auth.js # Lógica base de autenticação (mock)
│ │ ├── login.js # Fluxo de login
│ │ ├── register.js # Fluxo de cadastro
│ │ ├── forgot-password.js# Recuperação de senha
│ │ ├── validation.js # Validações reutilizáveis
│ │ └── theme.js # Controle de tema e persistência
│ │
│ └── img/
│ └── animale.svg # Assets visuais
│
├── index.html # Tela de login
├── register.html # Tela de cadastro
├── forgot-password.html # Tela de recuperação de senha
├── dashboard.html # Tela pós-login (mock)
├── README.md # Documentação técnica
└── .vscode/settings.json # Padronização de editor
Cada responsabilidade foi isolada em um módulo específico, evitando arquivos monolíticos e facilitando:
- Manutenção
- Testabilidade
- Evolução do projeto
Exemplo:
validation.js→ regras puras de validaçãotheme.js→ estado visual e persistêncialogin.js/register.js→ orquestração de eventos da UI
- Funções pequenas e sem efeitos colaterais
- Nomes semânticos e explícitos
- Separação clara entre DOM, regra e estado
- Zero dependência de bibliotecas externas
O tema (light/dark) é persistido via localStorage, garantindo:
- Continuidade de experiência
- Baixo acoplamento
- Simplicidade de implementação
- Layout responsivo
- Feedback visual para erro e sucesso
- Estados de carregamento
- Acessibilidade básica (labels, contraste, semântica)
O deploy é totalmente automatizado via GitHub Actions.
- Disparo automático a cada
pushna branchmain - Build estático
- Publicação no GitHub Pages
on:
push:
branches:
- mainhttps://camiladziubat.github.io/my-login-ui/
Este projeto não contém backend nem dados sensíveis.
- Autenticação simulada
- Nenhuma credencial real
- Nenhuma chave exposta
Ideal para demonstração de front-end architecture.
- Integração com API real (JWT / OAuth)
- Testes unitários (Jest / Vitest)
- i18n
- Camada de Service / Repository
- Design System
Camila Dziubat Front-end Developer
- GitHub: https://github.com/CamilaDziubat
Este projeto foi intencionalmente desenvolvido sem frameworks para evidenciar domínio dos fundamentos da web, clareza arquitetural e qualidade de código — competências essenciais para ambientes de engenharia maduros.
"Simplicidade é o resultado da maturidade técnica."