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). 👨💻
-
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
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.
demonstracao.da.aplicacao.rodando.mp4
Código desenvolvido pelo grupo no projeto Trivia no curso de Desenvolvimento Full Stack da Trybe no qual os alunos deveriam desenvolve-lo para fins didáticos