Platform Overview
PixelTech Colombia is a modern e-commerce platform built entirely on Firebase, designed for high performance and real-time synchronization. The architecture leverages Firebase services for a serverless, scalable solution optimized for the Colombian retail market.Technology Stack
Frontend
- Vanilla JavaScript (ES6+)
- Tailwind CSS
- Firebase SDK 10.7.1
- Service Workers (PWA)
Backend
- Cloud Functions (Node.js 24)
- Firestore (NoSQL Database)
- Firebase Authentication
- Cloud Storage
Integrations
- MercadoPago API
- ADDI API
- Sistecrédito API
- WhatsApp Business API
- Nodemailer (SMTP)
Firebase Services Architecture
The platform uses five core Firebase services working together:1. Firebase Authentication
Purpose: User authentication and authorization Sign-in Methods:- Email/Password authentication
- Google OAuth provider
- Anonymous authentication for guest checkouts
Role-based Access Control
public/js/firebase-init.js and checked on every page load through onAuthStateChanged listeners.
2. Cloud Firestore (Database)
Purpose: Real-time NoSQL database for all application data Collections Structure:Notification Functions
Automated Tasks
Triggers & Utilities
| Module | File | Purpose |
|---|---|---|
| MercadoPago | functions/mercadopago.js | Payment processing and webhooks |
| ADDI | functions/addi.js | Buy now pay later integration |
| Sistecrédito | functions/sistecredito.js | Credit payment gateway |
| COD | functions/cod.js | Cash on delivery orders |
| Emails | functions/emails.js | Order confirmation and shipping notifications |
functions/whatsapp.js | Customer service automation | |
| Scheduler | functions/scheduler.js | Automated maintenance tasks |
| Sync | functions/sync.js | Product timestamp management |
| Google Merchant | functions/google-merchant.js | Product feed for Google Shopping |
| Sitemap | functions/sitemap.js | SEO sitemap generation |
5. Firebase Hosting
Purpose: Host the frontend application with CDN distribution Configuration (firebase.json):
firebase.json
- Single Page Application (SPA) routing
- Dynamic sitemap via Cloud Function
- Google Merchant feed integration
- Content Security Policy headers
- CDN caching and SSL certificates
Frontend Architecture
Smart Sync System
The platform’s core innovation is the Smart Sync system - an intelligent real-time caching mechanism that minimizes Firestore reads while keeping data fresh. How it Works (public/js/app.js):
Smart Sync Architecture
- Instant load: Products appear in under 50ms from cache
- Minimal reads: Only downloads changes since last visit
- Real-time updates: Listens for price/stock changes
- Offline-first: Works without network connection
- Cost-effective: Reduces Firestore reads by ~95%
Cache Invalidation
Global cache clearing mechanism (public/js/firebase-init.js):
Cache Version Control
cacheVersion in Firestore config/system to force all clients to refresh their cache.
Component Structure
Modular JavaScript Files:| File | Purpose |
|---|---|
firebase-init.js | Firebase SDK initialization and exports |
app.js | Smart Sync engine and global state |
cart.js | Shopping cart management |
checkout.js | Checkout flow and payment processing |
catalog.js | Product listing and filtering |
product-detail.js | Product page with variant selection |
auth-logic.js | Authentication UI and flows |
profile.js | User profile and order history |
admin-*.js | Admin panel modules |
public/js/global-components.js):
- Search modal with instant results
- Shopping cart drawer
- Product quick view modal
- Variant selector (color/capacity)
- Toast notifications
Progressive Web App (PWA)
Service Worker (public/service-worker.js):
- Offline catalog caching
- Background sync for orders
- Push notification support
- Asset precaching
public/manifest.json):
- Installable on mobile devices
- Splash screens and icons
- Standalone app experience
Backend Architecture
Cloud Functions Structure
Payment Processing Flow: Example: MercadoPago Flow (functions/mercadopago.js):
MercadoPago Integration
functions/emails.js):
Email Triggers
Scheduled Tasks
Automated maintenance with Cloud Scheduler (functions/scheduler.js):
Scheduled Functions
Security Model
Firestore Security Rules
Core Principles:- Defense in depth: Validate on client AND server
- Role-based access: Admin vs Customer permissions
- Data validation: Ensure required fields exist
- Owner isolation: Users can only access their own data
firestore.rules):
storage.rules):
Storage Security
API Security
Cloud Functions Authentication:Function Security
Data Flow
Customer Purchase Flow
Admin Order Management Flow
Real-time Inventory Sync
Performance Optimizations
Smart Sync Cache
95% reduction in Firestore reads through intelligent localStorage caching
Lazy Loading
Images load on-demand with IntersectionObserver for fast initial page load
Code Splitting
Separate JS files for admin/customer flows to reduce bundle size
CDN Hosting
Firebase Hosting distributes assets globally with edge caching
Service Worker
Offline-first PWA with asset caching and background sync
Firestore Indexes
Optimized compound indexes for fast complex queries
Scalability
Current Architecture Supports:- Products: Unlimited (tested with 10,000+ items)
- Orders: Unlimited with automatic archival
- Concurrent Users: 10,000+ (Firebase scales automatically)
- Traffic: Handles Colombian retail peak seasons
Database Optimization
Database Optimization
- Use Firestore subcollections for large nested data
- Implement pagination for large result sets
- Archive old orders to separate collection
- Use Firestore composite indexes for complex queries
Function Cold Starts
Function Cold Starts
- Keep functions warm with scheduled pings
- Use minimum instances (paid feature) for critical functions
- Optimize function bundle size
- Use Node.js 24 for better performance
Storage Costs
Storage Costs
- Compress images before upload (max 1200x1200)
- Use Firebase Storage CDN caching
- Implement image optimization pipeline
- Delete unused files regularly
Firestore Reads
Firestore Reads
- Smart Sync reduces reads by 95%
- Use cache-first strategies
- Implement pagination for admin panels
- Aggregate data in summary documents
Monitoring & Debugging
Firebase Console
Monitor usage, performance, and costs in real-time
Cloud Functions Logs
View function execution logs with
firebase functions:logPerformance Monitoring
Track page load times and API latency automatically
Crashlytics
Monitor frontend errors and crashes
The architecture is designed for Colombian e-commerce at scale - handling multiple payment methods, real-time inventory across channels, and seamless customer experience.
Next Steps
Quickstart Guide
Deploy your own PixelTech store
Payment Integrations
Configure MercadoPago, ADDI, and more
Admin Features
Explore the admin dashboard capabilities
API Reference
Cloud Functions API documentation