Projeto: Jogo Trivia

O Trivia é um jogo de perguntas e respostas (uma espécie de "Show do Milhão" americano), que foi construído utilizando tecnologias como React e Redux. A elaboração deste projeto foi proposta pela Trybe para ser realizada em equipe, com todos os membros contribuindo de forma efetiva e seguindo as demandas definidas e gerenciadas de forma organizada em um quadro Kanban. Com a aplicação dessas metodologias, conseguimos implementar as funcionalidades necessárias de forma sistemática e eficiente, resultando em uma experiência de jogo envolvente e desafiadora para os usuários.

O jogo consiste nos seguintes passos:

• Logar no jogo e, se o email tiver cadastro no site Gravatar, ter a foto da pessoa usuária associada a seu perfil;
• 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.

Stack utilizada

Front-end: React, Redux, Bootstrap e SCSS.

API's utilizadas

• API com as questões utilizadas no jogo: https://opentdb.com/
• Gravatar: https://www.gravatar.com/avatar

Demonstração

Disponibilizamos abaixo o link para que você possa acessar e conferir a nossa aplicação em pleno funcionamento. Basta clicar no link e você será redirecionado. Aproveite!

https://trivia-project-lake.vercel.app/

Capturas de tela

Disponibilizamos abaixo algumas capturas de tela da aplicação para que você possa visualizar o seu layout e algumas das funcionalidades que desenvolvemos:

• Tela de Login

• Tela das Questões

• Tela de Feedback

• Tela de Ranking

Através dessas imagens, é possível ter uma ideia do design e do estilo da nossa aplicação, bem como de algumas das opções e recursos disponíveis. Esperamos que essas capturas de tela possam ajudar a ilustrar o nosso trabalho e a demonstrar a qualidade e o cuidado que empregamos em sua construção.

Aprendizados

Durante esse projeto, pude adquirir valiosos conhecimentos em relação à aplicação do Redux, bem como aprimorar minhas habilidades em trabalho em equipe, incluindo o alinhamento e a divisão eficiente de tarefas. Com uma distribuição cuidadosa e precisa das atividades entre os membros do grupo, conseguimos alcançar todos os objetivos planejados no cronograma estabelecido previamente. O resultado dessa abordagem foi um projeto executado com sucesso, e que nos proporcionou importantes lições para futuros trabalhos em equipe.

Autores e Divisão de Tarefas

Requisitos

Os requisitos e tarefas solicitados nesse projeto são os seguintes:

1. Crie a tela de login, onde a pessoa que joga deve preencher as informações para iniciar um jogo

2. Crie o botão de iniciar o jogo

3. Desenvolva testes para atingir 90% de cobertura da tela de Login

4. Crie um header que deve conter as informações da pessoa jogadora

5. Crie a página de jogo que deve conter as informações relacionadas à pergunta

6. Desenvolva o estilo que, ao clicar em uma resposta, a correta deve ficar verde e as incorretas, vermelhas

7. Desenvolva um timer onde a pessoa que joga tem 30 segundos para responder

8. Crie o placar para que ao clicar na resposta correta, pontos devem ser somados no placar da pessoa que está jogando seguindo regras específicas

9. Crie um botão de Next que apareça após a resposta ser dada

10. Desenvolva o jogo de forma que a pessoa jogadora deve responder 5 perguntas no total

11. Desenvolva o header de feedback que deve conter as informações da pessoa jogadora

12. Crie a mensagem de feedback para ser exibida a pessoa usuária

13. Exiba as informações relacionadas aos resultados obtidos para a pessoa usuária

14. Crie a opção para a pessoa jogadora poder jogar novamente

15. Crie a opção para a pessoa jogadora poder visualizar a tela de ranking

16. Desenvolva testes para atingir 90% de cobertura da tela de Feedbacks

17. Crie um botão para ir ao início

18. Crie o conteúdo da tela de ranking

19. Desenvolva testes para atingir 90% de cobertura da tela de Ranking

20. Desenvolva testes para atingir 90% de cobertura da tela de Jogo

21. Desenvolva testes para atingir 95% de cobertura total

Autores

Os autores do projeto Trivia são:

• André Resende @andreresende36

  • Responsável pelos requisitos: 2, 4, 8, 9, 10, 11, 12, 13, 14, 15 e 21;
  • Autor ou Co-autor dos arquivos:
    • src/components/Question.jsx
    • src/pages/Feedback.jsx
    • src/pages/Game.jsx
    • src/pages/Login.jsx
    • src/pages/Ranking.jsx
    • src/redux/actions/index.js
    • src/redux/actions/variablesTypes.js
    • src/redux/reducers/player.js
    • src/redux/reducers/questions.js
    • src/services/apiTrivia.js
    • src/service/calcDifficultyIndex.js
    • src/services/randomAnswers.js
    • src/tests/Game.test.js
    • src/App.js

• Guilherme Araújo @guilhermearaujoo

  • Responsável pelos requisitos: 1, 5, 16, 20 e 21. Guilherme também ficou responsável pela estilização do projeto utilizando Bootstrap e SCSS;
  • Autor ou Co-autor dos arquivos:
    • src/components/Header.jsx
    • src/components/Question.jsx
    • src/components/UserRanking.jsx
    • src/pages/Game.jsx
    • src/pages/Feedback.jsx
    • src/pages/Login.jsx
    • src/pages/Ranking.jsx
    • src/redux/actions/index.js
    • src/redux/actions/variablesTypes.js
    • src/redux/reducers/index.js
    • src/redux/reducers/player.js
    • src/redux/reducers/questions.js
    • src/redux/index.js
    • src/services/apiTrivia.js
    • src/services/apiTriviaQuestions.js
    • src/service/localStorage.js
    • src/service/localStorageGetToken.js
    • src/styles/css/style.css
    • src/styles/css/style.css.map
    • src/styles/style.scss
    • src/tests/Feedback.test.js
    • src/tests/Game.test.js
    • src/tests/Login.test.js
    • src/tests/Question.test.js
    • src/App.js
    • src/index.js

• Ismael Soares @ismasoares

  • Responsável pelos requisitos: 6, 18, 19 e 21;
  • Autor ou Co-autor dos arquivos:
    • src/components/UserRanking.jsx
    • src/pages/Feedback.jsx
    • src/pages/Ranking.jsx

• Victor Almeida @vctalmeida

  • Responsável pelos requisitos: 3, 7, 17, 19 e 21;
  • Autor ou Co-autor dos arquivos:
    • src/components/Question.jsx
    • src/pages/Ranking.jsx
    • src/tests/helpers/renderWithRouterAndRedux.js
    • src/tests/Login.test.js
    • src/tests/Ranking.test.js

Obs: os requisitos que se repetem foram desenvolvidos em grupo ou pair-programming.

Qualquer dúvida ou sugestão, deixe-nos uma mensagem!