
ABILI Service — Employee and learner training platform
ClipLine Inc. is a technology company providing the “ABILI” platform—a ServiceTech solution that helps multi-site businesses run more efficiently by standardizing operations, training, and delivering information and skills through video. The platform connects management through frontline staff and agents to reduce drift between sites and improve operational performance. Widely used in service industries such as retail, F&B, and healthcare, ClipLine now serves tens of thousands of locations and millions of users while helping businesses improve revenue, customer experience, and labor productivity at scale.
Tech stack
CORE
SUPPORTING
My role
Frontend (admin CMS module)
Key features
- Built a multi-role React SPA architecture for independent user groups (Admin/Service/Student/Coach/Branch) with route-based code splitting and production self-healing for chunk load failures
- Designed state management combining Redux-Saga and local state with clear separation between global state, UI state, and server cache across 100+ screens
- Organized UI with Atomic Design for modularity, maintainability, and scale
- Implemented a fully client-side video pipeline using RecordRTC, FFmpeg.wasm, and MediaPipe—recording, encoding, and real-time background blur without a dedicated media server
- Designed and shipped 200+ Redux-Saga workflows for complex operations (S3 upload, retry, batch processing), keeping stability under large concurrent usage (on the order of hundreds of thousands of users)
- Set up production observability and a Webpack 5 build pipeline (git-hash versioning) with Datadog RUM, Sentry, and GTM for system-wide monitoring and debugging
How does the list stay coherent after search or sort?
The reports saga keeps selection in sync with the current result set (including when the sort order changes) so the detail pane does not point at a stale row.
How is file download kept reliable?
Report media is fetched with retry helpers and then saved client-side with a generated filename, while download events are logged for traceability.
How do you avoid many roles inflating the initial bundle?
Each role area is split into route chunks, with self-healing when chunk loading fails so users can keep working even with stale deploy caches or flaky networks.
How do you avoid state conflicts when using Redux-Saga, Recoil, and SWR together?
Clear ownership boundaries: Saga + Redux for global orchestration and workflows, Recoil for local UI coordination, and SWR for server data cache—avoiding competing sources of truth across 100+ screens.
How was migrating 1100+ files rolled out without downtime?
Migration shipped in small batches with a compatibility adapter between legacy HOC flows and new hook-based modules, so the team could ship features while migrating screen by screen.
What keeps the client-side video pipeline stable enough for production?
The RecordRTC, FFmpeg.wasm, and MediaPipe pipeline is structured asynchronously with cancel/retry guards and explicit progress state, so long-running work stays responsive and can recover under browser memory pressure.
Performance
N/A
Lighthouse score
1M+
Users
~35%
API calls reduced





