CRUD FullStack Antônio Martos Harres

[wh1t3h47]

Atenção:

⚠️ O Heroku desativa automaticamente o deploy, e a única forma de reativar é colocando informações de cartão de crédito, mesmo colocando o meu, que é internacional, ele falha ao verificar e não me deixa instalar o plugin que mantém o servidor no ar. Eu terminei ontem (dia 7/08), mas os quatro últimos commits do dia 8 foram para resolver esse problema, eu criei uma action que faz uma requisição a cada 4 horas para manter o servidor em pé.

Uma ótima notícia é que essa requisição que eu criei no Github actions está funcionando para manter o servidor no ar, ou seja, o sistema está funcional.

O que foi implementado?

Backend

1. Queries ágeis do MongoDB (lean queries, paginação indexada por ID);
2. Deploy do MongoDB no Atlas;
3. Class-validator e class-transformer para proteger de vulnerabilidades de confusão de tipos e injeção de NoSQL;
4. Serviço de importação da planilha para o Mongo;
5. Dotenv e tipagens para o mesmo usando namespaces;
6. Filtragem de erros e proteção de vazamento de dados sensíveis;
7. Middleware para fazer hashing e assistir o arquivo de planilha (ideia descontinuada);
8. CRUD completa, com deleteAll, paginação, put e post (implementado corretamente de acordo com os padrões);
9. Testes de sucesso e falha para todas as rotas usando bash e curl;
10. JSDoc com uma cobertura excelente de documentação.

Frontend

1. Aplicação React otimizada ao máximo, utilizando babel, e, com vários plugins, Webpack 5, que é mais recente que o Webpack 4 - utilizado pelo create-react-app;
2. Consumo de API centralizada com os dados originários de apenas uma fonte, trazendo uma cobertura de ataque menor;
3. Three-step-loading, com a primeira entrega visual de um spinner de carregamento feito com CSS inline no próprio HTML;
4. Normalize.css, Stylesheets globais de Sass que evitam imports (feito no webpack) e acesso/ utilização de variáveis, mixins e propriedades do Bootstrap diretamente e nativamente no Sass;
5. React-router configurado de uma maneira que permite máxima escalabilidade e organização;
6. Utilização de Grid e estilo Mansonry, assim como a utilização de FlexBox;
7. Modal de confirmação, toasts para alertar erros e hooks render-props para class componentes;
8. Componentes majoritariamente puros, que são melhores no desempenho;
9. Api com cache, configurada para primeiro pegar do cache e depois fazer uma requisição em seguida, trazendo uma sensação de resposta instantânea ao usuário sem comprometer a atualidade dos dados;
10. Boa cobertura de JSDoc;
11. Uttilização de um truque inusitado que eu nem sabia que era possível para poder importar todas as imagens de uma pasta dentro do node_modules e mapear elas de acordo com o nome delas (no caso os sprites de Pokémon da PokeAPI), assim como a implementação de imports dinâmicos e do carregamento de um esqueleto antes de baixar as informações;
12. Carregamento de card de Pokémon com scroll infinito, esses são baixados a medida que o usuário desce a página.

Monorepo

1. Workflows automatizados para fazer análise estática de código, alertar sobre dependências vulneráveis no projeto, fazer linting automatizado (infelizmente com alguns bugs), rastreamento de Issues, Pull Requests e branches abandonados e também minificação de imagem;
2. Declarações de tipos compartilhadas entre frontend e backend para facilitar o consumo da API e manter o princípio DRY - Don't Repeat Yourself;
3. Gitignore compartilhado para o projeto inteiro;
4. Yarn workspace para garantir uma boa integração entre os pacotes e dependências.

O que ficou faltando?

Como já foi entregue, não modificarei a PR, mas adicionarei no meu projeto na branch develop

• Configurar o plugin ImageMinimizer do webpack para poder trazer um SEO melhor, especialmente para mobile;
• Utilizar uma store do Redux para modo de edição/ administração;
• Implementar autenticação apropriada para postar na API: JWT utilizando um algorítmo que seja seguro e OAuth;
• Implementar no frontend outros métodos CRUD além de leitura, poder editar apenas uma propriedade no cartão utilizando patch, assim como um menu adequado para edição de todas as propriedades com PUT e também um menu de criação de Pokémons que permita escolher a imagem;
• Remover ítens do DOM conforme acontece o scroll infinito (tá prejudicando muito o SEO, especialmente no mobile);
• Instalar stylelint, integrar no workflow do eslint e arrumar o workflow;
• Animações ao carregar os cartões, bem como uma box shadow no hover;
• Investigar o porquê o TypeScript está ignorando as declarações .d.ts geradas para arquivos Sass;
• Página adequada de créditos pelos assets;
• Fazer busca de Pokémons, utilizando Fuzzysort (o algorítmo mais adequado que encontrei para buscar dados em massa;
• Utilizar uma ferramenta para exportar o JSDoc para HTML ou Markdown;
• Integrar os testes da API no Jest, assim como trazer testes para o Front;
• Fazer deploy do front em outro ambiente, que trabalhe bem com Brotli ao invés de gzip (brotli já está configurado e aumenta o SEO);

SEO (sujeito a alterações):

Desktop:	Celular:
60 a 80	25 a 35
médio/bom	ruim