Vetores são decorados, não compreendidos.
O ciclo costuma ser o mesmo: fórmula no quadro, lista de exercícios, prova com enunciado novo. Quando o enunciado muda, o raciocínio não vem. A fórmula foi memorizada, nunca visualizada.
O Vector Learn é uma plataforma para estudar vetores por simulação. Você manipula o vetor em um simulador 3D, vê o resultado na hora, resolve desafios que cobram o mesmo conceito e acompanha o próprio progresso. Tudo no navegador, sem instalação, com o progresso salvo automaticamente.
Se você já estudou em um Toda Matéria ou Brasil Escola, já conhece essa abordagem. O que o Vector Learn soma: simuladores, desafios com questões de vestibulares e ENEM, módulo de Cálculo II e gamificação em um único lugar.
Experimente: Vector Learn · sem criar conta
A plataforma hoje:
| Recurso | O que resolve | Status |
|---|---|---|
| Simuladores Interativos | Visualiza conceitos em tempo real com simulações | ✅ Pronto |
| Gamificação | Transforma estudo em jornada de conquistas | ✅ Pronto |
| Conteúdo Progressivo | Ensina de fundamentos a aplicações avançadas | ✅ Pronto |
| Análise de Progresso | Mostra desempenho e lacunas de aprendizado | ✅ Pronto |
| Resolvedor Inteligente | Resolve operações vetoriais passo a passo | ✅ Pronto |
| Módulo de Cálculo II | Integra integrais de linha e campos vetoriais | ✅ Pronto |
| Questões de Vestibular e Enem | Treina com questões oficiais | ✅ Pronto |
| Simulador de Fluidos | Aplica vetores à dinâmica de fluidos | ✅ Pronto |
| Internacionalização (i18n) | Suporte completo para EN, ES e PT-BR | 🚧 Em desenvolvimento |
| Mind-Bot IA | Chatbot para tirar dúvidas em tempo real | 🚧 Em desenvolvimento |
| Inserção de Anúncios | Estratégia de monetização via Adsense | 🚧 Em desenvolvimento |
| Autenticação | Integração com Supabase Auth (Social Login/JWT) | 🗺️ Planejado |
| Teste de nível e nivelamento | Avalia conhecimento e adapta a dificuldade | 🗺️ Planejado |
📋 Ver todos os recursos
- Barco: vetores de propulsão e correnteza
- Plano Inclinado: decomposição de forças gravitacionais
- 3D Explorer: manipulação livre de vetores em 3D
- Comparador: análise lado a lado de magnitude e direção
- Fluidos: vetores aplicados à dinâmica de fluidos
- Badges de desempenho
- Streaks e consistência
- Desafios adaptativos
- Resolvedor Inteligente passo a passo
- Fundamentos e operações vetoriais
- Aplicações reais em Física, Engenharia e Computação Gráfica
- Modo de teste com feedback automático
- Questões de vestibulares e Enem
- Módulo de Cálculo II: integrais de linha e campos vetoriais
Node.js >= 18
npm, yarn ou bun
git clone https://github.com/Carlos2505dev/Vector-Learn.git
cd Vector-Learn
npm install
# ou
bun install
npm run devAbra:
http://localhost:8040
Abra a página Fundamentos e revise os conceitos básicos, de escalares a operações vetoriais.
Navegue até Simulador e escolha entre Barco, Plano Inclinado, 3D Explorer e Comparador.
Na página Desafios, enfrente quizzes adaptativos e o Modo de Teste com feedback automático.
Visualize desempenho, badges e streaks no dashboard pessoal.
A partir daí:
Estudar fundamentos
↓
Praticar nos simuladores
↓
Resolver desafios
↓
Ganhar badges e streaks
↓
Acompanhar o progresso
Um exemplo concreto. No resolvedor, você digita uma operação vetorial e recebe o cálculo passo a passo:
(3, 2, 0) + (1, -1, 0) → (4, 1, 0)
(1, 2, 3) · (4, 5, 6) → 32
2i + 3j x 1i - 2k → -6i + 4j - 3k
Cada operação é calculada por uma engine matemática pura, a mesma usada nos simuladores e nos desafios:
import { add3D } from "@/lib/math/vector-math";
const soma = add3D({ x: 3, y: 2, z: 0 }, { x: 1, y: -1, z: 0 });
// → { x: 4, y: 1, z: 0 }A engine fica separada da interface, e o simulador 3D renderiza o vetor enquanto o cálculo acontece:
flowchart LR
U[Usuário] --> R[React + Vite]
R --> S[Simuladores 3D]
S --> T[Three.js / R3F]
R --> M[Engine Matemática]
R --> G[Gamificação]
G --> P[Progresso]
🏗️ Detalhes da arquitetura
| Componente | Responsabilidade |
|---|---|
src/pages |
Views principais e roteamento |
src/components/simulators |
Motores de simulação física e matemática |
src/components/math |
Fórmulas LaTeX e resolvedor de operações |
src/components/gamification |
Badges, streaks e desafios |
src/components/layout |
Navegação, hero interativo e onboarding |
src/lib/vector-math.ts |
Engine matemática de alta precisão |
sequenceDiagram
participant U as Usuário
participant S as Simulador 3D
participant M as Engine Matemática
participant T as Three.js
U->>S: Manipula o vetor
S->>M: Envia operação vetorial
M->>M: Calcula resultado
M-->>S: Retorna resultado
S->>T: Renderiza em 3D
T-->>U: Feedback visual imediato
Three.js e React Three Fiber são usados porque simulações 3D contínuas precisam de renderização em tempo real junto com a reatividade do React.
O projeto utiliza TypeScript porque erros em cálculos matemáticos vetoriais são custosos. A tipagem rigorosa evita bugs silenciosos e melhora a manutenção.
vector-learn/
├── .github/
├── public/
├── src/
│ ├── components/
│ │ ├── ui/
│ │ ├── simulators/
│ │ ├── gamification/
│ │ ├── math/
│ │ └── layout/
│ ├── pages/
│ ├── lib/
│ ├── hooks/
│ ├── types/
│ └── index.css
├── .gitignore
├── index.html
├── package.json
├── tailwind.config.ts
├── tsconfig.json
├── vite.config.ts
├── CONTRIBUTING.md
├── LICENSE
└── README.md
📁 Explicação da estrutura
| Caminho | Objetivo |
|---|---|
src/components/ui |
Componentes base (Shadcn/UI + Radix) |
src/components/simulators |
Motores de simulação física e matemática |
src/components/gamification |
Badges, streaks e desafios |
src/components/math |
Fórmulas LaTeX e resolvedor de operações |
src/components/layout |
Navegação, hero interativo e onboarding |
src/pages |
Views principais e roteamento |
src/lib |
Engine matemática e utilitários |
src/hooks |
Custom hooks de gerenciamento de estado |
src/types |
Tipos e interfaces globais |
public |
Assets estáticos |
O Vector Learn adota uma arquitetura em camadas, separando a interface do usuário da lógica de domínio:
| Camada | Diretórios | Responsabilidade |
|---|---|---|
| Apresentação | src/pages, src/components |
Interface, simuladores e experiência do usuário |
| Domínio | src/lib/vector-math.ts |
Regras e cálculos matemáticos vetoriais |
| Estado | src/hooks |
Gerenciamento de estado e lógica reutilizável |
| Contratos | src/types |
Tipos e interfaces compartilhadas |
Por que essa arquitetura?
- Manutenibilidade: cada camada evolui de forma independente. Mudanças na interface não afetam a engine matemática e vice-versa.
- Testabilidade: a lógica de domínio (cálculos vetoriais) fica isolada da UI, permitindo testá-la diretamente.
- Separação de responsabilidades: simuladores 3D, gamificação e conteúdo educacional não se acoplam entre si.
- Escalabilidade: novos simuladores e páginas podem ser adicionados sem reestruturar o projeto como um todo.
🔧 Variáveis de ambiente
| Variável | Obrigatória | Descrição | Exemplo |
|---|---|---|---|
VITE_APP_URL |
✅ | URL pública da aplicação | http://localhost:8040 |
VITE_PORT |
❌ | Porta do servidor de dev | 8040 |
VITE_ENABLE_ANALYTICS |
❌ | Habilita analytics opcionais | false |
🧪 Lint e build
Lint:
npm run lintType-check:
npx tsc --noEmitBuild de produção:
npm run buildPreview do build:
npm run preview📊 Benchmarks
Ambiente de referência:
CPU: Apple M3
RAM: 16 GB
Node.js: 18
Navegador: Chrome
| Operação | Média |
|---|---|
| Carregamento inicial da página | 1,2 s |
| Renderização de fórmulas (KaTeX) | 18 ms |
| Interação no simulador 3D | 60 FPS |
| Alternância entre páginas | 40 ms |
Os números acima são apenas uma referência do ambiente descrito e não representam uma garantia de performance.
🧑🔬 Testes
Unitários:
npm testE2E:
npm run test:e2eLint:
npm run lintType-check:
npx tsc --noEmitOs scripts de testes unitários e E2E ainda não estão configurados no projeto. Lint e Type-check estão disponíveis atualmente.
| Documento | Descrição |
|---|---|
| README | Visão geral |
| Contributing | Contribuição |
| Security | Segurança |
| Code of Conduct | Código de conduta |
| License | Licença |
Todo tipo de contribuição é bem-vinda: correção de bug, simulador novo, tradução, documentação.
- Fork o projeto
- Crie sua Feature Branch (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a Branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
Leia o CONTRIBUTING.md antes de começar.
Abra uma Issue contendo:
### Descrição
Explique o problema.
### Como reproduzir
1. ...
2. ...
3. ...
### Resultado esperado
...
### Ambiente
- OS:
- Navegador:
- Versão do Vector Learn:
Não publique vulnerabilidades de segurança em Issues públicas.
Envie um relatório para:
ou consulte SECURITY.md.
O Vector Learn é gratuito?
Sim. O projeto é distribuído sob a licença MIT.
Preciso criar uma conta para usar?
Não. É possível explorar a plataforma sem cadastro. O progresso é salvo automaticamente no navegador.
Preciso instalar alguma coisa?
Não. O Vector Learn roda direto no navegador, basta acessar o site. Para aproveitar os simuladores 3D, é necessário ter o WebGL habilitado.
O Vector Learn envia meus dados para terceiros?
Não por padrão. Não há analytics ou telemetria de terceiros habilitados na aplicação.
Posso usar em produção?
Sim. A aplicação já está em produção, mas novas funcionalidades ainda podem sofrer mudanças antes de versões futuras.
O Vector Learn substitui professores ou aulas?
Não é esse o objetivo.
O Vector Learn é uma ferramenta complementar que torna vetores visíveis e interativos, apoiando estudantes de engenharia, física e computação.
Este projeto está licenciado sob a MIT License.
Consulte LICENSE.
Obrigado a cada estudante que testou a plataforma, enviou feedback e apontou o que faltava. Obrigado aos professores de física e matemática que tornam vetores interessantes fora da tela. E obrigado antecipado a quem contribuir com código, documentação, traduções e testes.
