Back to work

Case study · Redux · Vite

Haven

The challenge

Haven was a personal project created to explore a complete e-commerce flow beyond the smaller storefront experiences often required in client work. The goal was to connect product browsing, filtering, cart behaviour, and authentication within one coherent application rather than treating each feature as an isolated interface.

The approach

I used Redux Toolkit to manage cart and authentication state. Those features affect multiple areas of the application, including the product catalogue, cart, account-related interactions, and checkout flow, so a central store provided a clearer structure than passing state through several component layers or relying on a lighter Context setup.

Implementation challenge

The visual challenge was keeping the glassmorphism interface readable over a range of product photography. Translucent surfaces can work well over controlled backgrounds but lose contrast quickly over busy imagery. I adjusted blur, opacity, contrast, and surface treatment by section instead of applying one global glass style across the entire application.

What I’d improve

I would define the filtering data model earlier in the build. As filtering features expanded, the logic grew organically and required later refactoring. A clearer initial structure for categories, attributes, and filter relationships would have made that feature easier to extend.

Built with

  • React
  • Redux Toolkit
  • Framer Motion
  • Vite
haven-bay.netlify.app/
Screenshot of the Haven website

Static preview shown above. Open the live site to explore the full experience.