Esse é um web app de notas um pouco diferente 🧁

Olá, gostaria de compartilhar um projeto meu que estou amando desenvolver. É um PWA (Aplicativo Web Progressivo) de anotações. Ele se chama noteous.

Ele não é mais um projeto feito de AI. Na verdade, gostaria de compartilhar algumas decisões e ideias que eu acredito que você vai achar no mínimo interessante, e que pode te inspirar a pensar e criar coisas novas. Eu sei que o texto será longo, mas não vejo outra maneira de mostrar o valor concreto de algo.

Pois é … aplicativos de notas são populares e você já deve usar um (ou vários). Meu objetivo é ter um projeto real com pessoas reais para aplicar conhecimentos e testar coisas novas. Então, vários pensamentos aplicados em conjunto resultaram no noteous.
Estou me esforçando para direcionar tempo e energia para o noteous e trazer atualizações mensais 🗓️

Já faz um bom tempo que estou desenvolvendo o noteous. Meu objetivo no início era apenas ter um projeto para portfólio. Devido a minha rotina apertada e energia limitada, o desenvolvimento está lento. Mas estou focando em construir algo bem pensado do que simplesmente jogado. Acredito sinceramente que valor se constrói aos poucos (é claro, algo que existe há mais tempo não necessariamente tem mais valor). Assim, ao longo do tempo tenho trazido algumas atualizações. Meu objetivo agora é maior do que apenas portfólio, é criar algo realmente útil, que alcance e inspire pessoas. E eu fico feliz ao compartilhar o projeto com alguns amigos próximos, e ouvir deles que o noteous realmente tem ajudado, por mais simples que ele seja. Estou contando isso porque sei que o tempo que temos para ler algo é curto, mas que ao mesmo tempo, não falar sobre isso é deixar tudo muito mecânico.

Bem, às vezes acho dificil encontrar pessoas que realmente se interessem por tecnologia e design, e promovam boas discussões.
Mas sei que a comunidade aqui do TabNews gosta disso, e é um local construtivo. Assim, fique a vontade para ler, pensar sobre e dar um feedback:

Pontos interessantes:

• noteous é um projeto de código aberto, disponível no GitHub. Contribuições são bem-vindas (https://github.com/evertonruan/noteous)
• Não requer cadastro, é gratuito para usar
• Por ser um PWA* você pode instalar e usar offline
• Suas notas ficam armazenadas no LocalStorage de forma totalmente privada
• Construído apenas com HTML, CSS e JS. Em algumas partes foi usada AI

*Não sei se é impressão minha, mas o conceito de PWAs não é explorado com toda a profundidade que poderia ser.

🟠⚪ Design e Recursos

Bem, o noteous é um aplicativo de notas, focado em ser um to-do list e um local para guardar algo para não esquecer depois. Isso significa que a ação principal dele é anotar algo.

Penso o seguinte: uma pessoa que não sabe nada, ao entrar num aplicativo deve ter ideia básica do que fazer.
Assim, os elementos em destaque são o Campo de Nota e o botão para adicionar nota.
Diferente de outros aplicativos, que essa função está atrás de um outro botão "adicionar", aqui minha decisão foi deixar essa funcionalidade-base o mais acessível possível (usar ele no celular é muito prático para notas rápidas)

Ou seja: não tem mistério: ao abrir o aplicativo pela primeira vez, já é possível saber o que fazer.

• O Campo de Nota possui um design que convida a pessoa a fazer uma anotação. Ao focar, ele "brilha", assim como uma lâmpada 💡 (no tema escuro fica mais elegante). A cor laranja foi escolhida para reforçar um sentimento de ação, para escrever a próxima anotação.
• Também algo que convida a pessoa a fazer uma anotação são alguns textos, como a data do dia e a mensagem acima do Campo de Nota (eles são controlados pelo Orblend Engine)
• Ao adicionar uma nota, ela fica facilmente visível abaixo ou ao lado (depende se estiver numa Tela Compacta ou Estendida)
• O container de nota possui 3 elementos principais: os Botões de Ação*, a nota armazenada e a data que foi criada/editada
  *Botões de Ação: são pequenos botões que realizam funções na nota: concluir, compartilhar e copiar.
• Ao clicar em uma nota, o texto dela é enviado ao Campo de Nota e é possível editá-la

Bem, imagino que esses são os recursos básicos de qualquer app de notas (Criar, ver, editar, concluir/apagar)

🧁 A sobremesa

Eu gosto de partir do seguinte princípio: ao olhar para uma sobremesa, você vê o lado de fora, a cobertura e tudo mais. Porém, quando vai comer e chega no recheio, você descobre detalhes que não estavam visíveis.

Acredito que o noteous atende a dois públicos: as pessoas puramente práticas que querem algo que simplesmente funcione e as pessoas inovativas, que querem algo que vá além do puramente prático, que estão cansadas de coisas genéricas sem personalidade. E nesses dois públicos eu me refiro ao mesmo tempo a usuários comuns e a desenvolvedores.

Assim, a cobertura do noteous é essa: escrever, adicionar a nota, editar, concluir.
Mas e o recheio?

1. Clique na bolinha que tem na parte superior direita do Campo de Nota: a borda é alterada. Existem 3 tipos de borda: sólida, dupla e pontilhada.
   Escreva e adicione sua nota.
   Agora, você descobriu um recurso de organização do noteous que se chama Listas de Prioridade. Cada borda de nota diferente é adicionada em uma lista diferente. Assim, você pode ter notas com assuntos diferentes nessas listas. É possível personalizar a ordem das Listas de Prioridade em Ajustes&Info.

2. Quer organizar melhor as notas? Então veja as Opções de Organização. O design dessas opções é diferente de qualquer outro. Ao clicar em uma opção, a legenda dela aparece à esquerda de forma elegante. Ao clicar em Buscar, a legenda desaparece e no lugar fica o input para pesquisar. Esse é um design único.

3. Se você estava escrevendo uma nota e saiu sem a adicionar, verá mais uma das funções do Orblend Engine.

4. Na página Ajustes&Info existem algumas coisas interessantes.

• Por exemplo, ali mostra que existe um outro noteous em que é possível testar recursos à frente: é o noteous preview! (Atualmente, são poucos recursos que o noteous preview está à frente do noteous)
• Na página Ajustes&Info você vai se deparar com um cupcake. Cuidado para não começar a comer; precisará fazer isso bem rápido. (Mais informações sobre o cupcake estão no Histórico de Atualizações > Atualização Geral 1.0, ativando Informações avançadas)

5. Existem detalhes interessantes no código-fonte do noteous. Por exemplo, a estrutura da página principal é dividida em Seção de escrita (section-write) e Seção de Leitura (section-read). Também, em alguns lugares tem comentários de quando o código de um recurso foi criado. A maior parte do código é de minha autoria. Apenas em algumas partes foi usada AI.

6. Alguns outros detalhes sobre decisões:

• Não utilizei nenhum framework ou biblioteca adicional: a ideia é ter o mínimo possível de dependência externa.
• Não há um backend: é claro que isso limita várias possibilidades. Mas a ideia é explorar o máximo de possibilidades com o mínimo de recursos.
• Uso de algumas APIs como Clipboard API, Web Share API, Web Share Target API
• Há dois ícones distintos: para o noteous é um ícone “tema claro, com prioridade solid”, para o noteous preview é um ícone “tema escuro, prioridade double” (cor clara lembra mais o público usuário normal, cor escura lembra mais o público desenvolvedor/early adopter)

✨🍩 Próximos passos

Para mim, um dos melhores sentimentos é conseguir resolver os problemas. Ao programar algo como no noteous, mesmo sendo bem simples, é necessário pensar na lógica, na melhor forma de usar os recursos, como as variáveis e funções, e fazer com que as coisas se conversem e façam sentido. Acho que você como desenvolvedor compartilha desse mesmo sentimento: tentar encontrar uma lógica que faça sentido e comemorar quando consegue achar e tudo funciona!

Eu reconheço que o noteous tem muito a melhorar. E acho que é melhor falar o que ele tem do que não tem, porque é muita coisa que falta kkk Ele é bem básico e às vezes me questiono se ele deveria continuar a existir. Mas quero ainda continuar a me esforçar em investir tempo e recursos nele. Há diversas melhorias para se fazer.
Em breve, ainda no início desse ano (2026) estou planejando criar a 2ª Geração do noteous (Se você foi em Ajustes&Info, viu que é a 1ª Geração). Nela, haverá ainda outras novidades inovativas e você pode conferir se quiser nas Milestones do noteous no GitHub.
Assim, esse projeto é útil para pessoas comuns que querem apenas um bloco de notas simples, e também para quem quer mais que apenas isso.

Muito obrigado pela sua leitura e seu tempo. Espero de verdade que os detalhes que compartilhei aqui possam servir de inspiração. Lembre sempre que pequenos detalhes fazem a diferença e que você pode fazer o dia de uma pessoa melhor.