Loading repository data…
Loading repository data…
AkiraSunsets / repository
Repositório dedicado ao projeto desenvolvido na disciplina de Programação Web Frontend, ministrada pela docente Mariany Morais. O projeto teve como proposta o conceito de gamificação voltado para a educação, apresentando um jogo web interativo inspirado em Super Mario Bros para apoiar o aprendizado dos alunos do SENAI Roberto Mange.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Disciplina: Programação Web Frontend
Docente: Mariany Morais
Curso: Técnico em Desenvolvimento de Sistemas — 3º Semestre
Instituição: SENAI Roberto Mange
Ano: 2026
Mange's Bros é uma aplicação web educacional desenvolvida em React que utiliza conceitos de gamificação para transformar o processo de aprendizagem em uma experiência interativa.
Inspirado nos clássicos jogos de plataforma, o jogador percorre um mapa de fases, responde perguntas relacionadas aos conteúdos estudados e coleta itens que serão utilizados na resolução de um desafio final.
O projeto busca unir entretenimento e educação, incentivando o aprendizado por meio de desafios progressivos, feedback imediato e recompensas visuais.
Para iniciar a aventura, o jogador deve realizar login utilizando um e-mail válido.
Email: mario@email.com
Exemplos aceitos:
luigi@email.com
peach@gmail.com
mario@gmail.com
Exemplos inválidos:
mario
mario@
@email.com
mario.com
Caso o campo esteja vazio ou o formato seja inválido, o sistema exibirá uma mensagem solicitando correção antes de liberar o acesso.
[LOGIN]
│
▼
[INÍCIO]
│
▼
[FASE 1]
│
▼
[FASE 2]
│
▼
[FASE 3]
│
▼
[FASE 4]
│
▼
[FASE 5]
│
▼
[FASE 6]
│
▼
[ENIGMA FINAL]
Cada fase contém perguntas que devem ser respondidas corretamente para liberar a próxima etapa da aventura.
| Tecnologia | Finalidade |
|---|---|
| React.js | Construção da interface |
| JavaScript | Regras de negócio |
| CSS3 | Estilização e animações |
| HTML5 | Estrutura semântica |
| Local Storage | Persistência |
| ARIA | Acessibilidade |
Instale:
Verifique:
node -v
npm -v
git clone https://github.com/seu-usuario/manges-bros.git
cd manges-bros
npm install
npm run dev
http://localhost:5173
src/
│
├── assets/
│
├── components/
│ ├── Inventario/
│ ├── Modal/
│ └── Quiz/
│
├── pages/
│ ├── TelaHome/
│ ├── TelaTutorial/
│ ├── TelaLogin/
│ └── TelaEnigmaFinal/
│
├── banco_perguntas/
│
├── App.jsx
└── main.jsx
| Recurso | Implementação |
|---|---|
| Navegação por teclado | Tab, Enter e Espaço |
| Indicadores de foco | Destaque visual |
| ARIA Labels | Identificação |
| HTML Semântico | Compatibilidade |
| Leitores de Tela | Suporte básico |
localStorage.clear();
location.reload();
Projeto desenvolvido como atividade avaliativa da disciplina Programação Web Frontend do curso Técnico em Desenvolvimento de Sistemas do SENAI Roberto Mange.