DEV Community

Duc Minh
Duc Minh

Posted on • Edited on

How I built a Secure 70-Module E-commerce Platform with Firebase.

Hi everyone! I’m a 14-year-old developer. I recently finished a project called "Sofa King" – a premium e-commerce solution. Today, I want to share the technical journey and how I managed a complex architecture using Firebase.

Why I built Sofa King
I wanted to create a platform that empowers local artisans to transition to digital stores easily, focusing on high performance and rock-solid security.

The 70-File Architecture
Managing 70 files as a solo developer was a challenge. I adopted an ES6 Module-based architecture to keep the logic clean and maintainable.

State Management: I used LocalStorage as a single source of truth for the cart logic to ensure zero-lag and offline resilience.

Modular Logic: Separate modules for Auth, Admin, and Security allowed me to scale the project without creating "Spaghetti code".

Security First with Firebase
Security isn't an afterthought. I implemented strict Server-side validation using Firebase Security Rules:

Role-Based Access (RBAC): Only whitelisted emails can access the Admin Dashboard.

Data Isolation: Users can only read their own order history.

Instant History Logging: I implemented a logic where purchase records are committed to the database immediately to ensure real-time transparency for the user.
Technical Deep Dive: The Engineering
Building a production-ready platform as a solo developer required more than just coding; it required architectural foresight. Here is how I solved the core engineering challenges:

  1. Managing Complexity in a 72-File Modular System
    Moving away from a monolithic structure, I adopted an ES6 Module-based architecture. Each functionality (Auth, Cart, Admin, Security) is isolated into its own module. * The Challenge: Keeping the UI (like the Navbar cart count) in sync across 25 HTML pages. * The Solution: I implemented a Shared State Management pattern using LocalStorage as a single source of truth for client-side data, allowing different modules to react to data changes without redundant database queries.

  2. Balancing Real-time Sync vs. Resource Efficiency
    While Firestore offers onSnapshot, using it everywhere is expensive and can lead to performance bottlenecks. * The Strategy: I used a Hybrid Data Fetching approach. Critical business flows like Order Tracking utilize real-time listeners for instant feedback. For administrative actions (like Account Locking or Comment Deletion), I chose a Standard Fetch-and-Refresh flow to ensure data integrity and reduce long-lived connection overhead.

  3. Customer-Centric Data Integrity
    In an e-commerce environment, trust is everything. I implemented a logic where purchase records are committed to the database the moment a transaction occurs.

The Implementation: I chose to prioritize the user's peace of mind. A purchase is a finalized action from the user's perspective; therefore, it is reflected in their "Buying History" immediately. The Admin Panel then acts as a verification layer to update these records. This ensures that even if a network glitch occurs, the user never "loses" sight of their order.

Conclusion
Building this project taught me that even at 14, with the right tools like Firebase and a modular mindset, we can build professional-grade software.

Check out my project on GitHub: https://github.com/Duc-tech-hub/Sofas-King Live Demo: https://sofas-king.web.app

Top comments (0)