Comercio electrónico personalizado en Firebase

Construí un sitio de comercio electrónico personalizado desde cero. No utilicé plataformas comerciales prefabricadas. En su lugar, utilicé Firebase Realtime Database y Netlify.

El cliente necesitaba una configuración específica. Querían un catálogo de productos con variantes de precios y un panel de administración. También necesitaban que su equipo de ventas realizara pedidos directamente desde el sitio.

Así es como resolví los principales desafíos técnicos.

Separación de datos Mantuve la base de datos de comercio electrónico separada de la base de datos de gestión interna. Esto evita que los datos comerciales se mezclen con archivos sensibles como salarios de empleados o presupuestos.

Modelado de datos para precios Los planes de precios suelen repetirse en diferentes productos. Si duplicas los datos del plan dentro de cada producto, las actualizaciones se convierten en una pesadilla.

  • Creé un archivo global para todos los planes.
  • Cada producto solo contiene un array de IDs de planes.
  • Esto hace que las actualizaciones sean rápidas y evita errores de datos.

Numeración atómica de pedidos Cuando varias personas realizan pedidos al mismo tiempo, te enfrentas a una condición de carrera (race condition). Si dos usuarios leen el mismo último número de pedido, uno de los pedidos se sobrescribe.

  • Utilicé transacciones de Firebase para resolver esto.
  • La función runTransaction asegura que el número se incremente correctamente, incluso con muchos usuarios concurrentes.
  • Esto garantiza que cada pedido tenga un número único.

Acceso administrativo seguro No quería almacenar contraseñas en el código fuente. También evité hashes simples como MD5.

  • Utilicé PBKDF2 a través de la Web Crypto API.
  • Esto aplica miles de iteraciones al hash.
  • Hace que los ataques de fuerza bruta sean demasiado costosos para los hackers.
  • Solo almaceno el salt y el hash en el código.

Corrigiendo el error del "cero" Encontré un error donde los productos con un precio de 0 se mostraban como "precio por definir".

  • Esto sucedía porque JavaScript trata el 0 como "falsy".
  • Lo solucioné cambiando mi lógica.
  • En lugar de usar "price || null", utilicé "price != null".
  • Esto asegura que el sistema reconozca el 0 como un número válido.

Configuración de CSP Firebase utiliza subdominios dinámicos. Una etiqueta meta HTML estándar para la Política de Seguridad de Contenido (CSP) no puede manejar estos comodines (wildcards).

  • Moví la CSP del HTML a los encabezados HTTP de Netlify.
  • Esto me permitió usar comodines para que los servicios de Firebase funcionen correctamente.

Construir sistemas personalizados requiere más que solo escribir código. Requiere tomar decisiones arquitectónicas que prevengan fallos en producción.

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