KanaDojo かな道場

Uma plataforma estética, minimalista e altamente personalizável para dominar o japonês

📖 Sobre o KanaDojo

KanaDojo é uma plataforma web envolvente de aprendizado de japonês que torna o domínio de Hiragana, Katakana, Kanji e Vocabulário divertido e intuitivo. Construída com foco em estética, personalização e aprendizado eficaz, KanaDojo oferece um ambiente de treinamento imersivo para estudantes de japonês de todos os níveis.

Seja você apenas começando com os silabários kana básicos ou se preparando para os exames JLPT com kanji e vocabulário avançados, KanaDojo oferece uma experiência de aprendizado simplificada e livre de distrações que se adapta às suas preferências e estilo de aprendizagem.

✨ Recursos Principais

🎯 Três Dojos de Treinamento

Kana Dojo - Domine os silabários Hiragana e Katakana com grupos base, dakuon, yoon e sons estrangeiros
Kanji Dojo - Aprenda caracteres kanji essenciais organizados por níveis JLPT (N5, N4, N3, N2)
Vocabulary Dojo - Construa seu vocabulário japonês com coleções de palavras selecionadas por nível de proficiência

🎮 Quatro Modos de Jogo Dinâmicos

Cada dojo suporta quatro modos de treinamento envolventes para reforçar o aprendizado:

Pick - Múltipla escolha: Selecione a romanização/tradução correta para o caractere mostrado
Reverse-Pick - Múltipla escolha reversa: Selecione o caractere correto para a romanização/tradução dada
Input - Entrada de texto: Digite a romanização/tradução correta
Reverse-Input - Entrada de texto reversa: Digite o caractere correto

🎨 Personalização Extensa

Mais de 100 Temas - Escolha de uma vasta coleção de belos temas claros e escuros, ou use o recurso de tema aleatório
28 Fontes Japonesas - Selecione entre uma variedade de tipografias japonesas autênticas para adequar suas preferências estéticas
Efeitos Sonoros - Desfrute de sons de feedback satisfatórios que podem ser ativados/desativados
Opções de Exibição - Alterne entre Romaji/Inglês e Kana/Kanji nos menus de seleção
Atalhos de Teclado - Atalhos de teclado para treinamento eficiente (podem ser desativados)

📊 Acompanhamento de Progresso

Feedback em tempo real com contadores de correto/incorreto
Rastreamento de sequência para manter a motivação
Estatísticas para monitorar seu progresso de aprendizado

🌐 Experiência Web Moderna

Design totalmente responsivo que funciona em desktop, tablet e celular
Não requer instalação - treine em qualquer lugar com conexão à internet
Interface limpa e minimalista que mantém você focado no aprendizado
Animações e transições suaves alimentadas pelo Framer Motion

🖼️ Capturas de Tela

Página Inicial

Seleção de Kana

Modo de Treinamento

Personalização e Temas

🎨 UI & Filosofia de Design

KanaDojo abraça uma estética minimalista combinada com máxima flexibilidade. A filosofia de design se concentra em:

Minimalismo em Primeiro Lugar

Interfaces limpas com distrações mínimas
Foco no conteúdo de aprendizado
Navegação intuitiva e hierarquia clara de informações
Uso intencional de espaços em branco

Personalização Estética

Biblioteca extensa de temas (mais de 100 opções) variando de pastéis suaves a neons vibrantes
Suporte para modos claro e escuro
Paletas de cores cuidadosamente selecionadas que são agradáveis aos olhos durante sessões de estudo prolongadas
Transições de tema sem interrupções

Experiência do Usuário

Animações suaves e micro-interações para feedback encantador
Design responsivo que se adapta lindamente a qualquer tamanho de tela
Feedback de áudio para interações (opcional)
Linguagem visual consistente em todas as seções

Tipografia Japonesa

28 fontes japonesas autênticas cobrindo vários estilos
Renderização adequada de caracteres kanji complexos
Distinção clara entre caracteres de aparência semelhante
Visualizações de fontes com amostras de texto japonês reais

🛠️ Stack Tecnológico

KanaDojo é construído com tecnologias web modernas para desempenho ideal e experiência do desenvolvedor:

Framework Principal

Next.js 15 - Framework React com App Router para renderização do lado do servidor e desempenho ideal
React 19 - React mais recente com recursos concorrentes
TypeScript - Desenvolvimento com segurança de tipos

Estilização e UI

Tailwind CSS - Framework CSS utility-first
shadcn/ui - Biblioteca de componentes acessíveis e de alta qualidade
Framer Motion - Animações e transições suaves
Lucide React - Biblioteca de ícones bonita e consistente
FontAwesome - Suporte adicional de ícones

Gerenciamento de Estado

Zustand - Gerenciamento de estado leve com código mínimo
Zustand Persist - Persistência de armazenamento local para preferências do usuário

Utilitários e Recursos

use-sound - Sistema de feedback de áudio
canvas-confetti - Efeitos de celebração
react-timer-hook - Funcionalidade de temporizador
react-markdown - Renderização de Markdown para conteúdo educacional
random-js - Geração de números aleatórios criptograficamente fortes
clsx + tailwind-merge - Utilitários de estilização condicional

Ferramentas de Desenvolvimento

ESLint - Linting de código
next-sitemap - Geração automática de sitemap

Analytics e Performance

@vercel/analytics - Análise web
@vercel/speed-insights - Monitoramento de performance

🚀 Começando

Pré-requisitos

Node.js 18.x ou superior
npm 10.x ou superior (vem com Node.js)

Instalação

Clone o repositório

git clone https://github.com/lingdojo/kanadojo.git
cd kanadojo

Instale as dependências
```
npm install
```
Execute o servidor de desenvolvimento
```
npm run dev
```
Abra seu navegador Navegue até http://localhost:3000

Build para Produção

# Crie um build de produção otimizado
npm run build

# Inicie o servidor de produção
npm start

Outros Comandos

# Execute o ESLint
npm run lint

# Gere o sitemap (executa automaticamente após o build)
npm run postbuild

Solução de Problemas

Se você encontrar problemas durante o desenvolvimento, tente estas soluções:

Limpar Cache do Next.js

macOS/Linux:

rm -rf .next
npm run dev

Windows (PowerShell):

Remove-Item -Recurse -Force .next
npm run dev

Windows (Command Prompt):

rmdir /s /q .next
npm run dev

Limpar Node Modules e Reinstalar

macOS/Linux:

rm -rf node_modules package-lock.json
npm install

Windows (PowerShell):

Remove-Item -Recurse -Force node_modules, package-lock.json
npm install

Windows (Command Prompt):

rmdir /s /q node_modules
del package-lock.json
npm install

Limpar Todos os Caches (Opção Nuclear)

macOS/Linux:

rm -rf .next node_modules package-lock.json
npm cache clean --force
npm install
npm run dev

Windows (PowerShell):

Remove-Item -Recurse -Force .next, node_modules, package-lock.json
npm cache clean --force
npm install
npm run dev

Windows (Command Prompt):

rmdir /s /q .next
rmdir /s /q node_modules
del package-lock.json
npm cache clean --force
npm install
npm run dev

Porta Já em Uso

Se a porta 3000 já estiver em uso:

macOS/Linux:

# Encontrar processo usando a porta 3000
lsof -i :3000

# Matar o processo (substitua PID pelo ID real do processo)
kill -9 PID

Windows (PowerShell/Command Prompt):

# Encontrar processo usando a porta 3000
netstat -ano | findstr :3000

# Matar o processo (substitua PID pelo ID real do processo)
taskkill /PID PID /F

Ou simplesmente execute em uma porta diferente:

# macOS/Linux/Windows
PORT=3001 npm run dev

📁 Estrutura do Projeto

kanadojo/
├── app/                        # Páginas do Next.js App Router
│   ├── kana/                   # Páginas do dojo de Kana
│   │   └── train/[gameMode]/   # Páginas de treinamento para cada modo de jogo
│   ├── kanji/                  # Páginas do dojo de Kanji
│   │   └── train/[gameMode]/
│   ├── vocabulary/             # Páginas do dojo de Vocabulário
│   │   └── train/[gameMode]/
│   ├── preferences/            # Página de configurações e personalização
│   ├── academy/                # Conteúdo educacional
│   ├── layout.tsx              # Layout raiz com provedores
│   └── page.tsx                # Página inicial
│
├── components/                 # Componentes React
│   ├── Dojo/                   # Componentes específicos de treinamento
│   │   ├── Kana/               # Seleção e cards de Kana
│   │   ├── Kanji/              # Seleção e cards de Kanji
│   │   └── Vocab/              # Seleção e cards de Vocabulário
│   ├── reusable/               # Componentes compartilhados
│   │   ├── Menu/               # Componentes de navegação e menu
│   │   └── ...                 # Outros componentes reutilizáveis
│   ├── Settings/               # Componentes de preferências
│   └── ui/                     # Componentes shadcn/ui
│
├── lib/                        # Utilitários e funções auxiliares
│   ├── hooks/                  # Hooks personalizados do React
│   │   ├── useAudio.ts         # Hooks de feedback de áudio
│   │   └── ...
│   ├── interfaces.ts           # Interfaces TypeScript
│   └── utils.ts                # Funções utilitárias
│
├── store/                      # Gerenciamento de estado Zustand
│   ├── useKanaKanjiStore.ts    # Estado de seleção Kana/Kanji
│   ├── useVocabStore.ts        # Estado de seleção de Vocabulário
│   ├── useStatsStore.ts        # Estatísticas e progresso
│   └── useThemeStore.ts        # Tema e preferências
│
├── static/                     # Dados estáticos e configuração
│   ├── kana.ts                 # Dados de caracteres Kana
│   ├── kanji/                  # Dados de Kanji por nível JLPT
│   ├── vocab/                  # Dados de vocabulário
│   ├── themes.ts               # Definições de temas
│   ├── fonts.ts                # Configurações de fontes
│   └── info.tsx                # Conteúdo informacional
│
├── public/                     # Assets estáticos
│   ├── sounds/                 # Arquivos de áudio
│   └── wallpapers/             # Imagens de fundo
│
├── CLAUDE.md                   # Documentação do desenvolvedor
├── next.config.ts              # Configuração do Next.js
├── tailwind.config.js          # Configuração do Tailwind CSS
└── tsconfig.json               # Configuração do TypeScript

Conceitos Principais

Fluxo de Gerenciamento de Estado

Usuário seleciona conteúdo nos componentes de menu
Seleções armazenadas nas stores Zustand (useKanaKanjiStore, useVocabStore)
Componentes de treinamento leem das stores para gerar perguntas
Estatísticas rastreadas e persistidas em useStatsStore
Preferências do usuário salvas em useThemeStore com persistência em localStorage

Arquitetura de Componentes

Componentes Dojo: Lidam com a seleção de caracteres/palavras para cada tipo de conteúdo
Componentes de Treinamento: Renderizam modos de jogo e lidam com interações do usuário
Componentes Reutilizáveis: Elementos de UI compartilhados (botões, cards, modais, etc.)
Componentes de Menu: Navegação, seções de informações e seleção de dojo

Organização de Dados

Kana: Organizado por tipo (hiragana/katakana) e grupos (base, dakuon, yoon, estrangeiro)
Kanji: Organizado por nível JLPT (N5-N2), com leituras e significados
Vocabulário: Organizado por nível JLPT e tipo de palavra (substantivos, verbos, etc.)

Implementação dos Modos de Jogo

Cada modo de jogo é uma rota dinâmica (/[contentType]/train/[gameMode]) que:

Lê o conteúdo selecionado da store apropriada
Gera perguntas aleatórias da seleção
Fornece feedback imediato
Rastreia estatísticas (correto, incorreto, sequência)

🤝 Contribuindo

Contribuições são bem-vindas! KanaDojo é um projeto de código aberto construído pela comunidade, para a comunidade.

Como Contribuir

Faça um fork do repositório
Crie uma branch de feature (git checkout -b feature/RecursoIncrivel)
Commit suas mudanças (git commit -m 'Adiciona algum RecursoIncrivel')
Faça push para a branch (git push origin feature/RecursoIncrivel)
Abra um Pull Request

Diretrizes de Desenvolvimento

Siga o estilo de código e convenções existentes
Use TypeScript para segurança de tipos
Teste suas mudanças completamente
Atualize a documentação conforme necessário
Mantenha os componentes focados e reutilizáveis

📄 Licença

Este projeto está licenciado sob a Licença AGPL 3.0 - veja o arquivo LICENSE.md para detalhes.

🙏 Agradecimentos

Dados do idioma japonês e informações de caracteres
Comunidade de código aberto pelas ferramentas e bibliotecas incríveis
Todos os contribuidores que ajudam a tornar o KanaDojo melhor

📞 Contato e Links

Website: kanadojo.com
Repositório: github.com/lingdojo/kanadojo
Email: dev@kanadojo.com

Feito com ❤️ para estudantes de Japonês em todo o mundo

がんばって！ (Ganbatte! - Dê o seu melhor!)

⬆ Voltar ao topo

FilesExpand file tree

README.pt-br.md

Latest commit

History

README.pt-br.md

File metadata and controls

KanaDojo かな道場

📖 Sobre o KanaDojo

✨ Recursos Principais

🎯 Três Dojos de Treinamento

🎮 Quatro Modos de Jogo Dinâmicos

🎨 Personalização Extensa

📊 Acompanhamento de Progresso

🌐 Experiência Web Moderna

🖼️ Capturas de Tela

Página Inicial

Seleção de Kana

Modo de Treinamento

Personalização e Temas

🎨 UI & Filosofia de Design

Minimalismo em Primeiro Lugar

Personalização Estética

Experiência do Usuário

Tipografia Japonesa

🛠️ Stack Tecnológico

Framework Principal

Estilização e UI

Gerenciamento de Estado

Utilitários e Recursos

Ferramentas de Desenvolvimento

Analytics e Performance

🚀 Começando

Pré-requisitos

Instalação

Build para Produção

Outros Comandos

Solução de Problemas

Limpar Cache do Next.js

Limpar Node Modules e Reinstalar

Limpar Todos os Caches (Opção Nuclear)

Porta Já em Uso

📁 Estrutura do Projeto

Conceitos Principais

Fluxo de Gerenciamento de Estado

Arquitetura de Componentes

Organização de Dados

Implementação dos Modos de Jogo

🤝 Contribuindo

Como Contribuir

Diretrizes de Desenvolvimento

📄 Licença

🙏 Agradecimentos

📞 Contato e Links