Quiz App Desenvolvido com Vite e React

Desenvolvido durante o mês de julho de 2023 com foco no aprendizado do React. Lá estava eu na tela inical do Google Chrome quando de repente me deparo com o artigo “How to Build a Quiz App Using React –with Tips and Starter Code” da plataforma freeCodecamp, então pensei 🤔 porque não tentar fazer esse projetinho? Por mais “simples” que possa parecer, é com projetos como esse onde aprendemos bastante coisa, principalmente da base, que servem para criar futuros projetos um pouco mais robustos.

Overview

Sobre

O quiz basicamente tem um array de objetos das questões e respostas que são exibidos de forma dinâmica na tela. Uma das propriedades tem como valor um array de objetos, e um desses objetos tem uma propriedade com valor booleano para identificar qual é a resposta correta, “isCorret: true/false”. Avança para a próxima pergunta depois de selecionar/clicar a resposta, isso ativa a função handleAnswerButtonClick que faz a soma da pontuação e faz avançar para a próxima pergunta. No topo temos um contador do total de Perguntas, ao final é mostrado o resultado do usuário, ou seja, quantas respostas certas/erradas ele obteve juntamente com uma mensagem (Dependendo da quantidade de acertos). Essa última funcionalidade não tinha no quiz mas achei interessante adicionar. Foi utilizado o hook useState do React para o armazenamento de estado de algumas funcionalidades, e o design do quiz eu peguei na comunidade do figma, achei interessante e escolhi esse como base.

Screenshots

tela 1

tela 2

Links

My process

Tecnologias

⚙️👨‍💻

Esse projeto foi desenvolvido com as seguintes tecnologias:

  • Vite
  • React
  • Hooks (useState)
  • Jsx
  • Css
  • Git e Github

Continuar o desenvolvimento

Pretendo adicionar futuramente um Rank com o nome dos usuários, provavelmente vai ter uma forma de armazenamento (Banco de dados com certeza).

Recursos úteis

Autor

João Alison TI 👨🏽‍💻

2023

GitHub

View Github