Desafio Front-end

No dia-a-dia, temos alguns desafios, como desenvolver componentes, aplicações, lidar com prazos e etc. Mas sabe o que é um desafio de verdade? Manter um código bom mesmo com situações corriqueiras 💩.

Esse desafio simula situações descritas acima. E tem como objetivo aferir conhecimentos diversos do universo de front-end: HTML, CSS, Javascript, semântica, acessibilidade, componentização…

📙 Importante ressaltar que esse teste é qualitativo e não quantitativo, vamos levar em consideração a qualidade do código e não o número de etapas concluídas.

Ele foi separado em etapas, então, sinta-se a vontade para fazer até onde der.

Enunciado do desafio

A Vagas vai patrocinar um evento e fornecer alguns adesivos (stickers) para as pessoas que irão participar. Criamos um aplicativo web para fazer o controle de quantos adesivos serão entregues. Porém, o app ainda não está pronto e precisamos da sua ajuda para finalizá-lo. Esperamos que você faça propostas a respeito da aplicação, incluindo validações e outras decisões como UX e usabilidade.

Protótipo de exemplo

📙 A designer responsável disponibilizou um protótipo no figma com o exemplo do visual da aplicação Acessar protótipo de exemplo

Código

Você deve utilizar o código deste repositório, como ponto de partida, mas esperamos que você utilize seu próprio GitHub para o desenvolvimento do seu desafio e nos envie o link do repositório no final. Aah, e você pode utilizar as dependências que achar melhor, caso queira.

📙 Vamos avaliar seu JavaScript, HTML e CSS, independentemente das bibliotecas que você utilizar.
📙 Vamos avaliar a organização e performance do seu código.
📙 E também vamos avaliar a acessibilidade e usabilidade da sua UI.

Primeira parte: colocando ordem na casa.

Use as tags HTML de forma semântica para cada cenário.
Fique a vontade para mudar a estrutura da aplicação caso ache necessário.
Na tag <html>, está faltando um parâmetro que é obrigatório. Você consegue identificar e aplicar?
Construa um formulário funcional

Segunda parte: tornando a casa acessível.

Vixe!😱 Parece que o HTML não está totalmente acessível. Você consegue melhorar a acessibilidade?

Terceira parte: vamos validar o formulário?

Validações de formulário ajudam o usuário a não se perder durante o preenchimento das informações necessárias.

Bonus: publicando a aplicação!

Precisamos acessar a aplicação através de uma URL, fique a vontade para usar o serviço de hospedagem que quiser. (Por exemplo: Github pages, Vercel, AWS e etc...)

Não esqueça de inserir no readme do seu projeto, as instruções de como rodar sua aplicação de forma local ;)

Desejamos um ótimo teste para você!!

Links úteis

Eles poderão te ajudar no teste:

Pronto, e agora?

Envie o link da sua publicação e repositório do projeto para codesubmissions@vagas.com.br
Coloque no assunto do email: "Front-end Developer (Pleno ou Sênior) VAGAS.com - seu nome aqui"
No corpo do email, informe qual nível de senioridade você se considera
Deixe alguns de seus contatos como linkedin e telefone
Se quiser, inclua no email, links de outros projetos relevantes que queira nos mostrar.
Antes de enviar, verifique se o link do seu github é o correto e se tudo está funcionando corretamente

E em breve, retornaremos com mais detalhes ❤️

VAGAScom/front-end-challenge