Bem-vindo(a) ao desafio técnico da vaga de Desenvolvedor Front-end Junior! 🎉
O objetivo deste desafio é avaliar suas habilidades técnicas em desenvolvimento front-end com React, seu olhar para detalhes e sua capacidade de escrever um código limpo, escalável e fácil de manter.
Esperamos que você demonstre domínio em aspectos fundamentais de desenvolvimento web, como responsividade, acessibilidade, performance e boas práticas.
Você deverá construir uma página baseada no protótipo fornecido (link do layout no Figma). Essa página exibe informações sobre um veículo e dados institucionais, obtidos por meio de uma Fake API que você deve implementar.
- Utilize React puro (sem frameworks adicionais como Next.js ou Remix).
- Escolha a abordagem que considerar mais adequada para gerenciar estado e interagir com a API (e.g., Context API, hooks, etc.).
- Utilize CSS ou pré-processadores (como Sass) para estilização.
- Opcionalmente, use bibliotecas para gerenciamento de responsividade (e.g., CSS Grid, Flexbox).
- Você pode estruturar a Fake API como preferir (JSON Server, arquivos estáticos, ou mesmo mock em memória).
- A Fake API deve conter:
- Endpoint de veículo (
/vehicle): fornece os dados do veículo exibido na página. - Endpoint de dados institucionais (
/company): fornece informações institucionais exibidas no rodapé.
- Endpoint de veículo (
Seu projeto será avaliado com base em:
- Responsividade: O layout deve se ajustar a diferentes tamanhos de tela.
- Performance: Minimize carregamentos desnecessários e otimize o tempo de resposta da interface.
- Acessibilidade: Use boas práticas como labels, ARIA e navegação com teclado.
- Escalabilidade: Estruture o código para facilitar a adição de novas funcionalidades.
- Design: Garanta que a interface final esteja alinhada ao protótipo fornecido.
-
Setup do Projeto
- Crie uma aplicação React usando
create-react-appou uma configuração própria. - Organize o código seguindo boas práticas de arquitetura (ex.: separação de componentes, hooks, etc.).
- Crie uma aplicação React usando
-
Fake API
- Estruture e disponibilize a Fake API localmente ou como parte do seu projeto.
- Utilize os seguintes dados como base:
{
"id": 1,
"name": "BMW Série 4 Cabrio",
"price": 179950,
"features": {
"consumption": "14.7 km/l",
"engine": "999 cm3",
"power": "75 cv",
"speed": "154 km/h"
},
"image": "link_da_imagem_do_veículo",
"video": "https://www.youtube.com/watch?v=cFyrTEYyq64",
"legal_text": "Valor de tabela (código 823839), ano/modelo 18/19 à vista a partir de R$ 179.950 ou financiado com entrada de R$ 40.490 (40%) e mais 24 prestações mensais de R$ 1.286, taxa de juros 0% a.m. e 0% a.a. Total da operação: R$ 205.874. Oferta válida para veículos com pintura sólida."
}{
"company_name": "AUTO FORCE PLATAFORMA DE MARKETING DIGITAL LTDA",
"cnpj": "22.580.947/0001-06",
"address": "Av. Prudente de Morais, 3966, Lagoa Nova, Natal/RN – CEP 59056-200",
"phone": "84987654321",
"whatsapp": "84912345678"
}Observação: Os campos phone e whatsapp devem ser exibidos no front-end com uma formatação apropriada (e.g., (84) 99999-9999).
-
Desenvolvimento da Página
- Siga o protótipo para criar o layout, garantindo fidelidade ao design.
- Faça uso de boas práticas para estilização e responsividade.
-
Entrega
- Faça o upload do código em um repositório público no GitHub.
- Inclua um arquivo
README.mdno repositório explicando:- Como executar a aplicação.
- Quais decisões técnicas foram tomadas.
- Quais melhorias adicionais poderiam ser feitas, caso houvesse mais tempo.
Os critérios de avaliação incluem:
- Qualidade do Código: clareza, organização e consistência.
- Fidelidade ao Protótipo: quão próximo o resultado final está do design proposto.
- Boas Práticas: aplicação de padrões modernos de desenvolvimento.
- Funcionalidade: a aplicação funciona conforme o esperado?
- Criatividade: ideias ou melhorias além do escopo proposto serão valorizadas.
Os itens abaixo não são obrigatórios nem desclassificatórios, mas, para se destacar, considere adicionar as seguintes funcionalidades:
- Captura de Leads: Ao clicar no botão "Tenho Interesse", exiba um modal ou formulário para capturar informações do usuário (ex.: nome, telefone e e-mail).
- Navegação para Outras Ofertas: Adicione um componente que permita navegar para outras ofertas, como uma carrossel ou lista de veículos disponíveis.
- Detalhes de Compartilhamento: Inclua botões de compartilhamento social (ex.: WhatsApp, Facebook) para facilitar o envio do link do veículo.
- Animações: Adicione animações leves para transições e interações do usuário, garantindo uma experiência fluida.
- Teste Básico: Crie um teste unitário para validar que os dados do veículo estão sendo corretamente renderizados na interface.
- Estilização: Use variáveis no CSS para temas ou cores e considere organizar o CSS usando a metodologia BEM (saiba mais).
- Class components: Demonstrar a capacidade de trabalhar com Class Components em React também é uma vantagem
Implementação de uma API utilizando Ruby on Rails:
- Caso tenha familiaridade, considere criar a fake API usando Rails. Aqui estão algumas ideias que podem ser implementadas:
- Estruturar endpoints RESTful para fornecer os dados do veículo e da empresa, incluindo o suporte para filtragem ou paginação (se aplicável).
- Usar o Rails para lidar com a formatação dos dados no backend, como o número de telefone e WhatsApp.
- Implementar boas práticas de API, como documentação automática (por exemplo, com Swagger ou API Blueprint).
Por que sugerimos Rails?
Adicionar um backend bem estruturado demonstra uma habilidade extra de desenvolvimento full-stack, além de alinhar com tecnologias que usamos no nosso dia a dia.
Caso tenha alguma dúvida, entre em contato com um dos recrutadores:
- Jéssica Ribeiro: [email protected]
- Pedro Duca: [email protected]
Boa sorte e acelere no desafio! 🚀