Appearance

Frontend (Vue.js) ​

TendoPay's frontend is built with Vue.js. The codebase has been migrating from Vue 2 (legacy) to Vue 3 (current) on a per-surface basis — customer dashboard, checkout, signature, and admin — each gated behind feature flags during cutover.

Vue 2 deprecation

Vue 2 is deprecated and will be fully removed from the codebase by 15 June 2026. After that date no Vue 2 build pipeline, dependency, or runtime code will remain. All four surfaces are scheduled to complete their Vue 3 cutover before the removal date. New work must target Vue 3 only — pull requests that introduce Vue 2 code will be blocked in CI.

Frameworks and Tooling ​

Vue 2 (legacy — removal deadline 15 June 2026) ​

  • Vue 2 with Vue Router 3 and Vuex for state management.
  • Laravel Mix / Webpack for bundling.
  • Bootstrap-based styling with a handful of in-house components.
  • Still serves the small remaining set of surfaces that have not yet completed their Vue 3 cutover. These are tracked against the 15 June 2026 removal milestone.
  • No new features are accepted into the Vue 2 stack — only critical bug fixes that cannot wait for the Vue 3 migration of the affected surface.

Vue 3 (current) ​

  • Vue 3 with Vue Router 4 and Pinia for state management.
  • Vite as the build tool — significantly faster local dev and builds than the Webpack pipeline.
  • Tailwind CSS for styling, with shared design tokens and a small in-house component library (tp-components-vue3).
  • Composition API is preferred for new components.
  • Will be the sole frontend framework from 15 June 2026 onwards.

Both stacks currently share the same backend APIs, the same authentication state, and the same translation catalogue, so customers experience a single application even while two build pipelines exist behind the scenes. From 15 June 2026 only the Vue 3 pipeline will remain.

Surfaces ​

  • Customer dashboard — account, loans, repayment, profile, KYC flows.
  • Checkout — the merchant-embedded checkout used during purchases.
  • Signature flow — eSignature capture for loan agreements.
  • Admin dashboard — internal operations tooling for support, risk, and collections.

Each surface has its own entry point and can be migrated to Vue 3 independently, controlled by environment-level feature flags.

Key Capabilities ​

  • Internationalisation via vue-i18n for English and Filipino content.
  • Form validation via Vuelidate.
  • Bot protection via hCaptcha on signup and high-risk flows, with Cloudflare Turnstile available as an alternative.
  • KYC capture integrating with the third-party KYC SDK directly in the browser.
  • Document handling — PDF preview, image cropping, signature pads — all client-side where possible.

Mobile ​

The native mobile apps (iOS and Android) consume the same REST APIs as the web frontend. They are versioned, and the backend enforces a minimum supported app version so older clients can be required to upgrade.

Testing and Quality ​

  • Cypress with the Cucumber preprocessor for end-to-end tests. Suites are tagged so we can run subsets — basic flows on every PR, the full suite for releases, and dedicated device profiles (iPhone, iPad, Samsung, Realme, Vivo) for mobile coverage.
  • ESLint with project-specific rules for both Vue 2 and Vue 3 code (Vue 2 ruleset to be removed alongside the framework on 15 June 2026).
  • Prettier for formatting on the Vue 3 stack.
  • Lint, unit, and Cypress checks run in CI on every pull request.
  • A CI guard rejects new Vue 2 imports outside the surfaces still on the legacy stack, to prevent regression of the deprecation timeline.