E-commerce Personalizado no Firebase

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

O objetivo era atender um revendedor de terminais POS. Eles precisavam de um catálogo, variantes de preços e um painel administrativo. A equipe de vendas precisava fazer pedidos diretamente pelo site.

Aqui está como eu o construí e as lições que aprendi.

A Stack • HTML, CSS e JS puros (Vanilla). • Firebase Realtime Database para os dados. • Firebase Storage para arquivos. • Netlify para hospedagem e funções.

Decisões Principais

  1. Separação de Banco 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 dados administrativos sensíveis, como salários ou orçamentos.

  2. Arquivo de Preços Global Em vez de colocar planos de preços dentro de cada produto, criei uma pasta global de tarifas. Os produtos contêm apenas um array de IDs. Isso evita a duplicação de dados. Se um plano mudar, eu o atualizo uma única vez.

  3. Pedidos Atômicos Quando várias pessoas fazem pedidos ao mesmo tempo, você enfrenta condições de corrida (race conditions). Se duas pessoas lerem o mesmo número de pedido, um pedido pode desaparecer. Usei o runTransaction() do Firebase para garantir que cada pedido receba um número único e sequencial.

  4. Acesso Administrativo Seguro Não armazenei senhas no código-fonte. Usei PBKDF2 via Web Crypto API. Isso torna os ataques de força bruta muito difíceis. O código contém apenas um salt e um hash.

Lições Aprendidas

• Cuidado com valores falsy. No JavaScript, 0 é falsy. Se o preço de um produto for 0, uma verificação simples como "price || null" excluirá o preço. Sempre use "price != null" para incluir o zero.

• Configure o CSP nos cabeçalhos HTTP. Meta tags para Content Security Policy não suportam wildcards para subdomínios. O Firebase usa subdomínios dinâmicos. Movi o CSP para o netlify.toml para fazê-lo funcionar.

• Use Security Rules para proteção real. Nunca confie apenas em esconder botões na sua interface (UI). Use as regras do Firebase para restringir quem pode ler e escrever dados.

Construir soluções personalizadas exige escolhas arquiteturais cuidadosas. Pequenos detalhes, como o tratamento de transações e a configuração de cabeçalhos, evitam grandes falhas em produção.

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