Um aplicativo web interativo e responsivo para aprender Python através de um mapa mental visual baseado no currículo do CS50P de Harvard. O aplicativo oferece uma experiência educacional completa com conceitos explicados, exemplos de código, quiz interativo e rastreamento de progresso.
Mapa Mental Interativo: Estrutura visual clara com 10 aulas de Python, cada uma colorida e organizável. Os usuários podem expandir/recolher conceitos e navegar facilmente pela hierarquia de tópicos.
Painel de Conceitos Detalhado: Ao selecionar um conceito, um painel lateral exibe explicação completa, exemplo de código Python com syntax highlighting, botão para copiar código e pontos-chave resumidos.
Sistema de Quiz Completo: 50+ perguntas de múltipla escolha organizadas por aula. Os usuários podem fazer quiz por aula específica ou geral, com feedback imediato, barra de progresso visual e rastreamento de pontuação.
Rastreamento de Progresso: Página de perfil mostra estatísticas detalhadas incluindo número de quizzes realizados, taxa de acerto, tempo total de estudo e progresso por aula com barras visuais.
Modo Offline Completo: Funciona totalmente offline graças ao Service Worker. Todas as respostas do quiz são salvas localmente no IndexedDB e sincronizadas automaticamente quando a conexão retorna.
Modo Escuro: Toggle elegante de tema com transições suaves. A preferência é salva automaticamente no localStorage e aplicada em todas as páginas.
Progressive Web App (PWA): Pode ser instalado como app nativo em Android e iOS. Funciona offline, tem ícone na tela inicial e oferece experiência similar a um app nativo.
- Node.js 18+ e npm/pnpm
- Git
# Clonar o repositório
git clone https://github.com/waltermarano-cpu/mapa-mental-cs50p.git
cd mapa-mental-cs50p
# Instalar dependências
pnpm install
# Iniciar servidor de desenvolvimento
pnpm devO aplicativo estará disponível em http://localhost:3000
# Gerar build otimizado
pnpm build
# Visualizar build localmente
pnpm previewmapa-mental-cs50p/
├── client/
│ ├── public/
│ │ ├── manifest.json # Configuração PWA
│ │ ├── service-worker.js # Service Worker para offline
│ │ └── icon-*.png # Ícones do app
│ ├── src/
│ │ ├── pages/
│ │ │ ├── Home.tsx # Página principal com mapa mental
│ │ │ ├── QuizPage.tsx # Página de quiz
│ │ │ └── ProfilePage.tsx # Página de perfil
│ │ ├── components/
│ │ │ ├── MindmapNode.tsx # Nó do mapa mental
│ │ │ ├── DetailPanel.tsx # Painel de conceitos
│ │ │ ├── Quiz.tsx # Componente de quiz
│ │ │ ├── Profile.tsx # Componente de perfil
│ │ │ ├── ThemeToggle.tsx # Toggle de tema
│ │ │ └── ConnectionStatus.tsx # Indicador de conexão
│ │ ├── hooks/
│ │ │ ├── useUserProfile.ts # Hook para gerenciar perfil
│ │ │ ├── useOfflineSync.ts # Hook para sincronização offline
│ │ │ └── useServiceWorker.ts # Hook para registrar SW
│ │ ├── data/
│ │ │ ├── mindmapData.ts # Dados do mapa mental
│ │ │ ├── conceptDetails.ts # Conceitos com exemplos
│ │ │ └── quizData.ts # Perguntas do quiz
│ │ ├── contexts/
│ │ │ └── ThemeContext.tsx # Contexto de tema
│ │ ├── App.tsx # Componente raiz
│ │ ├── main.tsx # Entry point
│ │ └── index.css # Estilos globais
│ └── index.html # Template HTML
├── server/
│ └── index.ts # Servidor Express (placeholder)
├── package.json
├── tsconfig.json
├── vite.config.ts
└── tailwind.config.js
| Tecnologia | Propósito |
|---|---|
| React 19 | Framework UI |
| TypeScript | Type safety |
| Tailwind CSS 4 | Estilização |
| Vite | Build tool |
| Wouter | Roteamento client-side |
| shadcn/ui | Componentes UI |
| Framer Motion | Animações |
| IndexedDB | Armazenamento offline |
| Service Worker | Funcionalidade offline |
O aplicativo cobre as 10 aulas do CS50P:
- Aula 0: Funções e Variáveis
- Aula 1: Condicionais
- Aula 2: Loops
- Aula 3: Exceções
- Aula 4: Bibliotecas
- Aula 5: Unidades
- Aula 6: Arquivos
- Aula 7: Expressões Regulares
- Aula 8: Programação Orientada a Objetos
- Aula 9: Et Cetera
Cada aula contém múltiplos conceitos com explicações, exemplos de código e perguntas de quiz.
- Na página inicial, você verá o mapa mental com 5 aulas coloridas
- Clique em uma aula para expandir seus conceitos
- Clique em um conceito para ver detalhes no painel lateral
- Clique no botão "Quiz" na navegação inferior
- Selecione uma aula ou escolha "Quiz Geral"
- Responda as perguntas de múltipla escolha
- Veja seu resultado e pontuação
- Clique no botão "Perfil" na navegação inferior
- Veja suas estatísticas gerais
- Acompanhe o progresso por aula
- Abra o app uma vez com internet
- O Service Worker será instalado
- Agora você pode usar offline
- Suas respostas serão sincronizadas quando reconectar
- Clique no ícone de lua/sol no canto superior direito
- O tema escuro/claro será alternado
- Sua preferência é salva automaticamente
- Edite
client/src/data/mindmapData.tspara adicionar ao mapa - Edite
client/src/data/conceptDetails.tspara adicionar explicação e código - Edite
client/src/data/quizData.tspara adicionar perguntas
Edite client/src/data/quizData.ts e adicione uma nova pergunta seguindo o padrão:
{
id: "q_new",
lectureId: "0",
question: "Sua pergunta aqui?",
options: [
"Opção A",
"Opção B",
"Opção C",
"Opção D"
],
correctAnswer: 0,
explanation: "Explicação da resposta correta"
}Os estilos globais estão em client/src/index.css. Tailwind CSS 4 é usado com variáveis CSS customizadas para tema escuro/claro.
Para publicar como app Android nativo:
# Instalar Bubblewrap
npm install -g @bubblewrap/cli
# Gerar APK
bubblewrap init --manifest=client/public/manifest.json
bubblewrap build --releaseVeja CS50P_Google_Play_Publication_Guide.md para instruções detalhadas.
# Executar testes (quando implementados)
pnpm test
# Verificar tipos TypeScript
pnpm check
# Formatar código
pnpm formatSe encontrar um bug, por favor abra uma issue no GitHub com:
- Descrição clara do problema
- Passos para reproduzir
- Comportamento esperado vs. atual
- Screenshots se aplicável
- Informações do dispositivo/navegador
Contribuições são bem-vindas! Por favor veja CONTRIBUTING.md para diretrizes.
- Adicionar mais conceitos e exemplos de código
- Criar mais perguntas de quiz
- Melhorar design e UX
- Adicionar suporte para mais idiomas
- Implementar badges e conquistas
- Adicionar modo de prática com feedback
- Criar vídeos tutoriais
Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.
- Baseado no currículo do CS50P de Harvard
- Desenvolvido com ❤️ usando React, TypeScript e Tailwind CSS
- Inspirado em ferramentas educacionais modernas
- GitHub: @waltermarano-cpu
- Issues: Abrir uma issue
- Suporte para múltiplos idiomas
- Sistema de badges e conquistas
- Compartilhamento de progresso
- Integração com API backend
- Sincronização em nuvem
- Modo de prática com feedback detalhado
- Análise de áreas fracas
- Recomendações de estudo personalizadas
- Comunidade e fóruns
- Certificado de conclusão
- Linguagens: TypeScript, CSS, HTML
- Componentes React: 20+
- Conceitos cobertos: 40+
- Perguntas de quiz: 50+
- Linhas de código: 5000+
- Tempo de desenvolvimento: Desenvolvido com Manus AI
Versão: 1.0.0
Última atualização: Fevereiro 2026
Status: ✅ Pronto para Produção
Comece a aprender Python hoje! 🎓