Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joaoespacheco/trybe-project-18-trivia-game
Aplicação front-end de um jogo de perguntas e respostas no estilo Trívia
https://github.com/joaoespacheco/trybe-project-18-trivia-game
agile agile-development css html javascript react react-router react-testing-library redux
Last synced: 16 days ago
JSON representation
Aplicação front-end de um jogo de perguntas e respostas no estilo Trívia
- Host: GitHub
- URL: https://github.com/joaoespacheco/trybe-project-18-trivia-game
- Owner: joaoespacheco
- Created: 2022-11-14T22:07:25.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-12T02:24:48.000Z (about 2 years ago)
- Last Synced: 2024-11-21T17:11:43.287Z (3 months ago)
- Topics: agile, agile-development, css, html, javascript, react, react-router, react-testing-library, redux
- Language: JavaScript
- Homepage: https://trivia-joaoespacheco.vercel.app/
- Size: 5.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Trivia Game 🧠
## 📄 Sobre:
Projeto desenvolvido em grupo durante o módulo de front-end do curso de desenvolvimento web da [Trybe](https://www.betrybe.com/).
Neste projeto foi desenvolvido a aplicação de um jogo no estilo [trivia](https://www.collinsdictionary.com/dictionary/english/trivia-game#:~:text=(%CB%88tr%C9%AAv%C9%AA%C9%99%20%C9%A1e%C9%AAm%20)%20or%20trivia%20quiz,unimportant%20facts%20in%20many%20subjects).
Através da aplicação os usuários poderão:
> * Logar no jogo e, se o email tiver cadastro no site [Gravatar](https://pt.gravatar.com/), 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](https://opentdb.com/api_config.php). Porém para está aplicação foi criada uma API própria chamada [Tryvia API](https://github.com/peterfritz/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
### Tela de login:
### Tela de configurações:
### Tela de jogo:
### Tela de feedback:
### Tela de ranking:
### [👨💻 Clique aqui para acessar o projeto em seu navegador](https://trivia-joaoespacheco.vercel.app/)
## ⚙️ Execução
Faça o clone deste repositório com o seguinte comando:
git clone [email protected]: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
Para executar e verificar a cobertura de testes, rode o comando abaixo:
npm run test-coverage
## 🤹🏽 Habilidades Desenvolvidas:
* 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
## 🧰 Ferramentas:
* HTML
* CSS
* JavaScript
* React
* React Router
* Redux
* React Testing Library
* Trello
## 📝 Desenvolvido por:
* [João Emanuel Soares Pacheco](https://github.com/joaoespacheco)
* [Jean Paul Bernhardt](https://github.com/beralb)
* [Lucas Martins Figueiredo](https://github.com/lucasmartinsf)
* [Leandro Camargo](https://github.com/leandro-bcamargo)
* [Peter Fritz](https://github.com/peterfritz)