QUIZ - Desafio de código

Inicializando

Acessar a raiz do diretório do projeto e executar o comando:

yarn

Estrutura das pastas

my-app
├── src/
│   ├── compoments/
│   │   ├── Footer/
│   │   │   └── index.tsx
│   │   │   └── styles.ts
│   │   └── Header/
│   │       └── index.tsx
│   │       └── styles.ts
│   ├── context/
│   │   └── QuestionsContext.tsx
│   ├── pages/
│   │   ├── Home/
│   │   │   └── index.tsx
│   │   │   └── styles.ts
│   │   ├── PAge404/
│   │   │   └── index.tsx
│   │   │   └── styles.ts
│   │   ├── Questions/
│   │   │   └── index.tsx
│   │   │   └── styles.ts
│   │   ├── Score/
│   │   │   └── index.tsx
│   │   │   └── styles.ts
│   │   └── index.tsx
│   ├── routes/
│   │   └── index.tsx
│   ├── services/
│   │   └── api.ts
│   ├── styles/
│   │   └── global.ts
│   ├── App.tsx
│   └── index.tsx
├── .editorconfig
├── .editorignore
├── .eslintrc.json
├── .gitignore
├── prettier.config.js
├── README.md
└── tsconfig.json

Resumo

Seu desafio é criar um QUIZ de 10 questões, resposta possíveis Verdadeiro ou Falso, utilizando React. Você não deve implementar apenas a solução mais básica. Essa é uma chance para mostrar suas habilidades e impressionar.

A maneira como você estrutura o seu código conta muito. A avaliação é feita principalmente de acordo com estes critérios:

• Funcionalidade
• Formato do código
• Estrutura do projeto
• Escalabilidade
• Manutenabilidade
• Uso de melhores práticas de código

Alguns pontos específicos que procuramos em seu código:

• Typescript, se você souber
• Implementação "correta" de um gerenciador de estado
• Implementação "correta" de navegação (rotas)
• Componentização
• Comunicação no repositório e/ou código
• Melhores práticas com requisições na API e dados
• Separação de responsabilidades entre lógica de negócio e lógica de UI (interface)

Objetivos

Implementar as telas com base nos esqueletos e API abaixo. Os esqueletos podem não estar tão completos, então use sua criatividade para a parte de UI/UX. Lembre-se que este teste não é para designer, então fique tranquilo e livre para implementar sua UI, não seremos rígidos quanto a isso. Para este desafio, não use um boilerplate como React Boilerplate, por exemplo. Queremos entender como você estrutura um projeto do zero e quais ferramentas/padrões você utiliza. create-react-app pode ser utilizado sem problemas.

Importante: Não deixe de enviar seu código. Sabemos que este teste é complexo, vamos avaliar com carinho!

Especificações

Crie um novo repositório em sua conta do Github.

Dados:

Para pegar os dados das questões: https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean

Exemplo de JSON retornado:

{
  "response_code": 0,
  "results": [
    {
      "category": "Entertainment: Video Games",
      "type": "boolean",
      "difficulty": "hard",
      "question": "Unturned originally started as a Roblox game.",
      "correct_answer": "True",
      "incorrect_answers": [
        "False"
      ]
    },…]}

Tela inicial:

• Texto estático
• Botão START navega para a tela do QUIZ e inicia o QUIZ

Tela do QUIZ:

• O título contém a categoria da questão
• O Card no centro da tela contém a questão atual
• A próxima questão aparece automaticamente após responder "True" ou "False"
• Depois de todas as questões serem respondidas, navegar para a tela de Resultados

Tela de resultados:

• O resultado mostra o percentual de acerto
• Mostrar uma lista com todas as questões, e se foi correta ou não
• O botão PLAY AGAIN começa novamente e navega para a tela Inicial da aplicação