Este desafio tem como objetivo provar as habilidades em desenvolvimento de aplicações Front-End para uma Vaga na JusCash. A aplicação desenvolvida é responsável por gerenciar a manutenção de Leads, implementando uma interface de usuário que segue uma arquitetura previamente definida.
- Código Fonte: Repositório
- Framework: React
- Persistência: LocalStorage do navegador
- Bibliotecas: Nano Id, Crypto Js, e React Hot Toast
A aplicação está pronta e deployada na Vercel.
- Website: Deploy
- Cadastro de Usuário: Existem os campos nome completo, email e senha, todos eles são obrigatórios. A senha deve possuir ao menos 8 caracteres, contendo ao menos, um caracter especial, um caracter numérico, um caracter alfanumérico. Os campos de senha e confirmação de senha devem ser iguais e o icone de olho deve permitir visualizar e esconder. Ao terminar de criar a conta deve ser direcionado ao login.
- Login do Usuário: Tela de “já possui sua contaˮ. Os campos email e senha são obrigatórios e devem ser coerentes ao valor cadastrado. Somente 1 usuário é salvo por vez então quando cadastrados o login só pode ser feito baseado nessas informações e caso criemos outro usuário será substituído. Quando confirmado os valores no localStorage então será direcionado a tela inicial.
- Cadastro de Leads: A aplicação permite a criação de novos Leads com os campos obrigatórios nome completo, email e telefone, utilizando uma interface intuitiva e funcional. Opções de oportunidades podem ser marcadas/desmarcadas individualmente através de CheckBoxes.
- Gerenciamento de Leads: Os Leads podem ser gerenciados através de uma tabela dividida em três status: Cliente Potencial, Dados Confirmados, e Análise do Lead. Os Leads podem ser movidos entre as colunas ao clicar na seta de cada nome, alterando seu status.
- Modal de Visualização: Ao clicar no nome de um Lead, uma modal é aberta com as informações detalhadas e preenchidas, permitindo a edição e visualização dos dados.
- Componentes: Os componentes são organizados seguindo o princípio de responsabilidade única, garantindo coesão e separação de responsabilidades. Componentes de apresentação gráfica (GUI) são mantidos em arquivos separados de Controladores e Serviços.
- Arquitetura: A arquitetura da aplicação segue uma abordagem modular, onde cada componente é responsável por uma parte específica da aplicação. A visualização, regras de apresentação e fluxo de comportamento são implementados em componentes separados.
- Validação de Formulários: Todos os campos obrigatórios são validados, com critérios específicos para campos como "senha", ao qual, é estritamente proibido utilizar espaçamentos.
-
Fluxo de Leads:
- Um Lead pode ser criado com o status "Cliente Potencial".
- Um Lead com status "Cliente Potencial" pode ser movido para "Dados Confirmados".
- Um Lead com status "Dados Confirmados" pode ser movido para "Análise do Lead".
- Não é permitido mover Leads em ordem inversa ou pular status.
-
Persistência:
- Os dados são persistidos no LocalStorage do navegador, garantindo que os Leads e usuários criados sejam mantidos entre sessões.
A biblioteca React Hot Toast foi implementada para entregar mensagens de erro informando o que deveria ser feito para que a solicitação em cada página seja de sucesso.
No momento de cadastrar todos os campos possuem validações e caso alguma delas não esteja de acordo a notificação é enviada. Assim como quando o cadastro é efetuado com sucesso entregamos uma mensagem. Para o login os campos também possuem validações e o acerto é comunicado ao usuário.
A ação de criar um lead também resulta na analise dos campos e consequentemente um erro se as regras não forem seguidas e sucesso para caso os valores sejam coerentes.
- Node.js (versão LTS recomendada)
- Gerenciador de pacotes npm ou yarn
-
Clone o repositório:
git clone https://github.com/seu-usuario/seu-repositorio.git cd seu-repositorio -
Instale as dependências:
npm install # ou yarn install -
Inicie a aplicação:
npm start # ou yarn start -
Acesse a aplicação: Abra o navegador e acesse http://localhost:3000.