Overview
Woba connects companies to offices and workspaces across Brazil. In 2022, BeerOrCoffee became Woba, and the rebrand was the chance to rebuild a frontend that had grown as a Create React App application.
Challenge
The whole visual identity and the technical foundation had to change at the same time, without stopping product work. The app needed a structure that separated public pages from authenticated flows and made components reusable under the new brand.
My role
- Acted as the main frontend technical reference on the agency side, in a two-developer team, driving architecture and implementation decisions.
- Migrated the application from Create React App to Next.js and reorganized its architecture and components.
- Adapted flows and components built for a plain SPA to Next.js's routing and rendering model.
Architecture
Next.js structure
File-based routing and hybrid rendering made it possible to separate public pages from authenticated flows consistently, instead of keeping everything as a single client-rendered SPA.
Component-based architecture
The UI was rebuilt from reusable components carrying the new brand, instead of restyling screen by screen. The visual identity now lives in one place, and new pages start from those components.
Key decisions & trade-offs
Next.js instead of CRA
Next.js was chosen for its mix of routing, hybrid rendering and project structure. The cost was adapting the codebase to the framework's model, and much of the migration went into reworking components and flows that assumed a plain SPA.
Migrating during the rebrand
Doing both at once increased scope. But the screens were being redone for the new brand anyway, so the migration used the same cycle instead of touching them twice.
Results
- Frontend moved from Create React App to Next.js as part of the rebrand (Aug–Oct 2022).
- Reusable components with the new brand as the base for further product work.
- A clear split between public pages and authenticated flows.
Role
Frontend Developer · frontend technical lead on the agency side
Tech stack
- Next.js
- React