Frontend Cart Logic and UX/UI Exploration: A Tyhios Project

2023

Introduction

This project is a recreation of a Nike x Off-White landing page, prioritizing visual appeal and dynamic cart functionality without the use of a backend database.

Although visually simple, the project posed interesting challenges regarding frontend-only cart state management, handling dynamic user input, and maintaining an engaging product interface. It is a concise demonstration of managing real-world user flows entirely through HTML, CSS, and JavaScript.

Overview

This was a solo frontend project designed to test the scalability and maintainability of complex shopping cart logic using only client-side technologies like localStorage. My goal was to create a functioning product page experience that mimics real-world eCommerce UX using vanilla tools.

Frameworks

  • Vanilla JavaScript
  • HTML5/CSS3

Browser APIs

  • LocalStorage API
  • DOM Manipulation

Features

  • Dynamic cart creation using JavaScript and DOM templates
  • Saving individual product HTML and attributes (dataId, size, quantity) into localStorage
  • Interactive UI effects and hover states
  • Instant price total update
  • Basic search bar filtering

Challenges

- LocalStorage Structure and Data Integrity -

One of the main challenges was managing the cart’s state using only localStorage. This involved storing complex objects containing both raw data and literal HTML strings. While functional, storing raw HTML as part of the cart object proved brittle—any change to markup would break the logic or cause display issues when re-rendered.

- Namespace and Scope Conflicts -

There were issues where globally scoped variables or function names caused unexpected behavior across modules. This especially became problematic as event listeners and component logic started to overlap during interactions with the cart.

- Maintaining Cart State Across Refreshes -

Ensuring that size selections, quantities, and item displays persisted across sessions required constant serialization and deserialization of cart contents. This led to bloated localStorage data and complicated logic for re-rendering HTML dynamically upon reload.

What Went Well

  • Clean, modern UI inspired by real-world brand design
  • Cart visually updates in real-time with immediate price feedback
  • Fully functional without a backend or database
  • Quick development cycle with consistent modular CSS

What Went Wrong

  • Storing raw HTML in localStorage is not scalable or safe
  • No error handling for missing localStorage items
  • Namespace collisions created bugs during user interaction
  • Cart logic could have been abstracted better into reusable functions

How It Can Be Improved

  • Use structured JSON-only objects for localStorage to avoid stale HTML
  • Implement UUID or hash-based cart item keys with scoped state management
  • Introduce a frontend framework like React to simplify UI state syncing
  • Add unit tests and error fallbacks for localStorage operations

Problems It Solves

This project doesn’t break technical ground, but it does offer a minimal, aesthetically pleasing user shopping experience. It makes it easy for users to find and visually compare sneaker models, pick sizes, and see total cost without overcomplication. It also demonstrates a deeper understanding of client-side logic needed to support real-time interaction, especially for freelance or early-stage product mockups.

Conclusion

This project provided a valuable hands-on opportunity to explore the limits of frontend-only development for a product-focused interface. Despite not using a backend or third-party state library, I was able to simulate core eCommerce interactions through DOM manipulation, localStorage, and thoughtful UI.

While the approach showed its limitations—especially in terms of code robustness and scalability—it revealed key areas where future projects can grow. If rebuilt, a React or Vue implementation with proper backend support would dramatically improve the architecture and user experience. Still, this snapshot of early problem-solving reflects my focus on creativity, iteration, and building visually compelling solutions from the ground up.

To Top