Hero Project CRA

Projeto com base na famosa API da Marvel, permitindo consultar personagens e favoritá-los. Criado com Create React App.

Confira o LIVE DEMO clicando aqui

---

Stack

• React & ReactDOM são as bibliotecas de componentes;
• Styled Components para escrever CSS-in-JS;
• PropTypes para typechecking;
• Husky versão 4 + Lint Staged para rodar Prettier, lint e testes unitários nos arquivos em stage ( git add . ) ao executar git commit, buscando diminuir a quantidade de commits com erros.
• eslint + prettier para manter um padrão e boas práticas na escrita do código;
• React Testing Library para testes unitários;
• Cypress para testes end-to-end;

Dependências

Para o ambiente de desenvolvimento e testes você vai precisar de:

• Node - versão recomendada 14.16.0;
• Cypress;

Arquivos .env:

Para rodar o projeto localmente é necessário criar um arquivo .env com suas respectivas variáveis de ambiente.

Estando na pasta do projeto, você poderá rodar o comando abaixo em seu Terminal para utilizar o arquivo .env.example como modelo:

• cp .env.example .env

Agora basta editar o valor da chave REACT_APP_MARVEL_PUBLIC_KEY pela sua PUBLIC_KEY da Marvel.

Rodando o projeto:

Após clonar o repositório, instale as dependências:

• yarn install

Visualizando o projeto em modo de desenvolvimento:

• yarn start
• Acessar http://localhost:3000/ para visualizar no navegador.

Testes:

Rodando testes unitários:

• yarn unit

Visualizar a cobetura dos testes unitários:

• yarn coverage

Rodando testes End-to-End:

• yarn e2e (a aplicação deve estar em execução)

Linters:

Rodando Prettier para formatar seu código de maneira consistente seguindo um estilo:

• yarn prettier:fix

Rodando Prettier para verificar se existem arquivos fora do estilo estabelecido:

• yarn prettier:check

Rodando a verificação do eslint em arquivos .js procurando más práticas:

• yarn lint

Rodando o eslint para tentar corrigir pequenos problemas, como warnings:

• yarn lint:fix

Rodando a verificação do prettier em arquivos .js procurando inconsistências:

• yarn prettier:check

Rodando o prettier para tentar corrigir inconsistências no padrão de escrita de código:

• yarn prettier:fix

Deploy

• yarn build

Este é o comando padrão de build do projeto que disponibiliza o React em modo de produção e arquivos otimizados.
Ao rodar o comando, o resultado é uma pasta build criada no diretório raíz ( / ).