0xNotes não foi criado por uma equipe ou para ser um produto. Ele nasceu de um desejo muito simples: ter um lugar para escrever que me desse prazer só de abrir.
Fui olhando para os apps existentes e algo sempre incomodava — ou a interface era branca e sem vida, ou era carregada de funcionalidades que nunca ia usar, ou simplesmente não tinha aquele feeling de cuidado. Então comecei a construir o meu próprio.
Cada detalhe foi pensado à mão: os tons escuros que não cansam os olhos, o amarelo que aparece nos momentos certos sem gritar, o editor que some e deixa só as suas palavras. A segurança está lá porque seria irresponsável não ter — mas o que me motivou a acordar cedo e escrever código nesse projeto foi a estética.
Se você chegou até aqui, provavelmente é porque você também nota essas coisas.
- Criação e edição de notas com salvamento automático
- Títulos dinâmicos — o título aparece na barra superior enquanto você edita
- Pastas e categorias para organizar seu espaço
- Notas com senha — bloqueie notas individuais com uma camada extra de proteção
- Lixeira com recuperação — nada some de vez sem você querer
- Exportação em Markdown, texto puro e outros formatos
- Busca global por conteúdo em todas as notas, instantânea
| Editor | Engine | Para quem |
|---|---|---|
| Visual (Rich Text) | TipTap | Quem quer escrever sem pensar em sintaxe |
| Markdown puro | Monaco | Quem quer controle total sobre o texto |
| Split View | Ambos | Os dois lado a lado, sincronizados em tempo real |
O editor visual suporta:
- Negrito, itálico,
tachado,código inline - Listas ordenadas, não-ordenadas e listas de tarefas com checkbox ✅
- Citações, blocos de código com syntax highlight
- Tabelas, links, imagens
- Titles, subtítulos e hierarquia de texto completa
- Dark mode real — não é um tema alternativo, é o padrão. Não existe light mode.
- Paleta handcrafted — tons de cinza escolhidos a dedo para não cansar os olhos
- Amarelo como acento — aparece nos pontos certos, sem exagero
- Animações sutis — transições que fazem sentido, sem firula
- Tipografia cuidada — espaçamentos e tamanhos que fazem a leitura fluir
O app foi desenhado para a tela do celular desde o primeiro pixel. A versão web é consequência, não o destino principal. Via Capacitor, a interface vira um APK nativo com:
- Navegação por gestos
- Teclado nativo otimizado
- Edge-to-edge rendering
- Comportamentos de toque iguais aos apps nativos do Android
Direto na seleção de texto do editor:
- Corrigir ortografia da seleção inteira
- Melhorar escrita com sugestões contextuais
- Reescrever seções com IA sem sair da nota
- Loading animado estilo Matrix enquanto a IA trabalha
- Cookies HttpOnly — tokens nunca ficam expostos no JavaScript
- CSRF Tokens rotativos — blindagem contra requisições forjadas
- Cloudflare Turnstile — proteção invisível contra bots
- Bcrypt para hashing de senhas com salt
- JWT stateless com expiração controlada
- Gerenciamento de sessões — veja e revogue dispositivos conectados
- Histórico de acessos — monitore atividade da sua conta
- Bloqueio por IP no painel admin
0xNotes/
├── frontend/ # React 19 + Vite + TypeScript
│ ├── Editores # TipTap (rich text) + Monaco (markdown)
│ ├── Estilização # Tailwind CSS + CSS customizado
│ ├── Estado # Zustand
│ ├── Animações # Framer Motion + GSAP
│ └── Mobile # Capacitor → APK Android
│
└── backend/ # Node.js + Express + TypeScript
├── Banco de dados # PostgreSQL + Prisma ORM
├── Cache & Sessões # Redis
├── Autenticação # JWT + HttpOnly Cookies + Bcrypt
├── Email # SMTP com suporte a 2FA
└── Painel Admin # Interface exclusiva /x-panel
- Node.js v18 ou superior
- PostgreSQL rodando (local ou remoto)
- Redis rodando
git clone https://github.com/ArcanixPhoenix/0xNotes.git
cd 0xNotescp backend/.env.example backend/.env
cp frontend/.env.example frontend/.envAbra os arquivos .env e preencha com suas credenciais:
- URL do seu PostgreSQL
- URL do Redis
- Chave secreta JWT
- Credenciais SMTP (para e-mails)
cd backend
npm install
npx prisma db push # cria as tabelas no banco
npm run dev # inicia na porta 3000# em outro terminalcd frontend
npm install
npm run dev # inicia na porta 8080Pronto. Acesse http://localhost:8080 e você vai ver o app rodando.
cd frontend
npm run build
npx cap sync android
npx cap open android # abre no Android StudioNo Android Studio: Build → Build Bundle(s) / APK(s) → Build APK(s)
frontend/src/
├── components/
│ ├── Dashboard.tsx # tela principal com lista de notas
│ ├── Editor.tsx # motor dos editores (TipTap + Monaco)
│ ├── CommandPalette.tsx # paleta de comandos (tipo VS Code)
│ ├── LandingPage.tsx # página de entrada
│ ├── LockScreen.tsx # bloqueio do app
│ ├── folders/ # gerenciamento de pastas
│ ├── modals/ # modais reutilizáveis
│ └── settings/ # todas as telas de configurações
│
├── pages/
│ ├── AuthPage.tsx # login e cadastro
│ ├── GraphPage.tsx # visualização em grafo das notas
│ └── x-panel/ # painel administrativo
│
└── store/
├── useNoteStore.ts # estado global das notas
└── useSettingsStore.ts # estado das configurações
O app possui um painel administrativo exclusivo com:
- Dashboard com métricas em tempo real
- Gerenciamento de usuários completo
- Console SQL para queries diretas no banco
- Explorer do banco — visualize tabelas e dados
- Monitor de sessões ativas
- Logs de auditoria com histórico de ações
- Status do banco e saúde do sistema
- Backups e exportação de dados
Desenvolvido por ArcanixPhoenix — um projeto que nasceu da vontade de ter algo que fosse meu, com o visual que eu gosto, do jeito que eu curto usar.
O projeto foi construído e refinado com o auxílio de Inteligência Artificial como assistente de desenvolvimento.
Não tem contribuições externas, não tem roadmap público, não tem issue tracker aberto. É um projeto pessoal que eu construo quando quero, do jeito que quero. Se o código ou o design te inspirar de alguma forma, fico feliz.
"Feito com cuidado. Para quem nota os detalhes."