Stardust é uma aplicação educativa focada em ensinar lógica de programação utilizando o conceito de gamificação, isto é, utilizar elementos normalmente presentes em jogos para alcançar objetivos que vão além de um contexto de um simples jogo, como educar pessoas a respeito de assunto, sendo nesse caso específico a lógica de programação em si.
Por ser uma solução gamificada, é possível encontrar elementos como obtenção de pontos, desbloqueio de fases, desafios, compra de itens, ranking de usuários e narrativa envolvente.
O objetivo ao realizar esse projeto foi concluir o TCC do curso técnico em Desenvolvimento de Sistemas da ETEC de São José dos Campos, a qual eu agradeço por ter me instigado a aprender cada mais e me tornar um desenvolvedor melhor.
- O usuário deve seguir uma trilha organizada em módulos, em que cada módulo corresponde um tema dentro de lógica de programação
- Cada módulo deve ser composto por lições, sendo que cada uma deve corresponder um assunto específico dentro do tema do seu respectivo módulo
- Cada módulo deve possuir pelo menos 2 lições e um desafio de algoritmo no final
- Cada lição é bloqueada por padrão, sendo que para desbloquear uma o usuário deve completar a anterior
- Cada lição deve possuir Três fases, sendo:
- Teoria sobre o conceito a ser estudado
- Quiz sobre a teoria passada
- Resultado que exibe os pontos obtidos a partir do Quiz(XP e Moedas)
- Cada lição deve possuir Três fases, sendo:
- Teoria sobre o conceito a ser estudado
- Quiz sobre a teoria passada
- Resultado que exibe os pontos obtidos a partir do Quiz (XP e Moedas)
- O desafio de código deve possuir testes de caso, cada uma contendo uma entrada e uma saída para testar a solução do usuário
- Se o usuário conseguir resolver o desafio ele deve receber a quantidade de XP e Moedas de acordo com o nível de dificuldade do desafio.
- O usuário deve poder escolher um desafio de código avulso, ou seja, um desafio que não faz parta da trilha principal, a partir de uma lista de desafios
- Cada desafio de código deve possuir um nível de dificuldade, sendo
fácil
,médio
oudifícil
- Cada desafio de código deve se enquadrar em uma ou mais categorias, sendo que cada categoria é relacionado a um módulo da trilha principal
- O usuário deve poder filtrar, de forma simultaneamente ou não, os desafios de código por nível de dificuldade, nome ou uma ou mais categorias
- Deve haver uma loja contendo itens de foguetes e avatares
- Cada item da loja deve apresentar:
- Nome
- Imagem
- Preço
- Botão de compra
- O usuário só pode comprar apenas quando houver a quantidade necessária de moedas que o determinado item exige
- O item recém-comprado deve ser configurado como selecionado automaticamente no perfil do usuário
- Caso o item já tenha sido adquirido pelo usuário, o botão de compra se transformará em um botão para selecionar o item em questão
- Os usuários devem ser divididos em 6 rankings diferentes
- Cada ranking deve conter uma lista de usuários ordenados de forma decrescente de acordo com a quantidade de XP de cada um
- Todo domingo às 23:59, os 5 melhores usuários de cada ranking deverão ir para o próximo ranking, enquanto os 5 piores usuários deverão ir para o ranking anterior
- No momento de mudança de ranking os melhores usuários de cada ranking deverão ganhar um recompesa de moedas e XP, cuja quantidades deverão ser conforme a posição alcançada pelo usuário e o grau de prestígio do ranking anterior ao recém adquirido
- Cada usuário deve possuir um perfil que exiba:
- Nome
- Avatar atual
- Data de criação de perfil
- Ranking atual
- Foguete atualmente usado
- Deve ser exibido um gráfico que indique a quantidade de desafios concluídos pelo usuário de acordo com o nível de dificuldade de cada desafio
- Deve ser exibido uma tabela que exida os desafios, snippets de código e soluções de código criados por ele juntamente com a respectiva data de criação e link para acessar o recurso em questão
Este projeto foi desenvolvido usando as seguintes tecnologias:
-
Next.js para fornecer um servidor para as funcionalidades que precisam rodar server side e recursos extras que são comuns em aplicações web hoje, como caching, roteamento dinâmico e pré-processamento de dados
-
React para criar interfaces interativas
-
TailwindCSS para estilização das interfaces
-
Framer Motion para fazer as animações
-
Radix UI para construir componentes reacts que exijam recursos de acessibilidade
-
Supabase para prover funcionalidades comuns em aplicações backend, como serviço de autenticação, banco de dados (PostgreSQL), storage de arquivos, realtime etc.
-
Delégua para servir como a linguagem de programação utilizada como ferramenta de estudo dos usuários
-
Resend para envio de e-mails
-
React-email para criação de templates de e-mails
-
SWR para caching de dados no lado do cliente
-
Zod para validação e transformação de dados
Para mais detalhes acerca das dependências do projeto, como versões específicas, veja o arquivo package.json
Antes de baixar o projeto você necessecitará ter instalado na sua máquina as seguintes ferramentas:
Além disto é bom ter um editor para trabalhar com o código, como o VSCode
Além disto é crucial configurar as variáveis de ambiente em um arquivo chamado
.env
antes de executar a aplicação. veja o arquivo .env.example para ver quais variáveis devem ser configuradas
# Clone este repositório
$ git clone https://github.com/JohnPetros/stardust.git
# Acesse a pasta do projeto
$ cd stardust
# Rode a aplicação em modo de desenvolvimento
$ docker compose up
Provavelmente a aplicação estará rodando em http://localhost:3000
# Execute os testes
$ pnpm run test
# Fork este repositório
$ git clone https://github.com/JohnPetros/stardust.git
# Cria uma branch com a sua feature
$ git checkout -b minha-feature
# Commit suas mudanças:
$ git commit -m 'feat: Minha feature'
# Push sua branch:
$ git push origin minha-feature
Você deve substituir 'minha-feature' pelo nome da feature que você está adicionando
Você também pode abrir um nova issue a respeito de algum problema, dúvida ou sugestão para o projeto. Ficarei feliz em poder ajudar, assim como melhorar este projeto
Esta aplicação está sob licença do MIT. Consulte o Arquivo de licença para obter mais detalhes sobre.
Feito com 💜 por John Petros 👋🏻