Teste Técnico Frontend

Sizebay

Javascript, CSS, TailwindCSS, React, RTL

São João Baptista - Portugal

Software

1 - 10

/sizebay
/sizebay
sizebay.com

A Sizebay nasceu com o objetivo de resolver um dos maiores problemas de quem vende roupa pela internet: a desconfiança do consumidor quanto ao tamanho e caimento da roupa.

Sobre o Teste

No desafio técnico Sizebay Frontend Challenge para níveis Junior/Pleno, você precisará construir uma aplicação web utilizando as tecnologias React com Hooks e Styled Components. O objetivo é criar uma interface amigável que permita aos usuários criar tarefas, acompanhar o progresso e gerenciar pendências em uma lista. O design system, incluindo fonte e dimensões de tela, está disponível no link fornecido. Você deve seguir a estrutura básica de componentização do React, com divisão de responsabilidade entre os componentes com base nas ações. Testes unitários são opcionais, mas serão considerados um bônus. Você é livre para escolher como construir a aplicação (CRA, Vite, Parcel etc.), mas um boilerplate é fornecido. No desafio para níveis Senior, você será responsável por criar um web app para exibir destaques de produtos da SizeFashion, usando React com API de Hooks, TailwindCSS, e React Testing Library para testes unitários. A composição da UI e a adaptação mobile também são requisitos. Certifique-se de documentar corretamente o README para o projeto.

Instruções do Teste

Link para o teste técnico original

Baixar Arquivos do Teste Técnico

Sizebay Frontend Challenge - Desafio para Frontend Junior/Pleno!

O desafio

Pediremos que você construa uma aplicação web que permita ao usuário criar tarefas, acompanhar seu progresso e administrar suas pendências em uma lista, por meio de um layout amigável. Mais detalhes abaixo.

Recursos

UI/UX: https://xd.adobe.com/view/1dd85ae3-466a-46b4-8d38-f1c054d42ef4-488b/ PS: O design system está incluso, incluindo a fonte e as dimensões de tela.

Instruções

O teste está disponível tanto para candidatos quanto para quem quer apenas experimentar. As instruções se manterão as mesmas:

  • Faça um fork desse projeto
  • Ao finalizar, faça um Pull Request e nos avise via e-mail
  • Aguarde o retorno

Requisitos

  • O projeto precisa seguir a estrutura básica de componentização do React, assim como o seu file structuring (https://reactjs.org/docs/faq-structure.html)
  • Divida a responsabilidade dos seus componentes com base na ação de cada um
  • O projeto não pode ter erros ou warnings
  • Testes unitários são opcionais porém serão considerados um bônus de entrega.
  • Você está livre para construir a aplicação com o método que preferir (CRA, Vite, Parcel, etc). Contudo, nós possuimos um boilerplate usado internamente.
  • Tenha um comando que instale os pacotes e rode o projeto localmente para facilitar a sua avaliação. Exemplo: yarn wrap

Tecnologias

Desafio para Frontend Senior!

O desafio

A SizeFashion irá apresentar um highlight de produtos das suas coleções em um grande evento nacional. Você ficou encarregado de exibir essas coleções num web app, para garantir um acesso prático ao time de customer success, que vai cuidar da apresentação. Por conta da urgência da entrega e levando em consideração o seu nível técnico, a composição da UI ficará sob sua responsabilidade também.

Recursos

Afim de permitir um canvas no desenvolvimento, este projeto não possui um mockup/layout definido. Dito isso, é importante que o seu layout:

Instruções

O teste está disponível tanto para candidatos quanto para quem quer apenas experimentar. As instruções se manterão as mesmas:

  • Faça um fork desse projeto
  • Ao finalizar, faça um Pull Request e nos avise via e-mail
  • Crie sua branch com o prefix senior seguindo pelo seu username (e.g senior/vaporwavie) para facilitar o nosso lado!
  • Aguarde o retorno. A revisão será feita pela nossa equipe. O pós review é valioso e será considerado!

Requisitos e Tecnologias

PS: usamos yarn como padrão na Sizebay!

Requisitos

  • Deve ser possível filtrar por coleção, com base nas categorias disponíveis
  • Deve ser possível pesquisar por N produtos
  • Deve ser possível pesquisar por N produtos aplicando um filtro específico
  • Ao usuário clicar em um produto em específico, deve ser possível isolar ele numa página, que aproveite melhor deste conteúdo
  • Caso o usuário mude de filtro, é esperado que isso seja persistido no browser
  • Sua UI precisa ser mobile ready
  • Dica: Esperamos uma entrega semelhante ao que é visto na https://store.sizebay.com, permitimos o uso como inspiração, mas busque compor a sua interface livremente, não prendendo sua imaginação apenas àquele escopo.

Tecnologias

  • React
    • API de Hooks
    • Composição com Suspense API e Context API
    • Implementação junto com o Typescript
  • TailwindCSS
    • Não utilize flowbite ou bibliotecas que adicionem muito boilerplate
  • Composição apropriada de file structure (api, components, utils, hooks, etc)
    • Dito isso, garanta que a sua arquitetura do frontend é compreensível, maintainable e de fácil acesso
  • Realize testes unitários utilizando Jest + React Testing Library
    • Tenha esses testes unitários sob um comando yarn test
  • Organize seus commits corretamente, divida em small chunks de push
  • Você está livre para construir a aplicação com o método que preferir (menos CRA)
  • Documente corretamente o seu README: a falta de informação para rodar o projeto e o ambiente será avaliado como um ponto negativo.

Dúvidas?

Entre em contato com [email protected] ou [email protected]