E-commerce Personalizado no Firebase

Eu construí um site de e-commerce personalizado do zero. Não utilizei plataformas prontas. Em vez disso, utilizei Firebase Realtime Database e Netlify.

O cliente precisava de uma configuração específica. Eles queriam um catálogo de produtos com variantes de preços e um painel administrativo. Eles também precisavam que sua equipe de vendas fizesse pedidos diretamente pelo site.

Veja como resolvi os principais desafios técnicos.

Separação de Dados

Mantive o banco de dados do e-commerce separado do banco de dados de gestão interna. Isso evita que dados comerciais se misturem com arquivos sensíveis, como salários de funcionários ou orçamentos.

Modelagem de Dados para Preços

Planos de preços costumam se repetir em diferentes produtos. Se você duplicar os dados do plano dentro de cada produto, as atualizações se tornam um pesadelo.

  • Criei um arquivo global para todos os planos.
  • Cada produto contém apenas um array de IDs de planos.
  • Isso torna as atualizações rápidas e evita erros de dados.

Numeração Atômica de Pedidos

Quando várias pessoas fazem pedidos ao mesmo tempo, ocorre uma condição de corrida (race condition). Se dois usuários lerem o mesmo último número de pedido, um pedido será sobrescrito.

  • Utilizei transações do Firebase para resolver isso.
  • A função runTransaction garante que o número seja incrementado corretamente, mesmo com muitos usuários simultâneos.
  • Isso garante que cada pedido tenha um número único.

Acesso Administrativo Seguro

Eu não queria armazenar senhas no código-fonte. Também evitei hashes simples como MD5.

  • Utilizei PBKDF2 via Web Crypto API.
  • Isso aplica milhares de iterações ao hash.
  • Isso torna os ataques de força bruta caros demais para os hackers.
  • Armazeno apenas o salt e o hash no código.

Corrigindo o Bug do "Zero"

Encontrei um bug onde produtos com preço 0 apareciam como "preço a definir".

  • Isso acontecia porque o JavaScript trata 0 como "falsy".
  • Corrigi isso alterando minha lógica.
  • Em vez de usar "price || null", usei "price != null".
  • Isso garante que o sistema reconheça 0 como um número válido.

Configuração de CSP

O Firebase utiliza subdomínios dinâmicos. Uma tag meta HTML padrão para Content Security Policy (CSP) não consegue lidar com esses wildcards.

  • Movi o CSP do HTML para os cabeçalhos HTTP do Netlify.
  • Isso me permitiu usar wildcards para que os serviços do Firebase funcionassem corretamente.

Construir sistemas personalizados exige mais do que apenas escrever código. Exige fazer escolhas arquiteturais que evitem falhas em produção.

Fonte: https://dev.to/androve2k/custom-e-commerce-on-firebase-catalog-atomic-orders-and-admin-panel-42ec