Boas vindas ao repositório do projeto de Trivia!

Técnologias usadas

Habilidades

Nesse projeto, fui capaz de:

Criar um store Redux em aplicações React
Criar reducers no Redux em aplicações React
Criar actions no Redux em aplicações React
Criar dispatchers no Redux em aplicações React
Conectar Redux aos componentes React
Criar actions assíncronas na sua aplicação React que faz uso de Redux.
Implementar testes unitários.

O que foi desenvolvido:

Você deverá desenvolver um jogo de perguntas e respostas baseado no jogo Trivia (tipo um show do milhão americano rs) utilizando React e Redux, desenvolvendo em grupo suas funcionalidades de acordo com as demandas definidas em um quadro Kanban. Confira o Slack para saber como acessar o quadro! Para viver um cenário mais próximo do mercado de trabalho, você deve fazer uma cópia desse quadro para utilizar com seu grupo. É de suma importância que o grupo se organize utilizando o quadro para maior eficiência e para que se minimizem os conflitos que a união de vários códigos trará. A partir dessas demandas, teremos uma aplicação onde a pessoa usuária poderá:

Logar no jogo e, se o email tiver cadastro no site Gravatar, ter sua foto associada ao perfil da pessoa usuária.
Acessar a página referente ao jogo, onde se deverá escolher uma das respostas disponíveis para cada uma das perguntas apresentadas. A resposta deve ser marcada antes do contador de tempo chegar a zero, caso contrário a resposta deverá ser considerada errada.
Ser redirecionada, após 5 perguntas respondidas, para a tela de score, onde o texto mostrado depende do número de acertos.
Visualizar a página de ranking, se quiser, ao final de cada jogo.
Configurar algumas opções para o jogo em uma tela de configuração acessível a partir do cabeçalho do app.

Rodando o Projeto:

Browser / URL

Acesse o Link de Deploy.

Localmente

Dê o fork no projeto e clone-o para sua maquina digitando o comando em seu terminal:
```
git clone git@github.com:rafaelPermec/trivia-react-redux.git
```
Entre com o comando em seu terminal, para entrar no diretório principal e instalar as dependências do projeto:
```
cd trivia-react-redux && npm install
```
Digite o comando abaixo em seu terminal e espere o browser abrir o projeto!
```
npm start
```

Cenário de Testes

ESLint e Stylelint

Para garantir a qualidade do código, utilizei neste projeto os linters ESLint e Stylelint. Assim o código estará alinhado com as boas práticas de desenvolvimento, sendo mais legível e de fácil manutenção! Para rodá-los localmente no projeto, execute os comandos abaixo:

  npm run lint
  npm run lint:styles

Cypress

Cypress é uma ferramenta de teste de front-end desenvolvida para a web. Você pode rodar o cypress localmente para verificar se seus requisitos estão passando, para isso execute um dos seguintes comandos:

Para executar os testes apenas no terminal:

npm test

Para executar os testes e vê-los rodando em uma janela de navegador:

npm run cypress:open

npx cypress open

Após executar um dos dois comandos acima, será aberta uma janela de navegador e então basta clicar no nome do arquivo de teste que quiser executar (project.spec.js), ou para executar todos os testes clique em Run all specs

Cobertura de testes

Essa cobertura avalia a eficácia dos testes implementados de acordo com os requisitos.

Para executar e acompanhar a implementação da sua cobertura de testes, rode o comando abaixo:

npm run test:coverage

For Geeks:

API de Trivia

API de Trivia

A API do Trivia é bem simples. Temos 2 endpoints que vamos precisar.

Pegar o token de sessão da pessoa que está jogando
Pegar perguntas e respostas

Primeiro, é necessário fazer um GET request para:

https://opentdb.com/api_token.php?command=request

Esse endpoint te retornará o token que vai ser utilizado nas requisições seguintes. A resposta dele será:

{
   "response_code":0,
   "response_message":"Token Generated Successfully!",
   "token":"f00cb469ce38726ee00a7c6836761b0a4fb808181a125dcde6d50a9f3c9127b6"
}

Para pegar as perguntas, você deve realizar um GET request para o seguinte endpoint:

https://opentdb.com/api.php?amount=${quantidade-de-perguntas-retornadas}&token=${seu-token-aqui}

Gravatar

Gravatar

O Gravatar é um serviço que permite deixar o avatar global a partir do email cadastrado, ele mostra sua foto cadastrada em qualquer site vinculado. Na tela de Inicio, a pessoa que joga pode colocar um e-mail que deve fazer uma consulta a API do Gravatar.

A Implementação é feita baseada no e-mail. Esse email deve ser transformado em uma hash MD5 (https://br.gravatar.com/site/implement/hash/). Para gerar tal hash, recomendamos utilizar o CryptoJs.

Por exemplo:

Garantida a instalação do CryptoJS no projeto, importe o MD5: import md5 from 'crypto-js/md5';
Converta o email do usuário: md5(emailDoUsuário).toString();

Atenção: Precisamos utilizar o toString() ao final da conversão.

Após a geração da hash, basta adicionar o valor gerado no final da URL:

// Formato de URL necessário:
https://www.gravatar.com/avatar/${hash-gerada}

// Exemplo de URL com hash de uma pessoa
https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50

// Exemplo de imagem exibida com a URL
<img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" />

rafaelPermec/trivia-react-redux