Custom E-commerce on Firebase

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

The goal was to serve a POS terminal reseller. They needed a catalog, pricing variants, and an admin panel. The sales team needed to place orders directly from the site.

Here is how I built it and the lessons I learned.

The Stack • Vanilla HTML, CSS, and JS. • Firebase Realtime Database for data. • Firebase Storage for files. • Netlify for hosting and functions.

Key Decisions

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

  2. Global Pricing Archive Instead of putting pricing plans inside every product, I created a global tariffs folder. Products only hold an array of IDs. This avoids data duplication. If a plan changes, I update it once.

  3. Atomic Orders When multiple people place orders at the same time, you face race conditions. If two people read the same order number, one order might vanish. I used Firebase runTransaction() to ensure every order gets a unique, sequential number.

  4. Secure Admin Access I did not store passwords in the source code. I used PBKDF2 via the Web Crypto API. This makes brute-force attacks very difficult. The code only contains a salt and a hash.

Lessons Learned

• Watch out for falsy values. In JavaScript, 0 is falsy. If a product price is 0, a simple check like "price || null" will delete the price. Always use "price != null" to include zero.

• Configure CSP in HTTP headers. Meta tags for Content Security Policy do not support wildcards for subdomains. Firebase uses dynamic subdomains. I moved the CSP to netlify.toml to make it work.

• Use Security Rules for real protection. Never rely on hiding buttons in your UI. Use Firebase rules to restrict who can read and write data.

Building custom solutions requires careful architectural choices. Small details like transaction handling and header configuration prevent big failures in production.

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