💼 | Minha solução para o desafio técnico da vaga de Javascript Developer na Lesser.
Warning
Este projeto foi desenvolvido como parte do desafio técnico para a vaga de Desenvolvedora JavaScript Júnior na Lesser.
Aviso sobre o Processo Seletivo:
O desafio técnico foi realizado diretamente na plataforma da empresa, ao longo de alguns dias, até a conclusão total da aplicação solicitada. Após a entrega, aguardei semanas sem receber qualquer retorno ou atualização sobre a avaliação.
Diante da ausência de comunicação, entrei em contato pelo WhatsApp profissional da empresa. A atendente me encaminhou ao responsável de TI, que informou que o processo seletivo já estava encerrado antes mesmo de eu iniciar o desafio, mas que a página com o teste havia permanecido ativa por descuido. Como consequência, todo o esforço e tempo investidos foram invalidados.
Solicitei, ao menos, um feedback técnico sobre a solução desenvolvida. Foi-me prometido retorno na mesma semana, mas isso não ocorreu (estou aguardando até hoje o feedback).
A falta de atualização no status da vaga e a ausência de retorno após a entrega do desafio evidenciam falhas significativas na condução do processo seletivo. Por esse motivo, não recomendo a participação em processos da Lesser, considerando o risco de dedicação sem qualquer aproveitamento ou reconhecimento.
- Desafio
- Sobre o Projeto
- Funcionalidades
- Tecnologias Utilizadas
- Estrutura do Projeto
- Instruções de Uso
- Testes
- Referências
- Licença
O Desafio Tecnico da Lesser consiste em criar um site que exibe um formulário com campos para "Nome", "Telefone" e "Email". O usuário deve preencher o formulário e enviá-lo dentro de um limite de 15 segundos. O site deve exibir um contador regressivo e modais de sucesso ou falha, dependendo do tempo de envio. Além disso, o site deve incluir uma página de candidato que exibe os dados preenchidos, com navegação entre as páginas sem interromper a contagem do tempo.
Foi a minha primeira vez usando Svelte & Playwright! :) A minha solução foi criar uma interface mais intuitiva e alinhada ao propósito da empresa de reconectar as pessoas com atividades que nutrem o espírito. Para isso, adaptei o desafio para um contexto imersivo: o usuário assume o papel de um cadete prestes a embarcar em uma expedição intergaláctica. Ele tem 15 segundos para registrar sua identidade no sistema da nave Lesser-X. Se preencher os dados corretamente a tempo, a nave decola com ele a bordo; caso contrário, a decolagem ocorre da mesma forma — mas sem o cadete. Foi necessário ajustar esse contexto ao enunciado do desafio sem desrespeitar as regras estabelecidas.
Uma das escolhas técnicas que fiz foi utilizar o BEM para nomenclatura de algumas classes de estilização e usar emojis como ilustração para representar elementos gráficos na interface, em vez de imagens tradicionais. Isso permitiu trabalhar com elementos ilustrativos sem aumentar o peso do projeto, mantendo a performance otimizada.
Também tive a oportunidade de escrever testes E2E usando Playwright, o que foi um desafio tão difícil quanto divertido. A cada novo cenário testado, surgia a vontade de cobrir ainda mais possibilidades, e esse processo acabou revelando problemas no fluxo de interação do site que antes passavam despercebidos. Isso demandou mais tempo do que o esperado, mas aprimorou a resolução e a prevenção de problemas.
Além disso, enfrentei desafios técnicos durante o desenvolvimento, como o próprio Svelte sinalizando erros por não reconhecer o svelteHTML, e problemas com a nova atualização do Tailwind — um problema que nem as IAs conseguiram me ajudar a resolver (haha). Acabei tendo que usar apenas CSS para estilizar alguns trechos, pois incluir esses elementos na configuração do Tailwind estava causando bugs no projeto. Outro desafio foi o Modal, que entrava em conflito com alguns avisos de acessibilidade. Tive que fazer ajustes para que ele funcionasse corretamente com os elementos solicitados no desafio. Isso me levou a horas de debugging, pesquisas em issues no GitHub do framework e diversos testes envolvendo a instalação e remoção de pacotes no package.json. No entanto, apesar das dificuldades, foi uma experiência enriquecedora. Sem experiência prévia com Svelte, precisei aprender na prática, equilibrando a leitura da documentação com tentativa e erro — o que tornou o aprendizado ainda mais valioso. Gostaria de ter mais tempo na minha rotina para implementar novas funcionalidades e aplicar uma organização melhor ao projeto, mas estou satisfeita com o resultado (ainda que passível de melhorias). Obrigada pela experiencia!
- Formulário Interativo: Campos para "Nome", "Telefone" e "Email".
- Contador Regressivo: Exibe o tempo restante em formato
mm:ss. - Modais de Feedback:
- Sucesso: Exibido quando o formulário é enviado dentro do tempo limite.
- Falha: Exibido quando o tempo acaba antes do envio.
- Página do Candidato: Exibe os dados preenchidos após o envio bem-sucedido.
- Navegação: Botões para alternar entre a página do formulário e a página do candidato sem interromper a contagem.
- Validação: Desabilita o botão de envio se os campos não estiverem preenchidos corretamente.
- SvelteKit: Framework para construção de aplicações web modernas.
- TailwindCSS: Framework CSS utilitário para estilização rápida e responsiva.
- DaisyUI: Biblioteca de componentes para TailwindCSS, utilizada para criar modais e botões estilizados.
- TypeScript: Adiciona tipagem estática ao JavaScript para maior segurança e produtividade.
- Playwright: Ferramenta de teste end-to-end para garantir a funcionalidade do projeto.
my-app/
├── src/
│ ├── components/ # Componentes usados durante o desenvolvimento (timer, modal, header etc)
│ ├── stores/ # Gerenciamento de estado (tempo e dados do candidato)
│ ├── routes/
│ │ ├── +page.svelte # Página principal com o formulário
│ │ ├── candidate/
│ │ │ └── +page.svelte # Página do candidato
│ │ └── +layout.svelte # Layout comum para as páginas
│ └── app.html # Template HTML base
├── tests/
│ └── browser.spec.ts # Testes end-to-end com Playwright
├── playwright.config.ts # Configuração do Playwright
├── tailwind.config.cjs # Configuração do TailwindCSS
❗️ | Certifique-se de ter as seguintes ferramentas instaladas em sua máquina antes de prosseguir:
- Node.js (v18 ou superior)
- PNPM (gerenciador de pacotes)
- Clone o repositório:
git clone https://github.com/mewmewdevart/LesserFormCountdown.git cd LesserFormCountdown - Instale as dependências:
pnpm install
- Execute o projeto:
pnpm run dev
- Acesse o site em:
http://localhost:5173.
3e750fe4f91c4c27bf03b8a18478fd97.mp4
Para garantir que todas as funcionalidades estão funcionando corretamente, execute os testes com Playwright:
npx playwright test browser.spec.tsOs testes cobrem todos os cenários críticos do projeto, garantindo que a aplicação funcione conforme o esperado. Abaixo estão os principais cenários testados:
- Início do Desafio e Contador Regressivo:
- Verifica se o contador regressivo é exibido corretamente após o início do desafio.
- Confirma que o tempo é decrementado a cada segundo.
- Validação do Formulário:
- Testa se os campos do formulário são validados corretamente.
- Verifica se o botão de envio é desabilitado para entradas inválidas.
- Envio do Formulário Dentro do Tempo Limite:
- Confirma que, ao enviar o formulário dentro dos 15 segundos, a modal de sucesso é exibida.
- Verifica se os dados do candidato são salvos corretamente.
- Exibição da Modal de Falha:
- Testa se a modal de falha é exibida quando o tempo acaba antes do envio do formulário.
- Navegação Entre Páginas:
- Verifica se a navegação entre a página do formulário e a página do candidato ocorre sem interromper a contagem regressiva.
- Confirma que a página do candidato exibe os dados corretamente após o envio bem-sucedido.
- Fechamento das Modais:
- Testa se as modais de sucesso e falha podem ser fechadas clicando no botão de fechar (
X) ou fora da modal.
- Testa se as modais de sucesso e falha podem ser fechadas clicando no botão de fechar (
- Acesso à Página do Candidato:
- Verifica se a página do candidato exibe uma mensagem de aviso caso o desafio não tenha sido concluído com sucesso.
- Confirma que os detalhes do candidato são exibidos corretamente após o envio bem-sucedido.
Este projeto está licenciado sob a MIT License.
Desenvolvido com muito ☕ por Larissa Cristina Benedito