Projeto desenvolvido em grupo durante o módulo de front-end do curso de desenvolvimento web da Trybe.
Neste projeto foi desenvolvido a aplicação de um jogo no estilo trivia.
Através da aplicação os usuários poderão:
- 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 o usuário deverá escolher uma das respostas disponíveis antes do contador de tempo chegar a zero.
- Ser redirecionados ao final do jogo 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.
Os dados das perguntas utilizadas no projeto originalmente eram obtidos através da Open Trivia Database. Porém para está aplicação foi criada uma API própria chamada Tryvia API com perguntas e respostas em PT-BR.
Para o gerenciamento do estado global foi utilizada a biblioteca Redux.
Também foram realizados testes unitários utilizando React Testing Library.
Durante a elaboração do projeto foram utilizadas metodologias de desenvolvimento ágil.
Desempenho
Aprovado com 100% de desempenho em todos os requisitos
Requisitos
Requisitos obrigatórios:
Tela de início/login:
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. Crie um botão que leva a pessoa para tela de configuração
4. Desenvolva testes para atingir 90% de cobertura da tela de Login
Tela de jogo:
5. Crie um header que deve conter as informações da pessoa jogadora
6. Crie a página de jogo que deve conter as informações relacionadas à pergunta
7. Desenvolva o estilo que, ao clicar em uma resposta, a correta deve ficar verde e as incorretas, vermelhas
8. Desenvolva um timer onde a pessoa que joga tem 30 segundos para responder
9. Crie o placar
10. Crie um botão de next que apareça após a resposta ser dada
Tela de feedback:
11. Desenvolva o jogo de forma que a pessoa jogadora deve responder 5 perguntas no total
13. Crie a mensagem de feedback para ser exibida a pessoa usuária
14. Exiba as informações relacionadas aos resultados obtidos para a pessoa usuária
15. Crie a opção para a pessoa jogadora poder jogar novamente
16. Crie a opção para a pessoa jogadora poder visualizar a tela de ranking
17. Desenvolva testes para atingir 90% de cobertura da tela de Feedbacks
Tela de ranking:
18. Crie um botão para ir ao início
19. Crie o conteúdo da tela de ranking
20. Desenvolva testes para atingir 90% de cobertura da tela de Ranking
Testes da tela de jogo:
21. Desenvolva testes para atingir 90% de cobertura da tela de Jogo
Testes de cobertura da aplicação:
22. Desenvolva testes para atingir 95% de cobertura total
Requisitos não avaliativos:
23. Ao mudar o valor do dropdown categoria, apenas perguntas da categoria selecionada devem aparecer para a pessoa que está jogando
24. Ao mudar o valor do dropdown dificuldade, apenas perguntas da dificuldade selecionada devem aparecer para a pessoa que está jogando
25. Ao mudar o valor do dropdown tipo, apenas perguntas do tipo selecionado devem aparecer para a pessoa que está jogando
Imagens do projeto
Faça o clone deste repositório com o seguinte comando:
git clone git@github.com:joaoespacheco/Trybe-Project-18-trivia-game.git
Dentro da pasta raiz do projeto, instale as dependências com o seguinte comando:
npm install
Inicie a aplicação com o comando abaixo:
npm start
Para exeutar os testes deve-se utilizar o seguinte comando:
npm test
Caso queira executar um teste específico, rode o comando abaixo:
npm test <nome-do-arquivo>
Para executar e verificar a cobertura de testes, rode o comando abaixo:
npm run test-coverage
- Trabalhar em grupo utilizando metodologias de desenvolvimento ágil
- Desenvolver uma aplicação react utilizando Redux como gerenciador de estado global
- Consumir dados de uma API
- Utilizar React Router
- Realizar testes unitários utilizando React Testing Library
- HTML
- CSS
- JavaScript
- React
- React Router
- Redux
- React Testing Library
- Trello