Voltar para Lista
BLOG / Crom Editor / / 6 min leitura

📂 OmniFiles - Adeus, abas: Unifiquei Multiplos Googles Drives e arquivos locais numa única interface - Zero Backend - 100% no navegador - OpenSource

O OmniFiles é um gerenciador de arquivos open-source e client-side que unifica Google Drive, AWS S3 e arquivos locais em uma única interface, sem depender de um backend centralizado. Construído com React e Vite, utiliza o padrão Strategy para que o núcleo da aplicação interaja com diferentes provedores de forma agnóstica. O foco é a soberania digital: seus dados e chaves OAuth ficam no navegador, permitindo mover arquivos entre nuvens e PC com a agilidade de um explorador nativo.

Apresentando o Crom OmniFiles: um file manager moderno, client-side, que unifica seus arquivos locais e na nuvem numa interface única. Sem backend. Sem delay.

Você já parou para contar quantos cliques leva para mover um arquivo do seu computador para o Google Drive? Você abre o Explorer, abre o Chrome, navega até o Drive, espera carregar, arrasta, espera o upload...

Os gestores de arquivos web atuais caem em dois extremos: ou são demos simples demais que mal listam arquivos, ou são "monstros enterprise" com backends pesados, filas de processamento e uma complexidade desnecessária para o usuário final.

Eu queria o "caminho do meio": rápido como o Explorer nativo, mas acessível via URL. Algo que me desse soberania sobre meus dados.

Então eu construí o Crom OmniFiles.

O que é o OmniFiles?

É um "meta-gerenciador" de arquivos que roda 100% no cliente (client-side). Não há um servidor intermediário lendo seus dados. O navegador conecta diretamente à fonte:

  • 📁 Sistema de Arquivos Local: Acessa pastas do seu PC diretamente via File System Access API.
  • ☁️ Google Drive: Integração nativa via OAuth 2.0. Você vê seus arquivos da nuvem como se fossem locais.
  • 💾 IndexedDB (Offline): Armazenamento persistente no navegador para uso sem conta, powered by Dexie.js.
  • 🪣 AWS S3: Suporte a buckets S3 (arquitetura já implementada via S3Provider).

Tudo numa interface unificada. Mover um arquivo da nuvem para o PC é tão simples quanto arrastar um ícone.

🔗 Teste agora (Sem login obrigatório)

Por baixo do capô: Decisões de Arquitetura

Para desenvolvedores, o "como" é mais interessante que o "o quê". Aqui está o motor do OmniFiles.

1. Velocidade não é feature, é requisito (React + Vite)

Escolhi React pela maturidade do ecossistema, mas o segredo da performance é o Vite. O Hot Module Replacement (HMR) é instantâneo e o bundle de produção é extremamente otimizado. Para renderizar milhares de arquivos sem travar a thread principal, implementei virtualização usando react-window. O DOM só existe para o que seus olhos estão vendo.

2. Adeus Redux, olá Custom Hooks

Esta foi uma decisão filosófica: Zero gerenciadores de estado externos complexos. Nada de Redux, Zustand ou Jotai. O estado é gerido por uma coleção de Hooks desacoplados, facilitando a manutenção e os testes:

  • useFileSystem.js: O "cérebro" que gerencia CRUD e navegação.
  • useGoogleAuth.js: Gerencia o ciclo de vida do token OAuth.
  • useSelection.js & useDragDrop.js: Lógica complexa de interação visual isolada da lógica de dados.

3. O Padrão "Provider": A alma do projeto

O OmniFiles usa um Design Pattern de Strategy robusto. O núcleo da aplicação não sabe se está falando com o Google Drive ou com o HD do seu PC. Ele fala com uma Interface Abstrata.

Todo provedor (LocalFileSystemProvider, GoogleDriveProvider, S3Provider) implementa o mesmo contrato definido em FileSystemProvider.js:

// O contrato que todo serviço deve assinar
class FileSystemProvider {
    async listFiles(folderId) { ... }
    async createFolder(name, parentId) { ... }
    async uploadFile(file, parentId) { ... }
    async deleteFile(fileId) { ... }
    // ...
}

Graças ao ProviderFactory, adicionar suporte futuro ao Dropbox ou IPFS é apenas criar uma nova classe. O resto da UI continua funcionando sem alterar uma linha de código.

UX: Detalhes que importam

Software que não dá prazer de usar, não é usado.

  • Tailwind CSS: Design system consistente, modo escuro (Dark Mode) nativo e classes utilitárias para agilidade.
  • Micro-interações: Uso do Framer Motion para que cada clique, cada abertura de pasta e cada modal tenha um feedback tátil e visual.
  • Funcionalidades de Desktop na Web:
  • Menu de Contexto (Botão Direito).
  • Seleção múltipla com Shift e Ctrl + Área de Seleção (Drag Box).
  • Breadcrumbs interativos para navegação rápida.
  • Preview de arquivos (Imagens, Vídeos, Markdown, Código).

A Filosofia: Soberania Digital

O OmniFiles não é apenas um projeto de portfólio. Ele nasce de uma visão sobre controle. Suas ferramentas não deveriam depender de um backend proprietário que pode sair do ar ou mudar as regras.

O OmniFiles roda no seu navegador, usando as chaves de API que você configurar (se quiser rodar localmente), manipulando os seus arquivos diretamente na fonte.

Como rodar o código (Dev)

Quer ver como foi feito ou contribuir? É Open Source.

git clone https://github.com/MrJc01/crom-omnifiles.git
cd crom-omnifiles/app
npm install

# (Opcional) Crie um .env baseando-se no .env.example para o Google Auth
cp .env.example .env

npm run dev

O que vem por aí?

  • 🔄 Sincronização Offline: Trabalhe no avião, sincronize quando pousar.
  • 📱 Versão Desktop (Tauri): O mesmo código React, mas empacotado como app nativo.
  • 📦 Novos Providers: Dropbox e WebDAV.

Se você curtiu a ideia de um gerenciador de arquivos que respeita seu tempo e seus dados, deixa uma ⭐ no GitHub e testa a demo!

— Juan Cândido / MrJ github.com/MrJc01

Nota: Este software é "Source Available". O código é aberto para estudo e uso pessoal. Para uso comercial ou revenda, consulte a licença no repositório.

☕ Apoie o Desenvolvimento Open-Source Nacional (Não falo só de mim aqui)

A revolução da "IA Soberana" e do "Local-First" não acontece apenas no Vale do Silício ou na Europa. Aqui no Brasil, através da organização Crom, também estou focado em construir e manter projetos que devolvem o controle ao desenvolvedor (além de trazer análises aprofundadas como esta para o TabNews e comunidade).

Manter o desenvolvimento de ferramentas open-source e a produção de conteúdo técnico denso exige tempo, dedicação e, claro, muito ☕ e 🍀. Se este artigo gerou valor para você, ou se você apoia a iniciativa de construirmos tecnologia de base independente por aqui, qualquer apoio é bem-vindo.

Sim eu uso IA, não como meu amigo ou faz tudo, mas como ferramenta, e recomendo o mesmo a você.

Estou idealizando ainda um módulo dedicado de donations na plataforma da Crom, mas enquanto ele não entra no ar, estou aceitando apoios via PIX para manter a infraestrutura rodando:

Chave PIX: mrj.crom@gmail.com

⚠️ Importante: Se você realizar um apoio, por favor, envie o comprovante (pode ser apenas com seu user do GitHub ou TabNews no assunto/corpo) para o e-mail: mrj.crom@gmail.com.

O Futuro: Assim que eu lançar a implementação oficial de donate/invest da Crom, farei questão de migrar manualmente esses apoios, transformando-os em créditos, badges de early supporter ou garantindo os devidos agradecimentos na plataforma.

Muito obrigado por ler até aqui e pela força! 🗿🍷

Fim da Transmissão