PUMP Admin Dashboard — Home Services Operations Panel
Full-stack admin panel bridging Firebase Firestore with a Laravel + Filament management interface for real-time content control, booking management, and operational monitoring.
Timeline: ~6 months — Oct 2025 to Apr 2026 with 29 iterative releases
Key Results
17 resources
Admin Panels
Full CRUD for all app entities — users, services, bookings, offers, content, config, and more
20+
API Endpoints
Complete REST API powering the Flutter mobile app (auth, services, banners, config, media, OTP)
24
Database Tables
Comprehensive schema covering services, bookings, promotions, content, theming, RBAC, and sync tracking
2 live
Real-Time Pages
Support chat and OTP monitoring with Firebase JS SDK onSnapshot — zero-latency updates
The Problem
PUMP's Flutter mobile app stored all data in Firebase Firestore, but the operations team had no centralized admin interface to manage services, users, bookings, promotions, theme configuration, or content — everything required manual Firestore Console edits or code deployments.
- Zero operational visibility — no dashboard to monitor bookings, revenue, user growth, or sync status. All data lived only in Firestore with no reporting layer.
- Content changes required developer involvement — updating banners, onboarding screens, FAQ, legal pages, or app theme colors meant a developer manually editing Firestore documents.
- No promotional tooling — no system to create, target, schedule, or track offers and promo codes for customers and providers.
- No OTP delivery infrastructure — the Flutter app needed WhatsApp-based OTP delivery for phone verification, but there was no server-side proxy to securely hold API credentials.
The Solution
Built a Laravel 12 + Filament v4 admin panel backed by PostgreSQL that acts as a cache layer over Firebase Firestore. Provides full CRUD on all Firestore collections, background sync jobs, a comprehensive REST API for the Flutter app, and real-time monitoring pages powered by Firebase JS SDK.
- 1Architected a dual-database sync strategy — PostgreSQL as a fast-query cache with firebase_id columns on every table, background import jobs pulling from Firestore via a custom REST client using Google Service Account credentials.
- 2Built 17 Filament resource panels — full CRUD for Users, Services, Categories, Providers, Bookings, Banners, Pages, FAQs, Onboarding, App Config, Theme Configs, Feature Flags, App Versions, Offers, Promo Codes, and Sync Logs.
- 3Implemented a complete REST API (v1) — 20+ endpoints for auth, services, categories, banners, pages, FAQs, navigation, onboarding, app config, theme, version check, media uploads, and file management — secured with Sanctum and API key middleware.
- 4Created a bilingual promotions engine — Offers and Promo Codes with EN/AR content, audience targeting (customer/provider/specific users/cities), scheduling, usage limits, discount types, and first-order-only logic.
- 5Built a real-time support chat system — Filament page using Firebase JS SDK with onSnapshot listeners for live message streaming, agent assignment, and session management.
- 6Implemented WhatsApp OTP proxy API — server-side controller proxying OTP delivery via Meta WhatsApp Business API (Graph API v21.0), with template-based and plain-text message modes.
- 7Built a real-time OTP monitoring dashboard — Filament page with Firebase JS SDK showing live OTP request statuses, stats cards, filter tabs, auto-expire logic, and sound notifications.
- 8Implemented PDF receipt generation — booking receipts with mPDF supporting Arabic RTL text, downloadable PDFs, and email delivery.
Architecture Decisions
Key technical decisions made during the project and the reasoning behind them.
PostgreSQL as a Cache Layer Over Firestore
Reasoning
Firestore is the source of truth for the mobile app, but its query capabilities are limited for admin reporting (no JOINs, no aggregations across collections). PostgreSQL enables complex queries, full-text search, and fast table rendering in Filament. Every admin write propagates to Firestore via a SyncToFirestore trait.
Outcome
Admin panel loads data instantly from PostgreSQL while all changes propagate to Firestore, keeping mobile app data consistent. Background sync runs every 5 minutes for incremental updates.
Custom Firestore REST Client Instead of Kreait SDK
Reasoning
The Kreait Firebase PHP SDK requires the gRPC PHP extension, which is difficult to install on VPS hosting (Hostinger). Built a lightweight FirestoreRestClient using google/auth for service account credentials and Guzzle for Firestore REST API v1 calls — zero native extension dependencies.
Outcome
Firestore read/write operations work on any PHP hosting without gRPC, reducing deployment friction to zero.
Filament v4 over Nova/Backpack/Custom Admin
Reasoning
Evaluated Nova, Backpack, and a custom-built admin. Filament v4 provides a modern Livewire-based UI with auto-generated CRUD from Eloquent models, built-in widgets, and a powerful form/table builder. Chosen over v3 for its improved schema components architecture.
Outcome
17 resource panels with full CRUD, search, filters, bulk actions, and 2 custom real-time pages — built rapidly with consistent UX.
Firebase JS SDK for Real-Time Admin Pages
Reasoning
For features requiring real-time updates (support chat, OTP monitoring), server-side polling would add latency and server load. Using Firebase JS SDK directly in Blade views with Alpine.js provides instant onSnapshot updates without backend overhead.
Outcome
Support chat and OTP dashboard update in real time with zero polling — immediate visibility into live operations.
The Tech Stack
PHP 8.4 — API routing, Eloquent ORM, queue workers for Firestore sync, scheduled jobs, Sanctum token auth, middleware pipeline
17 resource panels, 2 custom Livewire pages (support chat, OTP monitoring), 5 dashboard widgets, form builder with bilingual fields
24 tables with firebase_id foreign references, partial unique indexes, JSONB columns — relational cache over Firestore
Firestore REST API via custom client (google/auth + Guzzle), JS SDK v10.12 for real-time admin pages (onSnapshot listeners)
Arabic RTL booking receipts (autoArabic, autoLangToFont), A4 format, email attachment delivery
Meta Graph API v21.0 — server-side OTP proxy with template-based and plain-text message modes, API key auth
The Impact
Gave the PUMP operations team full control over the mobile app's content, services, bookings, and promotions without requiring developer intervention — enabling independent app management across 17 admin panels and 20+ API endpoints.
Related Reading
Deep dives and comparisons related to the technologies used in this project.
Scaling Laravel APIs: From 500 to 10,000 Concurrent Users
Practical techniques for scaling Laravel beyond its reputation — queue-based processing, Redis caching strategies, and database optimization patterns from the Avidnote project.
Laravel vs. Django for Backend APIs — A Developer's Honest Comparison
Senior backend developer compares Laravel (PHP) and Django (Python) for APIs. Real benchmarks, development speed, hosting costs, and when to use each framework.
Related Projects
Explore similar case studies with overlapping technologies and challenges.