YRQR

The Problem

YRQR is a Portuguese SaaS platform for dynamic QR code management. It serves businesses from independent retailers to enterprises — each with different requirements around analytics, link management, and brand customization.

The engineering challenge was not building the features. The challenge was that I joined a codebase with no clear architecture: loosely coupled logic, inconsistent patterns, no separation between business rules and UI components. Adding features meant touching everything. Testing was nearly impossible. The product could not scale in this state.

My Approach

Before writing new features, I led a structural reset of the frontend architecture. The principle: code should be organized around what it does, not where it appears.

Services / Hooks / Components separation. All Strapi API interactions moved into typed service modules with explicit request/response contracts. State management and business logic moved into custom hooks. Components became purely presentational — they receive data and emit events, nothing more.

Component-driven development. Every UI element was built as an isolated component with a defined props API before being composed into views. This eliminated duplication and made parallel development possible across the team.

Contract testing with PactumJS. I introduced consumer-driven contract tests between the React frontend and the Strapi backend. This meant breaking API changes were caught automatically, before they reached production. Combined with Vitest unit tests for hook logic and service functions, we had genuine confidence in the codebase.

Architecture

React Frontend
  ├── /services       → Strapi API clients (typed, tested)
  ├── /hooks          → Data fetching, state, business rules
  ├── /components     → Atomic UI, purely presentational
  └── /views          → Page composition from components + hooks

Strapi Backend (headless CMS)
  └── Custom content types, REST controllers, API endpoints

Testing Layer
  ├── Vitest          → Unit tests (hooks, services)
  └── PactumJS        → Contract tests (API integration)

Impact

The refactored architecture became the team standard. New features could be built in parallel without conflicts. The test suite caught regressions automatically. The platform shipped on schedule and has been in production serving QR code management for Portuguese businesses since November 2024.

The broader lesson: architectural investment at the start of a feature cycle pays back immediately. The team spent less time debugging and more time shipping.