PROJETO TRIVIA REACT REDUX

Projeto desenvolvido em grupo no módulo de Front-End da Trybe

396d318d-8404-4e18-9b7d-580432b89548.mp4

Acesse o projeto em produção clicando aqui

🎯 Objetivo

Criar um jogo em que um jogador possa usar seu e-mail para fazer login , tendo sua foto de perfil obtida automaticamente do Gravatar e, em seguida, jogar um jogo de trivia com cinco perguntas com temas e níveis de dificuldades variados.O jogador recebe um feedback sobre sua pontuação e pode conferir ao final um ranking com a pontuaçãoo de todos os jogadores.

O aplicativo consome duas APIs públicas, uma para as perguntas e respostas e outra para o avatar do usuário.

📝 Habilidades adquiridas

1. Criar um store Redux em aplicações React
2. Criar reducers no Redux em aplicações React
3. Criar actions no Redux em aplicações React
4. Criar dispatchers no Redux em aplicações React
5. Criar actions assíncronas na sua aplicação React que faz uso de Redux
6. Escrever testes para garantir que a aplicação possua uma boa cobertura de testes
7. Utilizar a métodologia ágil Kanban para dividir e organizar as demandas do projeto

📌 Tecnologias utilizadas no desenvolvimento

✔️ Requisitos do projeto

• Crie a tela de login, onde a pessoa que joga deve preencher as informações para iniciar um jogo
• Crie o botão de iniciar o jogo
• Crie um botão que leva a pessoa para tela de configuração
• Desenvolva testes para atingir 90% de cobertura da tela de Login
• Crie um header que deve conter as informações da pessoa jogadora
• Crie a página de jogo que deve conter as informações relacionadas à pergunta
• Desenvolva o estilo que, ao clicar em uma resposta, a correta deve ficar verde e as incorretas, vermelhas
• Desenvolva um timer onde a pessoa que joga tem 30 segundos para responder
• Crie o placar
• Crie um botão de Next que apareça após a resposta ser dada
• Desenvolva o jogo de forma que a pessoa jogadora deve responder 5 perguntas no total
• Desenvolva o header de feedback que deve conter as informações da pessoa jogadora
• Crie a mensagem de feedback para ser exibida a pessoa usuária
• Exiba as informações relacionadas aos resultados obtidos para a pessoa usuária
• Crie a opção para a pessoa jogadora poder jogar novamente
• Crie a opção para a pessoa jogadora poder visualizar a tela de ranking
• Desenvolva testes para atingir 90% de cobertura da tela de Feedbacks
• Crie um botão para ir ao início
• Crie o conteúdo da tela de ranking
• Desenvolva testes para atingir 90% de cobertura da tela de Ranking
• Desenvolva testes para atingir 90% de cobertura da tela de Jogo
• Desenvolva testes para atingir 95% de cobertura total

🚧 Funcionalidades e melhorias a serem implementadas futuramente:

• Opção para o jogador escolher o tema da pergunta
• Opção para o jogador escolher o nível de dificuldadade da pergunta
• Opção para o jogador escolher as opções de respostas entre multipla escolha e verdadeiro ou falso
• Responsividade e melhorias no CSS da pagina
• Corrigir timer
• Corrigir numero das questoes

⬇️ Instalando dependências

Frontend

cd src/
npm install

⚡ Executando a aplicação

Para rodar o front-end:

cd src/ && npm start

🧪 Executando os testes

Para rodar todos os testes:

npm test

👩🏻‍💻 Projeto desenvolvido por :

1. https://github.com/fkschneider - Fernanda Schneider
2. https://github.com/LeonardoHBSantos - Leonardo Santos
3. https://github.com/lebarrichello - Leticia Barrichello
4. https://github.com/mateus23-oliveira - Mateus Oliveira
5. https://github.com/BortnikDev - Samuel Bortnik