Skip to content
All work

1 min read

PAYBACK

Owning the frontend of PAYBACK's sign-up flow

Visit live site
  • ClientPAYBACK (via iMedia24)
  • RoleSenior Frontend Developer, frontend owner of enrollment
  • WhenAug 2025 to now
  • TeamGermany, Poland, Morocco
  • 1.1M+

    monthly visitors

  • 100%

    test coverage

Enrollment is how new members join PAYBACK, and American Express, dm, EDEKA and Aral depend on it. I helped design it and code it from scratch.

PAYBACK sign-up step where members pick a card and partners

Context

Micro-frontends: each team owns its slice in its own NX monorepo. Content in PayloadCMS, infra on GCP with Terraform.

What I helped build

  • Enrollment, from scratch

    Designed and coded with the team in Next.js and MUI. I own the frontend.

  • Card and partner picker

    Members pick the card that suits them and the partners they want, in one smooth flow.

  • Email and address checks

    Emails are validated against other teams' services, addresses before anything is sent.

  • Submit and survive failure

    The request goes to my team's backend. Errors are handled, and circuit breakers stop a failing service from taking sign-up down.

  • SLOs and tests

    Datadog SLOs and synthetic checks on login and sign-up. Playwright on every path, Vitest for logic.

  • On-call and coaching

    One week a month, 24/7. Backend teammates now ship frontend changes too.

How it's built

Enrollment is one slice of a micro-frontend site. Every step is checked before the request reaches the backend, and Datadog watches the live flow.

Enrollment flow
  1. Pick card and partners
  2. Email checkOther teams' services
  3. Address check
  4. SubmitMy team's backend
  5. Errors and circuit breakersFailures stay contained
Quality
  1. VitestLogic
  2. PlaywrightEvery path
  3. DatadogSLOs, synthetic checks
  4. On-callOne week a month
StackNext.jsMUINXPayloadCMSGCPTerraformPlaywrightVitestDatadog