Sobre • Requisitos • Recursos • Como executar • Tecnologias • Autor • Licença
🤩 quiz - Uma aplicação Web em ReactJS para responder questionários de perguntas sobre conhecimento gerais.
Uma challenge realizada para Wa Project que deve respeitar os requisitos abaixos.
- Usuários pode escolhe quantidade de perguntas que deseja responder.
- Uma página de checkout antes do teste.
- Deve conter um botão de start para realizar requisição API e iniciar o teste.
- Deve conter um botão de cancel para retorna a página de escolha de quantidade de perguntas.
- Realização do quiz.
- Apresentar cada pergunta e suas opções de resposta.
- Contabilizar acertos e erros.
- Termino do quiz (relatório).
- Mostrar quantidade de acerto e erros.
- Uma lista das questões destacando a que foi certo e errado.
- Na lista mostrar a resposta escolhida e a correta.
- Salva o relatório no localStorage.
- Página de relatórios.
- Na página inicial mostrar os questionários salvos no localStorage.
- Rever o relatório salvo.
• Descrição do problemaImagine que você foi contratado para desenvolver uma aplicação WEB para responder questionários de perguntas sobre conhecimentos gerais. Ao acessar a página, o usuário deve escolher a quantidade de perguntas que deseja responder. Após escolher, deve aparecer uma página com dois botões, “Start” e “Cancel”. Ao selecionar “Cancel”, deve retornar para escolher a quantidade. Ao selecionar “Start” deve fazer requisição na URL disponibilizada, pegar as perguntas e a cada pergunta, deve exibir as respostas. O usuário deve escolher uma resposta e a cada resposta deve contabilizar quantidade de acertos e erros. Ao final, deve vir um relatório com a quantidade de acertos e erros e uma lista de cada questão e qual foi certo e qual foi errado. Nessa lista também deve aparecer a resposta escolhida e a resposta correta. A pontuação deve ser guardada em no localStorage. Na primeira página e se houver um questionário salvo no localStorage, deve ter a possibilidade de rever o relatório.
• Requisitos não funcionais
É obrigatório a utilização do framework React, Material UI e usar a URL para gerar as questões .......
• Requisitos não obrigatórios
Você será bem avaliado se usar Context API, Axio, Hooks, Formik, testes de comportamento e se você realizar um deploy em algum link. Além disso, vamos dar uma atenção maior quando demonstrar uma boa apresentação de design e uso de design patterns (como services, repositories, factories, builders e etc)
• Sobre o prazo?
Lembrando que prazo dado para nós é prazo cumprido e vamos prezar por aqueles candidatos que entregarem o projeto no prazo que pediu e com a coerência da tarefa (sabemos que vocês trabalham em outros locais e/ou estudam, isso será levado em consideração, não se preocupe).
- Opções para personalizar o quiz.
- Categoria.
- Dificuldade.
- Tipos de respostas.
- Salva a personalização do usuário para próximo uso.
- Dark theme.
- Página 'not found'.
- SEO.
- Github Page - SPA routing.
- Responsivo.
# Clone este repositório
$ git clone [email protected]:rodneysostras/quiz.git
# Acesse a pasta do projeto no seu terminal/cmd
$ cd quiz
# Instale as dependências
$ npm install
# Execute a aplicação em modo de desenvolvimento
$ npm run start
# A aplicação será aberta na porta:3000 - acesse http://localhost:3000- React • Framework Javascript open source utilizado para criar interfaces de usuário em paginas web.
- React router dom • Um componente que possibilita navegação entre componente gerando um roteamento de url.
- React context api • Disponibiliza uma forma de passar dados entre os componentes sem necessitar passar props.
- Axios • Cliente HTTP leve semelhante à API Fetch nativa do JavaScript.
- Material-UI • Biblioteca de componentes React para construir UI (User Interface).
- Formik • Componente para facilitar contrução de formulários.
Veja o arquivo package.json
 Rodney Sostras |
Este projeto esta sobe a licença BSD-3.
Feito com ❤️ por Rodney Sostras 👋🏽 Entre em contato!