Teste para Frontend Junior v2

readme.md

Frontend Developer Junior Challenge 👩‍💻

Objetivo 🥅

Nosso teste consiste em uma aplicação de provas. Para esse teste, apenas o frontend deve ser desenvolvido.

Tecnologias 💽

Aqui na Gama, utilizamos nossa stack baseada em javascript, para ser mais preciso, recomendamos fortemente a adoção das seguintes tecnologias:

• HMTL / CSS / Javascript (Vanilla)
• React

Ainda pode ser utilizada qualquer outra biblioteca que te ajude a solucionar o problema ou substituir alguma, caso queira.

Interfaces

Vamos te dar um help e sugerir a construção das seguintes interfaces, mas caso se sinta confiante e quiser nos surpreender com seus dons de UI Designer, está desafiado

A interface com o resultado final vai ficar por sua conta pensar em como os dados poderiam ser exibidos no final.

Ainda pra te ajudar

Temos a paleta principal de cores utilizada na Gama Academy caso queira personalizar mais

API

A API deverá ser iniciada pelo json-server, executando o seguinte comando:

npx json-server https://gist.githubusercontent.com/jcbombardelli/c9286579e36f986ea505c6c31619fe39/raw/7d3fe3e95ed8aed2af629564183d9b08c761ad59/db.json

Os dados contidos nessa API seguiram a seguinte pseudo-estrutura

- Provas:
  - Campos:
    - Título
- Questões:
  - Campos:
    - Descrição
    - Número da questão
- Alternativas:
  - Campos:
    - Descrição
    - Alternativa correta?

Após executar o comando, a api estará disponível em http://localhost:3000.

Para mais informações sobre a API e o json-server, visite a documentação.

O que será avaliado 🔎

Queremos avaliar sua capacidade de desenvolver e documentar uma apliacação frontend. Serão avaliados:

• Quais outros elementos de interação foram implementados para utilização
• Qualidade de escrita e de execução de código fonte;
• Quais ferramentas foram utilizadas, como e por quê foram escolhidas;
• Seu conhecimento em estruturação paginas
• Seu conhecimento em estilização de paginas
• Capacidade de comprometimento com o próprio desafio;
• Seu dominio ao uso de versionamento de código fonte;

Critérios de aceitação 🦠

• A APP deve ser real e escrita por você. Ferramentas que criam Interfaces a partir de schemas não são aceitas;

• Todos os requisitos precisam ser cumpridos mesmo que você proponha alguma mudança no fluxo geral, um usuário precisa se inscrever em uma prova, responder as provas e ter seu score disponível assim que ela finalizar todas as questões disponíveis. Inclusive encorajamos demais a você encontrar formas mais inteligentes para resolver alguns dos requisitos

• Uma aplicação frontend onde pessoas possam acessar uma prova, respoder as questões e ter o resultado de acertos ao final.

• README.md contendo informações básicas sobre o projeto e um guia para que outro desenvolvedor possa montar o mesmo ambiente e executá-lo em sua máquina.

Itens++ 🎀

Aqui vamos além dos itens mínimos de requisitos, mas darão uma boa qualidade na sua entrega se você resolver segui-los. Então recomendamos fortemente que se dedique de verdade!

• Uso de Typescript
• Uso de quaisquer ferramentas que facilitem seu trabalho
• Migrations ou Scripts para configuração do banco de dados utilizado
• Pipeline de Testes
• Deploy em cloud publica (heroku ou netlify são boas opções do mercado e gratuitas)
• ESLint e Prettier
• Sugestões sobre esse desafio embasadas em melhorias ou mudanças do escopo

Entrega

• Desenvolva o projeto, seguindo os requisitos desse documento.
• Vamos apreciar muito um README com o passo a passo para rodar o projeto.
• Suba o seu projeto para o Github e libere acesso para os usuários jcbombardelli.

db.json

{
  "exams": [
    {
      "id": 1,
      "title": "Prova Node",
      "description": "Venha fazer essa prova maravilhosa e mostre seus conhecimentos",
      "asset": "https://cdn-icons-png.flaticon.com/512/5968/5968322.png"
    }
  ],
  "questions": [
    {
      "id": 1,
      "examId": 1,
      "description": "Qual das opções abaixo é o repositório de projetos Node.js ?",
      "orderNumber": 1
    },
    {
      "id": 2,
      "examId": 1,
      "description": "Quais são os tipos de dado em Node.js ?",
      "orderNumber": 3
    },
    {
      "id": 3,
      "examId": 1,
      "description": "Os módulos Node.js podem ser expostos usando ?",
      "orderNumber": 2
    }
  ],
  "alternatives": [
    {
      "id": 1,
      "questionId": 1,
      "description": "npm",
      "isCorrect": true
    },
    {
      "id": 2,
      "questionId": 1,
      "description": "gradle",
      "isCorrect": true
    },
    {
      "id": 3,
      "questionId": 1,
      "description": "maven",
      "isCorrect": false
    },
    {
      "id": 4,
      "questionId": 1,
      "description": "yarn",
      "isCorrect": false
    },
    {
      "id": 5,
      "questionId": 2,
      "description": "String, Number, Boolean, Undefined, Null, RegExp e Buffer",
      "isCorrect": true
    },
    {
      "id": 6,
      "questionId": 2,
      "description": "let",
      "isCorrect": true
    },
    {
      "id": 7,
      "questionId": 2,
      "description": "const",
      "isCorrect": false
    },
    {
      "id": 8,
      "questionId": 2,
      "description": "var",
      "isCorrect": false
    },
    {
      "id": 9,
      "questionId": 3,
      "description": "module.expose",
      "isCorrect": false
    },
    {
      "id": 10,
      "questionId": 3,
      "description": "module",
      "isCorrect": false
    },
    {
      "id": 11,
      "questionId": 3,
      "description": "module.exports",
      "isCorrect": true
    },
    {
      "id": 12,
      "questionId": 3,
      "description": "Todas as opções",
      "isCorrect": false
    }
  ]
}