Mobile-first platform for personal shoppers, composed of Hero Mobile (PWA) and Hero Desktop, built from scratch with Next.js, TypeScript, and automated tests from the first commit.
DesignMySide
01
Overview
Hero is a platform developed at MySide to support the personal shopper workflow. The project was split into two products: Hero Mobile, a PWA built for field use, and Hero Desktop, designed for management and operations on larger screens. Both needed to work independently while maintaining visual and functional coherence between them.
The stack was built around Next.js, React, and TypeScript, with Tailwind CSS as the shared styling system. Authentication with Auth.js, server state management with React Query, validation with Zod and React Hook Form, and UI components with shadcn/ui and Radix UI. Automated tests with Jest and React Testing Library were integrated from the start of development.
02
Challenge
Building two distinct products from scratch required early architectural decisions: what would be shared across platforms and what would need independent implementations. A poorly calibrated separation would lead to unnecessary coupling or code duplication with no real benefit.
The PWA needed near-native behavior in field conditions — unstable connections, smooth transitions, reliable loading. That made performance and caching strategy real constraints from the first sprint, not post-launch optimizations.
Establishing testing standards from the first commit was a deliberate decision: making coverage part of the workflow rather than a final step required team discipline throughout the product's growth.
03
Solution
I separated Hero Mobile and Hero Desktop into independent experiences, with shared components only where genuine reuse made sense — the distinction was made case by case, not as a blanket rule.
The PWA was implemented with service workers and caching strategies that ensured a reliable experience even on degraded connections. A mobile-first design informed every layout decision in the field product.
The testing structure with Jest and React Testing Library was established at the project's outset, making coverage a part of the development workflow and making future expansion of the product safer over time.