The problem.
Edifition is a software development studio where I worked alongside two other developers building production web apps for client startups (including platforms like the Peacefulness Institute). The challenge on client studio work is discipline: client startups bring different backend microservices, authentication requirements (like Keycloak), and tight deadlines. Without a strict component architecture, every new client app descends into copy-pasted UI, broken styles, and tanking Lighthouse scores.
The approach.
Instead of rebuilding client interfaces from scratch, we designed a shared system of 30+ reusable UI components. I built the frontend architecture so the three of us could ship pages in parallel without stepping on each other's code, integrated client microservices and Keycloak authentication, and treated web performance as an engineering deliverable rather than a last-minute cleanup.
The process.
Built 20+ production pages and 7+ core features across client applications using a shared library of 30+ modular React components.
Engineered client platforms like Peacefulness Institute, handling internationalization (i18n), multi-locale media delivery (video, audio, PDF) across 10+ languages, and protected partner portals.
Wired client frontends to five to ten backend APIs and configured Keycloak enterprise authentication with role-based access control (RBAC).
Profiled frontend bottlenecks with Chrome DevTools and Lighthouse, eliminating layout thrashing and bundle bloat to lift the performance score from 67 to 90 (+23 points).
The screens.
The outcome.
“On a small studio team, your component library is your sanity. It cut our feature delivery turnaround by over a third and prevented design drift across client apps. More importantly, it proved that performance isn't something you sprinkle on at the end—you have to benchmark it on real mobile devices and eliminate the heaviest render costs first.”