Back to projects
VISION+
Nuxt.jsVue 3TypeScriptTailwind CSSOTTAuthentication

VISION+

Rebuilt the web client for VISION+, an Indonesian OTT platform serving live TV, TIMNAS national football matches, VOD, and original series. Shipped a modular Nuxt 3 / Vue 3 component system, hardened the authentication flow for high-traffic match days, and cleared 50+ legacy defects during UAT.

Tech used

Nuxt.jsVue 3TypeScriptTailwind CSSPiniaREST APIVite
Visit live site

Situation

VISION+ launched in January 2020 as a premium digital entertainment service — live national TV, TIMNAS football broadcasts, VOD, and exclusive originals across romance, horror, and comedy. Its web client carried years of legacy code: inconsistent UI patterns, defects that surfaced repeatedly in UAT, and an auth flow that buckled under the traffic spikes of major live events.

Task

Rebuild the web application from scratch on a modern stack, deliver a component system the team could ship against faster, make authentication (login, register, forgot password) survive peak load during TIMNAS matches, and drive the legacy defect backlog to zero before release.

Action

Built the app from the ground up with Nuxt.js, Vue 3, TypeScript, and Tailwind CSS, extracting a library of modular reusable components that cut development cycles by ~25%. Rewrote the authentication pages — login, register, forgot password — and load-tested them against live-event traffic patterns so signup and sign-in held up during TIMNAS broadcasts. Built a product-list banner component to surface highlighted content on the homepage. Triaged and fixed 50+ critical legacy defects flagged in User Acceptance Testing, and tuned responsive layouts and asset loading against Lighthouse reports across mobile, tablet, and desktop.

Result

App stability improved ~40%, cutting support ticket volume and raising user confidence. Development cycles ran ~25% faster on the reusable component system. Responsive delivery across devices lifted client satisfaction ~30%, backed by Lighthouse performance reports. Auth flows held through TIMNAS match traffic with no login outage.

Overview

VISION+ launched on January 15, 2020 as a premium digital entertainment service for the Indonesian market. It carries live national TV channels, TIMNAS national football team matches and other sports, video-on-demand, and exclusive original series across romance, horror, and comedy — delivered through mobile apps and the web across a wide device range.

I worked on the web client: rebuilding it from scratch and stabilizing what the legacy codebase left behind.

The Legacy Problem

The existing web app had accumulated years of patches. Two symptoms mattered most:

  • UI drift — near-identical elements implemented several different ways, so every new feature meant re-solving solved problems.
  • A defect backlog that resurfaced in UAT — over 50 critical issues were still open when testing started, and they were the main source of support tickets.

Rebuild

I rebuilt the application on Nuxt.js + Vue 3 + TypeScript + Tailwind CSS, with a modular reusable component library as the foundation rather than an afterthought.

Typed props and a single source of truth per UI pattern meant feature work became composition instead of construction. Development cycles ran about 25% faster once the library stabilized.

Authentication Under Live-Event Load

Auth is where an OTT platform actually fails. A TIMNAS match doesn't produce steady traffic — it produces a spike, minutes before kickoff, of users who need to log in right now or churn.

I built login, register, and forgot password from scratch and treated match day as the design constraint, not an edge case: predictable error states, no blocking client work on the critical path, and behavior verified against live-event traffic patterns before broadcast. The flows held through TIMNAS matches without a login outage.

Content Discovery

Built a product-list banner component for the homepage to surface highlighted content — the primary entry point into the catalog, so it had to render fast and degrade gracefully on slow connections.

Stabilization

During UAT I triaged and resolved 50+ critical legacy defects. App stability improved roughly 40%, which showed up directly as reduced support ticket volume.

Responsive & Performance

Layouts and asset loading were tuned against Lighthouse reports across mobile, tablet, and desktop — the device spread VISION+ actually ships to. Measured improvements translated to about a 30% lift in client satisfaction.