E-commerce personalizado en Firebase

Construí un sitio de e-commerce personalizado desde cero. No utilicé plataformas comerciales prefabricadas. Utilicé Firebase Realtime Database y Netlify.

El objetivo era dar servicio a un revendedor de terminales de punto de venta (POS). Necesitaban un catálogo, variantes de precios y un panel de administración. El equipo de ventas necesitaba realizar pedidos directamente desde el sitio.

Aquí explico cómo lo construí y las lecciones que aprendí.

The Stack

• HTML, CSS y JS vanilla. • Firebase Realtime Database para los datos. • Firebase Storage para los archivos. • Netlify para el hosting y las funciones.

Key Decisions

  1. Database Separation Mantuve la base de datos de e-commerce separada de la base de datos de gestión interna. Esto evita que los datos comerciales se mezclen con datos administrativos sensibles, como salarios o presupuestos.

  2. Global Pricing Archive En lugar de incluir los planes de precios dentro de cada producto, creé una carpeta de tarifas global. Los productos solo contienen un array de IDs. Esto evita la duplicación de datos. Si un plan cambia, lo actualizo una sola vez.

  3. Atomic Orders Cuando varias personas realizan pedidos al mismo tiempo, te enfrentas a condiciones de carrera (race conditions). Si dos personas leen el mismo número de pedido, uno de ellos podría desaparecer. Utilicé runTransaction() de Firebase para asegurar que cada pedido reciba un número único y secuencial.

  4. Secure Admin Access No almacené contraseñas en el código fuente. Utilicé PBKDF2 a través de la Web Crypto API. Esto hace que los ataques de fuerza bruta sean muy difíciles. El código solo contiene un salt y un hash.

Lessons Learned

• Cuidado con los valores falsy. En JavaScript, 0 es falsy. Si el precio de un producto es 0, una comprobación simple como "price || null" eliminará el precio. Utiliza siempre "price != null" para incluir el cero.

• Configura el CSP en los encabezados HTTP. Las etiquetas meta para Content Security Policy no admiten comodines para subdominios. Firebase utiliza subdominios dinámicos. Moví el CSP a netlify.toml para que funcionara.

• Usa Security Rules para una protección real. Nunca confíes en ocultar botones en tu interfaz de usuario. Utiliza las reglas de Firebase para restringir quién puede leer y escribir datos.

Construir soluciones personalizadas requiere decisiones arquitectónicas cuidadosas. Pequeños detalles como el manejo de transacciones y la configuración de encabezados previenen grandes fallos en producción.

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