Trivia Game é um jogo de perguntas e respostas interativo onde os jogadores podem testar seus conhecimentos em diversas categorias. O jogo utiliza a API do Open Trivia Database para gerar perguntas aleatórias com diferentes níveis de dificuldade.
- ✅ Autenticação de Jogador - Sistema de login com nome e email do jogador
- 🎲 Perguntas Dinâmicas - Integração com API externa para perguntas variadas
- ⏱️ Sistema de Pontuação - Pontos baseados na dificuldade e tempo de resposta
- 📊 Feedback Personalizado - Mensagens motivacionais baseadas no desempenho
- 🏆 Ranking - Visualize os melhores jogadores e suas pontuações
- 🎨 Interface Responsiva - Design adaptável para diferentes dispositivos
- ⚙️ Configurações - Personalize sua experiência de jogo
- Login: Insira seu nome e email para começar
- Jogo: Responda 5 perguntas de múltipla escolha
- Pontuação: Ganhe pontos baseados em acertos, dificuldade e velocidade
- Feedback: Veja seu desempenho e estatísticas
- Ranking: Compare sua pontuação com outros jogadores
Este projeto foi desenvolvido com as seguintes tecnologias:
- React - Biblioteca JavaScript para construção de interfaces
- Redux - Gerenciamento de estado global
- React Router DOM - Navegação entre páginas
- Redux Thunk - Middleware para ações assíncronas
- Jest - Framework de testes JavaScript
- React Testing Library - Testes de componentes React
- Cypress - Testes end-to-end
- CryptoJS - Criptografia e hash
- ESLint - Linter para manter qualidade do código
- Vercel - Deploy e hospedagem
🏠 Tela de Login → 🎲 Tela de Jogo → 📊 Feedback → 🏆 Ranking
- Node.js 16.x ou superior
- npm ou yarn
- Clone o repositório
git clone https://github.com/Beto1821/trivia-react-redux.git
cd trivia-react-redux- Instale as dependências
npm install- Execute o projeto
npm start- Acesse no navegador
http://localhost:3000
npm start # Inicia o servidor de desenvolvimento
npm test # Executa os testes em modo watch
npm run build # Cria build de produção
npm run cy:open # Abre o Cypress para testes E2E
npm run cy # Executa os testes Cypress
npm run lint # Verifica a qualidade do códigotrivia-react-redux/
├── public/ # Arquivos públicos estáticos
├── src/
│ ├── components/ # Componentes reutilizáveis
│ │ ├── Header.jsx # Cabeçalho com info do jogador
│ │ └── RankingCard.jsx # Card de exibição no ranking
│ ├── pages/ # Páginas da aplicação
│ │ ├── Login.jsx # Tela de login
│ │ ├── Game.jsx # Tela principal do jogo
│ │ ├── Feedback.jsx # Tela de feedback
│ │ ├── Ranking.jsx # Tela de ranking
│ │ └── Settings.jsx # Tela de configurações
│ ├── redux/ # Gerenciamento de estado
│ │ ├── actions/ # Actions do Redux
│ │ └── reducers/ # Reducers do Redux
│ ├── tests/ # Testes unitários e de integração
│ ├── App.js # Componente principal
│ └── index.js # Ponto de entrada
├── cypress/ # Testes E2E
│ ├── integration/ # Specs de teste
│ ├── fixtures/ # Dados de teste
│ └── mocks/ # Mocks para API
└── package.json # Dependências e scripts
O projeto possui cobertura de testes em múltiplas camadas:
npm test # Modo watch
npm run test-coverage # Com relatório de coberturanpm run cy:open # Interface visual
npm run cy # Modo headless- ✅ Tela de Login
- ✅ Tela de Jogo
- ✅ Tela de Feedback
- ✅ Tela de Ranking
- ✅ Componentes (Header, RankingCard)
- ✅ Redux (Actions e Reducers)
A pontuação é calculada com base em:
- Acerto: Resposta correta (+10 pontos base)
- Dificuldade:
- Easy: multiplicador 1
- Medium: multiplicador 2
- Hard: multiplicador 3
- Tempo: Quanto mais rápido, mais pontos (30 segundos por pergunta)
Fórmula: 10 + (timer * difficulty)
- LocalStorage para salvar ranking
- Estado do jogador mantido durante a sessão
- Hash MD5 para Gravatar
Este projeto foi desenvolvido como parte do curso da Trybe.
Este projeto foi desenvolvido em grupo com a colaboração de:
 Adalberto R. Ribeiro |
 Henrique Ambrosano |
 Thiago Gasparini |
 Trybe Tech Ops |
Desenvolvido com ❤️ e muito ☕
⭐ Se gostou do projeto, deixe uma estrela!