Back to portfolio
02 / HEALTH & BEAUTY · CLINIC PLATFORM

Hayyu Skin Clinic

Reliability for high-risk clinic operations, paired with a fast marketing site whose CMS-driven content stays fresh without abandoning caching.

Internal — not publicly accessible Clinic operations Async processing Marketing & SEO Next.js / ISR
// screenshots
Hayyu customer acquisition website
ss-01.jpg
01Customer acquisition site
01
Hayyu branch performance dashboard
ss-02.jpg
02Branch performance dashboard
02
Hayyu reservation queue
ss-03.jpg
03Reservation queue
03
Hayyu customer follow-up dashboard
ss-04.jpg
04Follow-up dashboard
04
ss-05.jpg
05Landing page hero
05
ss-06.jpg
06Treatment content
06
ss-07.jpg
07Article content
07
ss-08.jpg
08Branch reservation flow
08
ss-09.jpg
09CMS content refresh
09
ss-10.jpg
10Cache invalidation architecture
10

Business context

Hayyu is a multi-branch clinic platform where a successful payment can affect orders, invoices, service records, loyalty points, inventory, and notifications. To avoid duplicate settlement and provider timeouts, the payment callback is kept lightweight: it validates the request, records an idempotent queue item, returns quickly, and lets a worker process the payment transactionally.

On the customer-acquisition side, the Hayyu landing page uses Next.js caching and CMS content for treatments, promotions, articles, doctors, and branches. A separate MySQL binlog/CDC listener resolves which cache tags are affected by operational changes and triggers targeted revalidation, keeping content fresh without globally purging the site.

The challenge

Payments and inventory are both operational points where a timeout or duplicate request can create a hard-to-reconcile result. The design separates the provider callback and the user-facing checkout from longer-running work, while preserving idempotency, row-level coordination, retries, and an audit trail. A similar separation is used for the marketing site: operational changes are translated into targeted cache invalidation so content can be fresh without giving up the performance benefits of ISR.

Solution design

  • Payment webhook pipeline that validates signatures, records idempotent callbacks, and returns to Midtrans quickly.
  • MySQL-backed queue with a unique callback key, worker row locking, atomic payment processing, retry handling, and re-queue/monitoring paths.
  • Post-commit notification handling so an external notification failure does not roll back a valid payment.
  • Shared stock-insertion contract with Adapter and Strategy patterns for checkout, transfer, and receiving flows.
  • Queued stock-card and HPP processing with transactional workers, exponential backoff, and failure alerts.
  • Next.js App Router marketing pages with CMS integration, typed form validation, branch-aware reservation-to-WhatsApp flow, and SEO metadata/sitemap handling.
  • MySQL CDC-driven cache-tag invalidation that resolves related records and revalidates only affected Next.js content.
Prev:PROMIS Next:Soldout