Curso do professor Rodrigo Manguinho com foco em ReactJS com Typescript e Hooks, utilizando TDD, Clean Architecture, Design Patterns e SOLID.
Ideia do primeiro modulo do curso é passar as configurações do git que o professor indica, e também as configurações iniciais do projeto que será aplicado no curso.
Nesse segundo modulo já iniciamos com os primeiros testes para o caso de uso de login do usuário. Criamos testes para cada mensagem de erro ou sucesso que a API pode nos retornar, deixando cada arquivo de erro com a sua responsabilidade.
Na seção 3 implementamos o axios de uma forma com que o sistema não fique dependente de uma única ferramenta para requisições, então deixamos o código genérico para caso necessário, poder trocar a ferramenta sem prejudicar o resto do sistema.
Essa seção tivemos a oportunidade de configurar o React na mão, sem o uso do CRA (Create React App), assim ganhamos vantagens de utilizar o react de uma forma mais "livre". Configuramos também toda a parte do webpack, iniciamos no layout da tela de login e fizemos as devidas coberturas de testes.
Durante essa seção criamos alguns validations para os nossos campos de login, e conhecemos alguns Design Pattern como o Composite e o Builder.
Na seção 6 fizemos a composição do Login, ajustamos alguns Client do nosso serviço do Axios, fizemos alguns novos testes para bater coverage 100% e também criamos variável de ambiente para subir para produção.
A seção 7 foi curta porém muito valiosa, integramos o projeto com o TravisCI e Coveralls para antes de subir o push para o github, as ferramentas verificarem nosso código, e se estiver tudo correto, ai sim liberar o push.
Na seção 8 movemos o LocalStorage para a Infra do projeto, tirando o localStorage "marretado" nos arquivos de layout do projeto. A ideia é deixar o mais genérico possível, e se caso amanha aparecer uma solução melhor do que o localStorage, a gente conseguir alterar o recurso em um único lugar.
A seção 9 criamos o layout, testes e refactores para o #. Por estar aplicando o Clean Code, conseguimos reutilizar muitos códigos da seção 6 nessa feature do #.
Nessa seção vimos como implementar testes de integração com o Cypress, uma ferramenta que simula um "usuário" real utilizando a aplicação. Então incluimos testes de duplo clique no botão submit, envio de dados não permitidos etc.
Na seção 11 criamos o caso de uso do LoadSurveyList, integramos com o HttpGetClient e também criamos todo o layout da página, deixando responsivo e criando o efeito de Shimmer
Aqui criamos autenticação nas rotas existentes, migramos o Route para o Main Layer. Criamos contextos pra aplicação, usando bastante recurso do React.
Na 13 fizemos diversos testes, como de integração, casos de sucesso e erro, utilizamos o Design Pattern Decorator e também crimos hooks customizados, desacoplando diversas responsabilidades da página.