Homebody is a retro-styled e-commerce platform offering a dynamic and immersive shopping experience. It merges 90s-inspired UI with a modern tech stack — enabling intuitive navigation, interactive blog content, and secure checkout powered by Shopify. Built using React and Redux, the platform includes cart persistence, customer login/signup flows, responsive layouts, and an integrated blog system, all tailored to homebody culture.
I developed and designed the entire platform, implementing the front-end logic, integrating Shopify's backend services, and building reusable components for products, blog, and checkout. I also set up Redux for global state management and persisted cart sessions using middleware and localStorage.
Homebody delivers an arcade-themed, mobile-responsive storefront that offers a complete shopping experience — from browsing products and managing the basket to logging into accounts and completing purchases. The UI emulates vintage operating system aesthetics while supporting modern functionality like real-time cart updates, customer authentication, and personalized order history. Built using React and Redux for modular UI and global state management, it leverages React Router for fluid navigation, and Shopify's Storefront GraphQL API to handle live product data, customer sessions, and checkout operations. Cart state is persisted using Redux middleware in combination with localStorage and sessionStorage, ensuring a consistent experience across sessions and page reloads. The entire experience is styled with custom CSS to maintain the retro aesthetic and is deployed on Netlify for fast global delivery.
Stack:
The Homebody experience begins on the Home Page, where users are welcomed by a playful retro aesthetic and interactive visuals that evoke vintage OS nostalgia. From there, they can explore the Product List, which displays categorized items using Shopify tags, supports type-based filtering, and maintains a responsive layout with clear pricing. Navigation is streamlined with a floating Order Navbar, allowing instant access to the cart and basket toggle from anywhere on the site. When ready to purchase, users proceed to the Checkout Page, where they can review their selections and confirm their order before being securely redirected to Shopify’s hosted checkout. Alongside the shopping flow, the platform includes a fully integrated Blog Section, complete with styled previews, full post readers, social sharing options, and a built-in subscription prompt
From browsing to checkout, the platform is designed to minimize friction. Users can easily navigate product categories, manage their basket in real time, and complete purchases through a smooth, step-by-step experience.
All product listings, pricing, and checkout processes are powered by Shopify. This ensures reliability, secure transactions, and scalable inventory management — all integrated cleanly into the front end.
Users can view, update, or clear their shopping basket instantly without leaving the product pages, making the process faster and more intuitive. Real-time cart syncing between Redux state and Shopify checkout via GraphQL mutations (add, remove, update).
The design blends a nostalgic arcade aesthetic with modern usability standards. Despite the playful styling, the interface is fully responsive, accessible, and optimized for conversion.
A fully integrated blog lets users read brand stories, explore lifestyle content, and subscribe to updates — turning the store into a brand destination rather than a one-time shop.
Sign up, log in, log out, and password recovery using Shopify's customer APIs, all integrated with Redux and form validation.
Authenticated users can view order history, personal info, and saved addresses.
Improves flow and helps prevent accidental purchases with a review step before redirecting to Shopify's hosted checkout.
Challenge
Users needed to move smoothly between key parts of the app — product listings, blog posts, and checkout — but without full-page reloads. Keeping navigation fast and seamless was essential for trust and usability.
Solution
Used React Router to manage transitions and maintain state across sections. This enabled smooth page rendering without reloads, preserving context and delivering a more fluid, app-like shopping experience.
Challenge
The frontend needed to display live product listings, reflect real inventory, and handle order flows — all without building a backend from scratch. Choosing the right backend system was crucial to avoid reinventing the wheel.
Solution
Used Shopify’s APIs to power dynamic product data, inventory updates, and secure checkout flows. This simplified backend logic while ensuring the platform could scale reliably.
Challenge
Users needed to persist cart state, even if they navigated away or closed the tab.
Solution
Combined Redux state with localStorage and sessionStorage to sync checkout ID and cart items persistently.
Feel free to reach out with any questions, feedback, or collaboration ideas related to my portfolio. You can get in touch through the contact page or connect via the social links in the footer.