A Alura promoveu uma imersão sobre React onde o objetivo era mostrar os benefícios da utilização no NextJS, um framework que permite renderização pelo lado servidor, geração de páginas estáticas, deploy da aplicação de maneira facilitada com a melhor infraestrutura possível e facilitar a utilização de SEO (Search Engine Optimization) com React. Assim, fornecendo uma melhora no desempenho na aplicação.
Nesta imersão foi proposto o desenvolvido uma pagina de 'quiz' temática que pudesse abordar vários assuntos, utilizando as ferramentas do React (useStates, useEffect e componentização) e as funcionalidades do NextJS (GetServerSideProps, useRouter). Além da utilização de CSS-in-JS através do Styled-Components, ferramentad de padronização de códigos como Prettier, ESLint e EditorConfig, animações declarativas de componentes usando o Framer-Motion e animações de carregamento com o Lottie. Indo um pouco além do proposto, foi utilizado em toda aplicação o TypeScript que um conjunto de ferramentas em cima do JavaScript que adiciona tipagem estática no ambiente de desenvolvimento.
O tema escolhido para minha aplicação foi sobre o jogo The Witcher 3: Wild Hunt, um jogo com elementos de RPG muito premiado. Onde foram realizadas perguntas sobre o jogo e o ambiente em volta dele, no final foi adicionado a possibilidade de jogar com outros temas relacionados a cultura POP.
Primeiramente clone o repositório para sua maquina ou faça o 'download' em formato ZIP e descompacte. Para realizar a clonagem do repositório utilize o comando:
git clone https://github.com/ReneSena/quiz-cavaleiro-zodiaco.git
ou
git clone git@github.com:PedroHenry-Santos/AluraQuiz-TW3.git
Após basta instalar as dependência utilizando o gerenciador de pacote de sua preferência. Conforme abaixo:
yarn install
ou
npm install
É possível personalização do tema e dos estilos utilizados na página, para isso basta alterar os valores do arquivo db.json na raiz do projeto. Esse é o arquivo que simula o resultado do banco de dados.
{
"bg": "[Endereço da imagem de fundo]",
"title": "[Título do quiz]",
"description": "[Descrição do quiz]",
"questions": [
{
"image": "[Endereço da imagem da pergunta]",
"title": "[Título da pergunta]",
"description": "[Descrição da pergunta]",
"answer": ["Posição da resposta certa (obs. Número)"],
"alternatives": [
"Opção 1",
"Opção 2",
"...",
"Opção N"
]
},
{
"Próxima questão": "..."
}
],
"external": [
"[Endereço da API com os dados]",
"[...]",
"[...]"
],
"theme": {
"colors": {
"primary": "[Código hexadecimal da cor]",
"secondary": "[Código hexadecimal da cor]",
"mainBg": "[Código hexadecimal da cor]",
"contrastText": "[Código hexadecimal da cor]",
"wrong": "[Código hexadecimal da cor]",
"success": "[Código hexadecimal da cor]"
},
"borderRadius": "[valor do tamanho (Xpx, Xrem etc.)]"
}Todas as cores base, imagem de fundo e conteúdo de questões se encontra neste arquivo. Sendo, "bg" o local para o endereço da imagem de fundo utilizada, "title" é o título do quiz, "description" é a descrição do quiz, "questions" é um vetor onde é possível informar o conteúdo da questão, com destaque para "answer" que considera o vetor "alternatives" começando em 0.
Temos o campo "external" onde é possível colocar o link dá API publica de outras pessoas (obs.: Não é necessário ter um Front e sim uma API que fornece um db.json hospedado em algum lugar). Por último temos theme onde estão as cores e algumas definições de estilos.
Caso queira ajudar a implementar novas funcionalidade nessa aplicação, poderá seguir o roteiro de funcionalidades a seguir. Ou também poderá propor sua própria funcionalidade.
Para isso basta seguir o roteiro em CONTRIBUTING.
Para um acompanhamento mais atualizado verifique a aba Projeto.
- Página de identificação (:warning: Pode sofrer modificações)
- Tela de carregamento para apresentar o Quiz (:warning: Pode sofrer modificações)
- Resposta interativa após cada pergunta (:warning: Pode sofrer modificações)
- Tela de carregamento para apresentar o resultado (:warning: Pode sofrer modificações)
- Link para Quizes de outros temas (:warning: Pode sofrer modificações)
- Temporizador para a pergunta (:construction: Em desenvolvimento)
- Display com contagem de pontos (:construction: Em desenvolvimento)
- Interatividade através de sons (:construction: Em desenvolvimento)
- Temas dark e light (:construction: Em desenvolvimento)
Para saber sobre as versões deste código consulte o CHANGELOG detalhado.