Desenvolver uma aplicação para gerenciar os produtos da empresa XPTO.
Eu, como usuário desejo:
- Visualizar a listagem de todos os produtos a serem vendidos: com a foto, categoria (exclusivo ou promoção), preço, título, abreviação da descrição e opção de favorito em uma única opção de menu;
- Buscar um produto específico através do seu nome. Aqui é importante ignorar letras maiúsculas, minúsculas e possíveis erros de acentuação;
- Filtrar os produtos das categorias Exclusivo e Promoção através de opções do menu;
- A partir do momento em que eu clicar em um produto da listagem, desejo visualizar sua foto em tamanho maior, descrição completa, ficha técnica e os itens que o identifiquem (nome, descrição abreviada e preço) em uma nova página. Essa página também deverá conter um botão para voltar a tela de listagem de produtos;
- Transformar um produto em favorito através da opção que consta tanto na listagem de produtos quanto na tela dos seus detalhes;
- Todos os produtos favoritos deverão ser filtrados a partir de uma opção do menu;
- Possibilidade de retirar da categoria de favorito desligando a opção que consta tanto na listagem de produtos quanto na tela dos seus detalhes.
- Fork esse repositório;
- Crie sua branch
git checkout -b seu-nome-de-usuário/desenvolvedor-frontend
; - Baixe seu fork
https://github.com/seu-nome-de-usuário/desenvolvedor-frontend.git
; - Desenvolva o teste e crie seu pull request;
- Layout conforme proposto;
- A aplicação deve ser responsiva (Mobile, Tablet, Desktop);
- Desenvolver utilizando ReactJS;
- Utilizar pré-processador de CSS;
- Utilizar Flexbox e/ou Grid;
- Criar rotas para navegação;
- Criar uma busca que deverá ser executada em tempo real na listagem atual;
- Gerenciamento de estado (Redux ou Context API);
- Ao navegar entre as rotas, as informações dos produtos já devem estar no estado.
- Typescript
- Configurar ESLint (padrão Airbnb) e Prettier;
- Utilizar API de Hooks do ReactJS;
- Implementar testes unitários;
- Utilizar Styled Components;
- Utilizar style guide para CSS (BEM, SMACSS);
- Fazer internacionalização da aplicação (EN/PT);
- Criar o Storybook dos componentes;
- Criar um Docker para executar o projeto em produção;
- Publicar o projeto em alguma plataforma (Heroku, Netlify, entre outras).
👋 Boa sorte!