The latest articles on DEV Community by Alejandro (@srpakura). https://dev.to/srpakura https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3831681%2Fc5c85f83-b231-48bb-b461-65fb255605d6.png https://dev.to/srpakura en Alejandro Wed, 18 Mar 2026 15:51:07 +0000 https://dev.to/srpakura/showdev-construi-um-pwa-de-fitness-local-first-com-vanilla-js-e-ia-adeus-myfitnesspal-41e0 https://dev.to/srpakura/showdev-construi-um-pwa-de-fitness-local-first-com-vanilla-js-e-ia-adeus-myfitnesspal-41e0 <p>Fala, comunidade! 👋</p> <p>Hoje quero compartilhar com vocês um projeto no qual venho trabalhando intensamente: o Aerko_</p> <p>Como designer de produto e desenvolvedor, eu estava frustrado com o estado atual dos aplicativos de fitness. A maioria deles cobra assinaturas caras em dólar por recursos básicos (como um leitor de código de barras), exige conexão constante com a internet e não passa de um "CRUD gourmetizado" cheio de rastreadores e anúncios.</p> <p>Decidi que queria algo diferente. Queria voltar às bases da web, focar na performance extrema e, acima de tudo, na privacidade.</p> <h2> A Arquitetura (Zero Bloatware) </h2> <p>O desafio que me propus foi criar uma aplicação complexa sem depender dos frameworks modernos pesados. A stack do Aerko_ é brutalista e direta:</p> <ol> <li>100% Vanilla JavaScript: Utilizando Web Components nativos (estendendo <code>HTMLElement</code>) para criar uma interface reativa e modular sem a sobrecarga do React ou Vue.</li> <li>Local-First &amp; Offline: O app é um PWA puro. Ele usa IndexedDB para armazenar todos os dados de treino e dieta localmente. Não existe um servidor central coletando seus dados. Você pode treinar no subsolo da academia sem sinal de 4G que o app vai funcionar perfeitamente.</li> <li>Inteligência Artificial no Navegador: Integrei o MediaPipe do Google rodando dentro de um Web Worker para analisar a biomecânica e a técnica dos exercícios usando a câmera do celular. Tudo processado no dispositivo do usuário (Zero-Knowledge).</li> <li>API Aberta: Integração com a API do Open Food Facts para o leitor de código de barras, mantendo a filosofia de dados abertos.</li> </ol> <h2> O que o Aerko_ faz? </h2> <p>Para quem treina, o app resolve três dores principais:</p> <ol> <li>Nutrição: Leitor de código de barras gratuito e cálculo de macros sem paywall.</li> <li>Treino: Foco em sobrecarga progressiva, calculando automaticamente o e1RM (Estimated 1 Rep Max) para garantir que você está evoluindo.</li> <li>Privacidade: Seus dados são seus. Se você desinstalar o app, os dados somem.</li> </ol> <h2> Show me the code! </h2> <p>O projeto tem o código disponível (Source-available). Meu objetivo aqui não é vender nada, mas sim compartilhar a arquitetura e receber feedbacks de devs mais experientes. </p> <p>Repositório no GitHub: <a href="https://github.com/SrPakura/AERKO_PWA" rel="noopener noreferrer">https://github.com/SrPakura/AERKO_PWA</a></p> <p>Live App: <a href="https://aerko.app" rel="noopener noreferrer">https://aerko.app</a></p> <p>Como o app lida com dados sensíveis (criptografia de chaves no IndexedDB) e processamento pesado de IA via Web Workers, adoraria que a galera focada em arquitetura front-end e segurança desse uma olhada no repositório.</p> <p>Se você curte a ideia de construir para a web usando os padrões nativos (Vanilla JS, CSS puro, Web Components) e criar produtos que respeitam o usuário, deixa uma estrela lá no repo e me diz o que achou da estrutura de pastas e do roteamento manual!</p> <p>Valeu demais, galera!</p> webdev ai javascript android