Technical Details
Summary: A cross-repository project for replacing a faulty legacy system, involving real-time HTML snapshots of guest form-fills for sales compliance.
Problem: The legacy system stored large HTML snapshots directly in the database, causing frequent crashes and higher costs because it could not scale horizontally. Video playback quality was also poor because the original proof-of-concept shipped to production without substantial follow-up engineering.
High-Level Diagram
What I Did
FilamentPHP Admin Panel w/ REST API - watchdog-2.com (Laravel, MySQL)
- Developed an admin panel on top of Laravel using Filament PHP.
- Built REST API endpoints secured with Laravel Sanctum middleware.
- Used MySQL for video metadata and Google Cloud Storage for RRWeb video JSON storage, linked via a path field in the videos table.
- Used Laravel Cache and Queue drivers to cache video records on initial REST API input and queue jobs for uploading video data to Google Cloud Storage files.
- Wrote comprehensive PestPHP tests covering each endpoint, job, and custom Artisan command.
- Assigned Sanctum API tokens to users for applications calling the API, with separate abilities for read and write operations.
Integration Into Existing Applications - admin-sr.com (Laravel, MySQL)
- For each lead accessed by an internal user, retrieved video ID values from watchdog-2.com via its API.
- Used Laravel signed URLs to generate a temporary playback page URL on watchdog-2.com when accessing a lead’s videos on admin-sr.com.
- Stored a read-only Sanctum API token in
.env. - Wrote PHPUnit tests to reduce regression risk.
Integration Into Existing Applications - Flow Builder (TypeScript)
- Built a TypeScript module for Solar Reviews’ in-house frontend form builder, used across calculator sites such as solarreviews.com/solar-calculator.
- Used RRWeb to record guest user interactions and send them to watchdog-2.com.
- Solved for guest users who inflated RRWeb payload size by staying on the calculator for more than a day.
- Used TypeScript to make API object shape changes easier to refactor as the module grew more complex.
Result
- After around two weeks in production, the old database was dropped, saving the company about $10,000 in costs.
- RRWeb improved playback quality substantially, making form interactions fluid and adding options such as click visualization and playback speed control.