Trivia

🎬 Prévia da aplicação rodando:

demonstracao.da.aplicacao.rodando.mp4

✏ Sobre o projeto

O objetivo do projeto é desenvolver uma aplicação de um jogo de trivia (jogo de perguntas e respostas), consumindo a API The Trivia Api para a geração das perguntas. O projeto consiste em uma tela de login, tela do jogo, página de feedback e ranking. Se o usuário logar no jogo com o email que tiver cadastro no site Gravatar, terá sua foto associada ao perfil da pessoa usuária no jogo, logo na seqüência o usuário tem acesso ao jogo em si. ⏳

O jogo tem 5 perguntas, com 30 segundos para responder cada uma. Caso seja escolhida a resposta correta, a pontuação será baseada no tempo em que levou para responder e na dificuldade da pergunta, após o jogador terminar a partida irá para a tela de feedback que consiste em uma simples avaliação com base na quantidade de perguntas que o jogador acertou, e poderá escolher voltar para tela inicial ou conferir sua pontuação no ranking comparado com outros jogadores da maquina. 🏆

Foram desenvolvidos testes para cada tela da aplicação utilizando o Jest e a biblioteca React Test Library (RTL). 👨‍💻

Habilidades desenvolvidas:

Uso do ReactJS com componentes de classe para desenvolvimento do projeto.
Uso do React Router para paginação.
Uso do Redux no gerenciamento do estado global;
Uso do store Redux em aplicações React
Uso de reducers no Redux em aplicações React
Uso de actions no Redux em aplicações React
Uso de dispatchers no Redux em aplicações React
Conectar Redux aos componentes React
Uso de actions assíncronas na aplicação React que faz uso de Redux.
Uso do React Testing Library para escrever testes e garantir que a aplicação possua uma boa cobertura de testes

🔧 Principais tecnologias utilizadas:

Como utilizar o projeto na sua máquina

1. Deploy:
https://newtrivianeon.netlify.app/

2. Faça o git clone na sua máquina e entre no diretório:

Lembre-se de clonar o repositório no diretório desejado na sua máquina!

git@github.com:Marcio-Gabriel-Roque-Mendes/trivia-project.git
cd trivia-project

Instale as dependências

Atente-se para instalar na pasta raiz do projeto

 npm install

Inicie a aplicação

 npm start

Rode todos os testes com o seguinte comando:

npm run test

Para rodar um teste em específico, digite o seguinte comando, seguido do nome de arquivo de teste que deseja executar. Exemplo:

npm run test CardGame.test.js

Dica: Todos os arquivos de testes desenvolvidos para esse projeto podem ser encontrado no seguinte diretorio:

src/tests

Este projeto foi desenvolvido em grupo por:

Bruno Emanuel
Cesar Holanda
Marcelo Lima
Marcio Gabriel

Utilizamos a metodologia agil Kanban para a gestão de fluxo do nosso trabalho pelo Trello, em paralelo com outras ferramentas de comunicação assíncrona neste caso o Slack e comunicação síncrona sendo o Zoom para videochamada.

Mais informações dos colaboradores do projeto podem ser encontradas nessa publicação feita no Linkedin.