Genius: Plataforma Educacional Gamificada

Desenvolvimento full-stack de uma plataforma educacional que implementa gamificação, sistema de permissões e comunicação em tempo real.

Planejamento e arquitetura

O desenvolvimento do Genius seguiu uma abordagem de fácil manutenção. O projeto foi dividido em duas principais frentes: cliente (frontend) e servidor (backend).

├── frontend/
│   ├── src/
│   │   ├── api/           / Métodos de requisição via Redux Toolkit
│   │   ├── assets/        / Recursos estáticos
│   │   ├── components/    / Componentes React reutilizáveis
│   │   ├── config/        / Configurações (Socket.io, variáveis)
│   │   ├── pages/         / Páginas da aplicação
│   │   ├── redux/         / Estados e reducers do Redux Toolkit
│   │   ├── styles/        / Estilização CSS
│   │   └── utils/         / Funções utilitárias
│
├── backend/
│   ├── config/            / Configurações do servidor
│   ├── controllers/       / Controladores de requisições
│   ├── files/             / Armazenamento de avatares
│   ├── middlewares/       / Middlewares de autenticação/validação
│   ├── prisma/            / Schema e migrações do banco
│   ├── routes/            / Definição de rotas
│   ├── services/          / Lógica de negócio e operações do Prisma
│   ├── utils/             / Funções utilitárias
│   └── validations/       / Schemas de validação com Joi

Funcionalidades Principais

• Sistema de ligas baseado em contribuições e avaliações da comunidade;
• Fórum de perguntas e respostas para troca de conhecimentos;
• Questionários com feedback imediato;
• Sistema de conquistas e pontuações;
• Notificações em tempo real;
• Sistema progressivo de permissões baseado em contribuições.

Tecnologias Utilizadas

Frontend

• React com JavaScript;
• TailwindCSS para estilização;
• Ant Design para componentes de interface;
• Redux Toolkit para gerenciamento de estado;
• Socket.io para comunicação em tempo real.

Backend

• Node.JS com Express;
• Prisma como ORM ;
• MySQL como SGBD ;
• JWT para autenticação através do Passport.js.

Desenvolvimento

• Documentação da API com o Postman;
• Prototipagem das telas no Figma;
• ESLint para padronização;
• Prettier para formatação;
• Controle de versão com GIT.

Resultados

Implementando uma abordagem gamificada para educação, alinhada com as diretrizes da Base Nacional Comum Curricular (BNCC), o projeto foi apresentado e aprovado em novembro de 2024 como requisito para obtenção do grau de Técnico em Informática para Internet no Instituto Federal Sul-rio-grandense, Campus Gravataí.

Telas

Tela inicial

Tela de perfil

Tela de denúncias (restrita aos administradores)