HOUSECALL — Redesigning 5,000+ LOC into a Modular Frontend Architecture
Broke a 5,000-LOC monolith into a modular Laravel + Inertia.js + Vue.js architecture — faster onboarding, faster releases, cleaner mental model.
// overview
HOUSECALL is a Dubai-based home-services platform. When I joined in early 2025, the customer-facing web app had grown into a 5,000+ LOC monolith of Vue.js pages with mixed concerns — server calls, UI state, and business logic were tangled inside single-file components. New engineers needed weeks to become productive.
// context
The codebase had a single Inertia.js page per route, and most of those pages were carrying hundreds of lines of mixed concerns. There was no clear boundary between the Laravel backend, the Inertia shared props, and the Vue components. Onboarding was slow because the mental model for 'where does X live?' didn't exist — everything lived in pages.
// architecture
┌─────────────────────────────────────────────────────────────┐
│ HOUSECALL Frontend Architecture │
└─────────────────────────────────────────────────────────────┘
┌──────────────────────────────┐
│ Laravel Backend │
│ (Routes · Controllers · │
│ Services · Repositories) │
└──────────────┬───────────────┘
│ Inertia.js shared props
▼
┌──────────────────────────────┐
│ Vue.js Modular Components │
│ │
│ ┌─────────┐ ┌──────────┐ │
│ │ Pages │ │ Layouts │ │
│ └────┬────┘ └──────────┘ │
│ ▼ │
│ ┌─────────┐ ┌──────────┐ │
│ │Features │ │ Shared │ │
│ │(booking,│ │ UI │ │
│ │ profile,│ │ (Button, │ │
│ │ payment)│ │ Modal) │ │
│ └─────────┘ └──────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────┐ │
│ │ Composables (useX) │ │
│ │ Composable business │ │
│ │ logic + API calls │ │
│ └───────────────────────┘ │
└──────────────────────────────┘// 01 — Modular refactor
Broke 5,000+ LOC of monolithic pages into a layered structure: routes → controllers → services → repositories on the Laravel side; pages → layouts → features → shared UI → composables on the Vue side. Each layer had a single concern and a clear contract.
// 02 — Composables for shared logic
Extracted recurring business logic (form state, validation, API calls) into reusable Vue composables (useX hooks). Eliminated duplication and gave the team a consistent pattern for new features.
// 03 — Onboarding
Introduced a written architecture map and a 'where does X live?' guide. New engineers went from weeks of orientation to shipping features in days — measured as a 40% reduction in onboarding time.
// 04 — React.js adoption
Initiated the adoption of React.js at HOUSECALL and defined the foundational architecture and tooling for new projects, so the team could choose the right framework per use case.
// outcomes
- 5,000+ LOC of monolithic pages broken into modular, reusable architecture
- Team onboarding time reduced by 40%
- Release velocity improved through clear component boundaries
- Initiated the adoption of React.js for new projects at HOUSECALL
- Defined the foundational frontend architecture and tooling for new builds