Noto é um aplicativo desktop multiplataforma para criação e edição de notas em Markdown com integração direta ao Git/GitHub, oferecendo controle total e versionamento das anotações.
Noto resolve a necessidade de centralizar todas as anotações em um único local com controle de versão, oferecendo:
- ✨ Editor Markdown com preview em tempo real
- 🔄 Integração Git nativa para versionamento
- 📁 Organização hierárquica de arquivos e pastas
- 💾 Auto-save e sincronização automática
- 🎨 Interface elegante com temas claro/escuro
- 🔍 Busca avançada de arquivos
- 📱 Multiplataforma (Windows, Mac, Linux)
- Editor Markdown: Split screen com código e preview em tempo real
- Sistema de Arquivos: Persistência real de arquivos Markdown
- Workspace: Configurado em
~/Documents/Noto - Interface Responsiva: Sidebar colapsável, temas dinâmicos
- Auto-save: Salvamento automático após 2 segundos
- Organização: Criação de pastas e estrutura hierárquica
- Shortcuts: Atalhos de teclado (Ctrl+N, Ctrl+S, Ctrl+K)
- Status Visual: Indicadores de sincronização e erro
- Criação de Notas: Funcionando com auto-save
- Navegação: Funcionando entre arquivos
- Sincronização Git: Corrigir erro
spawn /bin/sh ENOENT - Testes Unitários: Cobertura de 80%+
- Busca Full-text: Busca no conteúdo dos arquivos
- Histórico Visual: Visualização de versões Git
- Sincronização Automática: Programada e em background
- Plugins: Sistema de extensões
- React 18.3.1 - Biblioteca para interfaces
- TypeScript 5.5.3 - Tipagem estática
- Vite 5.4.1 - Build tool rápido
- Tailwind CSS 3.4.11 - Framework CSS
- Radix UI + shadcn/ui - Componentes acessíveis
- React Query - Gerenciamento de estado
- Electron 37.2.5 - Framework desktop
- Node.js - Runtime JavaScript
- electron-builder - Build multiplataforma
- ESLint - Linting e formatação
- TypeScript - Verificação de tipos
- Git - Controle de versão
- Node.js 18+ (instalar com nvm)
- npm ou yarn
- Git (para funcionalidades de versionamento)
# 1. Clonar o repositório
git clone https://github.com/joaomoraes/noto-git-notes.git
cd noto-git-notes
# 2. Instalar dependências
npm install
# 3. Iniciar desenvolvimento
./dev.sh
# Para parar: Ctrl+C- App funcionando: Interface carregada e responsiva
- Criação de notas: Funcionando com auto-save
- Criação de pastas: Funcionando
- Navegação: Funcionando entre arquivos
- Workspace: Configurado em
~/Documents/Noto - Editor Markdown: Split screen funcionando
- Temas: Claro/escuro funcionando
- Sincronização Git: Erro
spawn /bin/sh ENOENT- Ver detalhes
- Corrigir sincronização Git (prioridade crítica)
- Implementar testes unitários
- Melhorar UX e feedback visual
# Build da aplicação web
npm run build
# Build da aplicação desktop
npm run electron:build
# Build para distribuição
npm run electron:distNoto segue uma arquitetura híbrida cliente-servidor com Electron:
┌─────────────────────────────────────────────────────────────┐
│ APLICAÇÃO NOTO │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ PROCESSO │ │ PROCESSO │ │
│ │ PRINCIPAL │◄──►│ RENDERER │ │
│ │ (Electron) │ │ (React) │ │
│ └─────────────────┘ └─────────────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ SISTEMA DE │ │ INTERFACE │ │
│ │ ARQUIVOS │ │ DE USUÁRIO │ │
│ │ (Node.js fs) │ │ (React + UI) │ │
│ └─────────────────┘ └─────────────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ CONTROLE DE │ │ GERENCIAMENTO │ │
│ │ VERSÃO │ │ DE ESTADO │ │
│ │ (Git) │ │ (React Query) │ │
│ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────┘
- Camada de Apresentação: React, TypeScript, Tailwind CSS
- Camada de Aplicação: React Hooks, Custom Hooks
- Camada de Serviços: TypeScript, Node.js APIs
- Camada de Sistema: Electron IPC, Node.js fs, child_process
src/
├── components/ # Componentes React
│ ├── ui/ # Componentes base (shadcn/ui)
│ └── noto/ # Componentes específicos
│ ├── NotoApp.tsx # Componente principal
│ ├── Editor.tsx # Editor Markdown
│ ├── Sidebar.tsx # Navegação de arquivos
│ └── ... # Outros componentes
├── services/ # Camada de serviços
│ ├── FileSystemService.ts # Operações de arquivo
│ └── GitService.ts # Operações Git
├── hooks/ # Custom hooks
│ ├── useFileSystem.ts # Hook para arquivos
│ └── useGit.ts # Hook para Git
└── types/ # Tipos TypeScript
electron/ # Código do processo principal
├── main.js # Processo principal
└── preload.js # Script de preload
docs/ # Documentação
├── produto/ # Documentação de produto
└── dev/ # Documentação técnica
├── architecture.md # Arquitetura do sistema
├── status.md # Status atual
└── todo.md # Próximas tarefas
- Arquitetura - Visão geral da arquitetura do sistema
- Status - Status atual do desenvolvimento
- TODO - Próximas tarefas e roadmap
- Changelog - Histórico de mudanças
- Requisitos de Produto - Visão geral do produto
- Requisitos Funcionais - Funcionalidades detalhadas
- Regras de Negócio - Regras específicas
# Desenvolvimento
./dev.sh # Script simples para desenvolvimento
npm run build # Build da aplicação
npm run electron:dev # Electron em modo desenvolvimento
# Build
npm run build # Build da aplicação
npm run build:dev # Build em modo desenvolvimento
npm run electron:build # Build da aplicação desktop
npm run electron:dist # Distribuição multiplataforma
# Qualidade
npm run lint # Linting do código
# Electron
npm run electron # Executar Electron
npm run electron:dev # Electron em modo desenvolvimento- Interface básica de criação/edição
- Editor Markdown com preview
- Integração básica GitHub
- Funcionalidade offline
- Testes unitários (80%+ cobertura)
- Melhorias de UX e feedback visual
- Otimizações de performance
- Tratamento robusto de erros
- Busca full-text no conteúdo
- Histórico de versões visual
- Resolução de conflitos de merge
- Sincronização automática programada
- Documentação completa
- Guias de contribuição
- Release público
- Fork o projeto
- Clone seu fork:
git clone https://github.com/seu-usuario/noto-git-notes.git - Crie uma branch:
git checkout -b feature/nova-funcionalidade - Desenvolva seguindo os padrões do projeto
- Teste suas mudanças
- Commit:
git commit -m 'feat: adiciona nova funcionalidade' - Push:
git push origin feature/nova-funcionalidade - Abra um Pull Request
- Commits: Seguir Conventional Commits
- Código: TypeScript com tipagem completa
- Testes: Jest + Testing Library
- Linting: ESLint configurado
- Documentação: Manter documentação atualizada
feat: adiciona nova funcionalidade
fix: corrige bug na sincronização
docs: atualiza documentação
refactor: refatora componente Editor
test: adiciona testes para FileSystemService
perf: otimiza performance do preview
chore: atualiza dependências
Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.
João Moraes
- GitHub: @joaomoraes
- Email: [seu-email@exemplo.com]
- Electron - Framework desktop
- React - Biblioteca de interfaces
- Tailwind CSS - Framework CSS
- shadcn/ui - Componentes UI
- Vite - Build tool
⭐ Se este projeto te ajudou, considere dar uma estrela!