LockIn - Sistema de Autenticação em React

Descrição do Projeto

O LockIn é uma aplicação web desenvolvida em React para gerenciamento de autenticação de usuários. O projeto inclui funcionalidades de login, cadastro, recuperação de senha, validação de código e perfil do usuário. A interface é construída utilizando Material-UI (MUI) para um design moderno e responsivo.

Este projeto visava alinhar o desenvolvimento de um sistema de autenticação web em React com testes automatizados que simulam a experiência do usuário. A abordagem integrada garante que o desenvolvimento frontend seja acompanhado por validações automatizadas que replicam interações reais do usuário, assegurando não apenas o funcionamento técnico, mas também a qualidade da experiência em cenários práticos.

Tecnologias Utilizadas

Frontend (React)

• React 19.0.0: Biblioteca principal para construção da interface.
• Vite: Ferramenta de build e desenvolvimento rápido.
• Material-UI (MUI): Biblioteca de componentes para UI moderna.
• React Router DOM: Para navegação entre páginas.
• React Input Mask: Para formatação de campos de entrada.
• SweetAlert2: Para alertas e notificações.
• ESLint: Para linting e qualidade de código.

Testes Automatizados (Python)

• Python: Linguagem para os testes.
• Selenium 4.21.0: Para automação de testes web.
• Pytest 8.2.2: Framework de testes.
• Webdriver Manager 4.0.1: Para gerenciamento automático de drivers do navegador.

Estrutura do Projeto

LockIn/
├── src/                          # Código fonte do React
│   ├── components/               # Componentes reutilizáveis
│   │   ├── FormLogin.jsx
│   │   ├── FormCadastro.jsx
│   │   ├── FormAlterarSenha.jsx
│   │   ├── FormRecuperarSenha.jsx
│   │   ├── FormValidarCodigo.jsx
│   │   └── TelaPerfil.jsx
│   ├── pages/                    # Páginas da aplicação
│   │   ├── Login.jsx
│   │   ├── Cadastro.jsx
│   │   ├── AlterarSenha.jsx
│   │   ├── RecuperarSenha.jsx
│   │   ├── ValidarCodigo.jsx
│   │   └── Perfil.jsx
│   ├── styles/                   # Estilos CSS
│   ├── App.jsx                   # Componente principal
│   └── main.jsx                  # Ponto de entrada
├── projeto_automacao/            # Testes automatizados
│   ├── data/                     # Dados de teste
│   │   └── massa_dados_cadastro.py
│   ├── pages/                    # Page Objects para testes
│   │   ├── base_page.py
│   │   └── cadastro_page.py
│   ├── tests/                    # Casos de teste
│   │   ├── conftest.py
│   │   └── test_cadastro.py
│   ├── utils/                    # Utilitários
│   │   └── driver_manager.py
│   └── requirements.txt          # Dependências Python
├── public/                       # Arquivos estáticos
├── package.json                  # Dependências e scripts do Node.js
├── vite.config.js                # Configuração do Vite
└── README.md                     # Este arquivo

Funcionalidades

• Login: Autenticação de usuários existentes.
• Cadastro: Registro de novos usuários com validação.
• Recuperação de Senha: Processo para redefinir senha esquecida.
• Validação de Código: Verificação de códigos de segurança.
• Alterar Senha: Modificação de senha do usuário logado.
• Perfil: Visualização e edição do perfil do usuário.

Como Executar o Projeto

Pré-requisitos

• Node.js (versão 20 ou superior)
• Python (versão 3.8 ou superior)
• Git para clonar o repositório

1. Clonagem do Repositório

git clone https://github.com/seu-usuario/LockIn.git
cd LockIn

2. Instalação das Dependências do React

npm install

3. Execução da Aplicação React

Para desenvolvimento:

npm run dev

A aplicação estará disponível em http://localhost:5173.

Para build de produção:

npm run build
npm run preview

4. Instalação das Dependências dos Testes Automatizados

cd projeto_automacao
pip install -r requirements.txt

5. Execução dos Testes Automatizados

pytest

Os testes utilizarão o Selenium para automatizar a interação com a aplicação web.

Objetivos do Projeto

O desenvolvimento deste projeto teve como objetivos principais:

1. Desenvolvimento em React: Criar uma aplicação web de autenticação moderna e responsiva utilizando React, com foco em boas práticas de desenvolvimento e experiência do usuário.

2. Implementação de Testes Automatizados que Simulam Experiência do Usuário: Desenvolver uma suíte de testes automatizados utilizando Python e Selenium que replicam interações reais do usuário, validando as funcionalidades de autenticação em cenários práticos e garantindo qualidade e confiabilidade do sistema.

3. Alinhamento entre Desenvolvimento e Testes: Demonstrar a integração harmoniosa entre o desenvolvimento frontend em React e os testes automatizados, criando um fluxo de trabalho coeso onde cada nova funcionalidade é acompanhada de validações que simulam o uso real.

4. Boas Práticas: Aplicar princípios de clean code, componentização, page objects e estruturação adequada do código.

Contribuição

Para contribuir com o projeto:

1. Faça um fork do repositório
2. Crie uma branch para sua feature (git checkout -b feature/nova-funcionalidade)
3. Commit suas mudanças (git commit -am 'Adiciona nova funcionalidade')
4. Push para a branch (git push origin feature/nova-funcionalidade)
5. Abra um Pull Request

Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.