/trivia-project

Uma aplicação utilizando o React e Redux para o desenvolvimento de um jogo de trivia (jogo de perguntas e respostas), consumindo da The Trivia Api para a geração das perguntas

Primary LanguageJavaScript

Trivia

✏ 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

Captura de tela de 2023-01-03 20-57-50

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.

Prévia da aplicação rodando:

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