Remix

Make your own version of Mukanda Aprende

Get an exact, working copy in your account, then change anything with chat.

Original by Silênio Henda

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

Cria uma aplicação web completa chamada Mukanda, uma plataforma de aprendizagem com jogos para toda a família em Angola. Mukanda significa “livro” em kimbundu. A interface é toda em português de Angola (pt-AO). Valores em kwanza, formato 1.500 Kz.
1. Objectivo
Ensinar através de jogos, com conteúdo adaptado à realidade angolana (kwanza, mercados, cidades, exemplos locais). Tem de ser usada por crianças (6-12), adolescentes (13-18) e adultos, na mesma conta familiar com perfis separados.
2. Stack técnica
	•	Next.js (App Router) + TypeScript + Tailwind CSS
	•	Three.js via React Three Fiber para a abertura em 3D
	•	Base de dados e autenticação: Supabase (ou Firebase), com Google como fornecedor de login
	•	PWA instalável, com lições descarregáveis para uso offline
	•	Mobile-first, leve, a funcionar bem com dados móveis fracos (imagens optimizadas, carregamento por partes, sem bibliotecas pesadas desnecessárias)
3. Identidade visual
	•	Cores: azul-noite #0F1B3D, amarelo-sol #FFC93C, verde-baobá #1F8A5B, laranja-terra #E8743B, branco-giz #FAF8F2
	•	Tipografia: Baloo 2 nos títulos (amigável, arredondada) e Nunito no texto
	•	Ilustrações com motivos angolanos: baobá, padrões tradicionais, animais locais. Um mascote simpático.
	•	Botões grandes e fáceis de tocar. Animações suaves, nunca assustadoras.
	•	Respeitar prefers-reduced-motion. Contraste acessível.
4. Abertura em 3D (primeira coisa que o utilizador vê)
	•	Cena dramática de 3 a 5 segundos: um livro gigante em 3D abre-se no meio de um céu de estrelas, e do livro saem letras, números e planetas a voar. A câmara aproxima-se e revela o logótipo Mukanda.
	•	Mostrar só na primeira abertura. Botão “Saltar” sempre visível.
	•	Detectar telemóveis fracos e mostrar uma versão leve (animação 2D/Lottie) em vez do 3D.
	•	Peso total da abertura abaixo de 3 MB. Som opcional, desligado por defeito.
5. Área dos utilizadores
Registo e contas (sistema único para todos)
	•	Todos os utilizadores têm de criar conta para usar a app. Existe um único sistema de contas para pessoal, família, crianças, adolescentes e adultos.
	•	Ecrã de registo único, com a pergunta “Para quem é o Mukanda?”:
	1.	Só para mim (adulto): cria uma conta pessoal, com um perfil
	2.	Para a minha família: cria a conta do responsável e adiciona perfis de filhos e outros familiares
	3.	Sou adolescente (13-18): cria conta própria com data de nascimento, e a activação depende da aprovação de um responsável (email ou WhatsApp do responsável)
	•	Formas de registo: Google ou email + palavra-passe (mínimo 8 caracteres). Telemóvel (+244) opcional, para recuperação e avisos.
	•	Pedir data de nascimento no registo para definir automaticamente o tipo de perfil e o conteúdo permitido
	•	Crianças (menores de 13) nunca criam conta própria: o responsável cria o perfil da criança dentro da sua conta, e a criança entra tocando no avatar (com PIN opcional de 4 dígitos)
	•	Uma conta pessoal pode ser convertida em conta familiar a qualquer momento, ao subir para o plano Família, sem perder progresso
	•	Verificar o email antes de activar a conta. Recuperação de palavra-passe por email.
	•	Os responsáveis aceitam os Termos e a Política de Privacidade e dão consentimento para o perfil dos filhos
	•	Eliminar conta e descarregar os dados: botão nas Definições da conta
Conta e perfis
	•	Uma conta pode ter vários perfis (criança, adolescente, adulto), cada um com avatar e progresso próprio
	•	Controlo parental: o responsável vê o tempo de uso e o progresso das crianças e define limites diários
	•	Crianças: sem chat aberto, sem anúncios, sem links externos
Conteúdo por idade
	•	Crianças (6-12): matemática, português e ciências em jogos e histórias, com pontos, medalhas e mascote
	•	Adolescentes (13-18): preparação para exames, inglês, programação básica, desafios e ranking entre colegas
	•	Adultos: cursos curtos de empreendedorismo, finanças pessoais, informática e inglês para o trabalho
Jogos e motivação
	•	Sequência diária (streak), pontos, níveis, medalhas, missões semanais
	•	Lição com teste final e certificado digital simples
Planos (valores de exemplo, editáveis no painel admin)
	•	Individual: 1.500 Kz/mês
	•	Família (até 5 perfis): 6.000 Kz/mês
	•	Escolas: licença por turma (pedido de contacto)
Pagamento (modo manual agora, automático preparado para depois)
	•	Métodos: Multicaixa Express, referência de pagamento, Unitel Money
	•	A subscrição só fica activa depois da confirmação do pagamento
Modo manual (activo desde o início):
	1.	O cliente escolhe o plano e vê o ecrã “Como pagar”, com o número Multicaixa Express do recebedor, o nome do titular e o valor exacto em Kz
	2.	O cliente paga na sua app Multicaixa Express e envia o comprovativo (foto ou captura de ecrã) na app
	3.	O pedido aparece no painel admin em Finanças > Pagamentos pendentes, com o comprovativo
	4.	O administrador toca em “Aprovar” ou “Recusar” (com motivo). Ao aprovar, a subscrição activa-se e o cliente recebe notificação.
Dados de recebimento configuráveis no painel (NÃO escrever números no código):
	•	Em Definições > Pagamentos, o administrador preenche e pode alterar a qualquer momento: número Multicaixa Express, nome do titular, IBAN da empresa, número Unitel Money
	•	Em Definições > Contactos, o administrador preenche o WhatsApp de suporte (com indicativo +244), o email de suporte e o horário de atendimento. A app usa este contacto em todo o lado: mensagem de pagamento indisponível, ecrã de ajuda, rodapé, e botão flutuante “Fale connosco” que abre https://wa.me/<número> com uma mensagem pré-escrita.
	•	Enquanto o WhatsApp não estiver preenchido, esconder o botão “Fale connosco” e mostrar o aviso vermelho no painel admin
	•	Estes dados ficam guardados na base de dados e são mostrados ao cliente apenas no ecrã “Como pagar”
	•	Só o Proprietário pode editar estes campos, e cada alteração fica no registo de auditoria
Se os dados de recebimento ainda não estiverem preenchidos:
	•	O botão “Pagar” fica desactivado e o cliente vê: “Pagamento indisponível neste momento. Fale connosco pelo WhatsApp.” (com o contacto de suporte)
	•	Nunca mostrar um ecrã de pagamento vazio ou com número em falta
	•	No painel admin, mostrar um aviso vermelho no topo: “Ainda não configurou os dados de pagamento. Os clientes não conseguem pagar.” com botão “Configurar agora”
	•	Ao guardar os dados, o aviso desaparece e o pagamento fica disponível
Modo automático (estrutura pronta, a activar depois do contrato com a EMIS ou um agregador):
	•	Gerar pedido de pagamento por API, receber a confirmação por webhook verificado e activar a subscrição sem intervenção manual
	•	Um interruptor em Definições > Pagamentos alterna entre manual e automático
6. ÁREA ADMINISTRATIVA (segurança obrigatória)
Rota separada: /admin (sem links para ela na app pública, com noindex).
Login em 2 passos
Passo 1 — Google:
	•	Botão “Entrar com o Google”
	•	O único email autorizado é sileniohenda490@gmail.com
	•	Qualquer outro email: terminar a sessão imediatamente e mostrar “Acesso não autorizado”
	•	O email autorizado fica numa variável de ambiente ADMIN_EMAIL, não espalhado pelo código
Passo 2 — Palavra-passe:
	•	Depois de o Google validar o email, pedir a palavra-passe de administrador antes de mostrar qualquer dado
	•	Na primeira entrada, o ecrã pede para o proprietário criar a palavra-passe (mínimo 12 caracteres, com confirmação)
	•	A palavra-passe é guardada apenas com hash seguro (argon2 ou bcrypt). Nunca em texto simples e nunca escrita no código ou neste prompt.
	•	Máximo de 5 tentativas erradas, depois bloqueio de 15 minutos
	•	Sessão de administrador expira após 30 minutos sem actividade
	•	Botão “Terminar sessão” sempre visível
Protecção real (não apenas visual)
	•	Verificar a autorização no servidor (middleware e regras da base de dados / Row Level Security) em todas as rotas e chamadas da API admin. Esconder botões não basta.
	•	Registo de auditoria: quem fez o quê e quando (entradas, alterações de preços, reembolsos, publicação de conteúdo)
	•	Opção de verificação em dois passos adicional, activável nas definições
Ecrãs do painel
	1.	Resumo: assinantes activos, receita do mês, novos utilizadores, cancelamentos, gráfico simples dos últimos 30 dias
	2.	Finanças: pagamentos recebidos, pendentes, reembolsos, relatório mensal exportável (CSV)
	3.	Utilizadores: famílias, perfis, estado da subscrição, pesquisa e filtros
	4.	Conteúdo: criar, editar, publicar e retirar lições e jogos, por disciplina e idade
	5.	Escolas: licenças, turmas, renovações, pedidos de contacto
	6.	Suporte: pedidos de ajuda, responder, marcar como resolvido
	7.	Equipa e definições: adicionar membros por email com nível (Gestor, Editor de conteúdo, Suporte), preços, promoções, notificações
Níveis: Proprietário (tudo, incluindo finanças e permissões; só o email autorizado), Gestor (utilizadores e métricas, sem finanças), Editor (só conteúdo), Suporte (só pedidos de ajuda).
Mostrar dados de exemplo realistas, com estados vazios claros que indicam a próxima acção.
7. Segurança e privacidade
	•	Dados de crianças tratados com especial cuidado, conforme a lei angolana de protecção de dados pessoais
	•	Termos de uso e política de privacidade em português
	•	Chaves e segredos apenas em variáveis de ambiente (GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, ADMIN_EMAIL, SUPABASE_URL, SUPABASE_KEY), nunca no código
	•	HTTPS, cabeçalhos de segurança e protecção contra ataques comuns (XSS, CSRF)
8. Como entregar
Constrói por etapas e mostra cada uma antes de avançar:
	1.	Estrutura, identidade visual e abertura 3D
	2.	Área dos utilizadores (perfis, lições de exemplo, jogos, pontos)
	3.	Área administrativa com o login em 2 passos
	4.	Planos, estrutura de pagamento e modo offline
Em cada etapa, explica o que ainda precisa de configuração manual (chave do Google, base de dados, contas de pagamento).

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.