Custom E-commerce on Firebase

I built a custom e-commerce site from scratch. I did not use off-the-shelf platforms. Instead, I used Firebase Realtime Database and Netlify.

The client needed a specific setup. They wanted a product catalog with pricing variants and an admin panel. They also needed their sales team to place orders directly from the site.

Here is how I solved the main technical challenges.

Data Separation I kept the e-commerce database separate from the internal management database. This prevents commercial data from mixing with sensitive files like employee salaries or budgets.

Data Modeling for Pricing Pricing plans often repeat across different products. If you duplicate plan data inside every product, updates become a nightmare.

  • I created a global archive for all plans.
  • Each product only holds an array of plan IDs.
  • This makes updates fast and prevents data errors.

Atomic Order Numbering When multiple people place orders at the same time, you face a race condition. If two users read the same last order number, one order gets overwritten.

  • I used Firebase transactions to solve this.
  • The runTransaction function ensures the number increments correctly, even with many concurrent users.
  • This guarantees every order has a unique number.

Secure Admin Access I did not want to store passwords in the source code. I also avoided simple hashes like MD5.

  • I used PBKDF2 via the Web Crypto API.
  • This applies thousands of iterations to the hash.
  • It makes brute-force attacks too expensive for hackers.
  • I only store the salt and the hash in the code.

Correcting the 'Zero' Bug I found a bug where products with a price of 0 showed as "price to be defined."

  • This happened because JavaScript treats 0 as "falsy."
  • I fixed this by changing my logic.
  • Instead of using "price || null," I used "price != null."
  • This ensures the system recognizes 0 as a valid number.

CSP Configuration Firebase uses dynamic subdomains. A standard HTML meta tag for Content Security Policy (CSP) cannot handle these wildcards.

  • I moved the CSP from the HTML to Netlify HTTP headers.
  • This allowed me to use wildcards for Firebase services to work correctly.

Building custom systems requires more than just writing code. It requires making architectural choices that prevent production failures.

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