Menu

Project Landing Page

Audiophile E-commerce

Tech:

HTML, CSS, JS

Category:

Web development

TLDR

This project is a multi-page e-commerce website built with a vanilla JavaScript-heavy approach. The project's next step will be rebuilding with ReactJS to reduce code repetition via the use of components

MVP features

  • - Responsive design
  • - Add/remove/edit products in cart
  • - Form validation
  • - Order summary confirmation
  • - Cart management via localStorage
  • - Shipping always adds $50 to the order
  • - VAT included

Cart

Building with vanilla JS was a fun challenge that took a lot of mental gymnastics for the cart functionality, specifically ensuring that the UI was always in sync with the data by updating and retrieving information every time a product was added, edited, or removed from the cart.

Checkout functionality display
Checkout functionality display

Previews

Screens displaying the user flow for purchasing products
Screens displaying the user flow for purchasing products
Tablet view for a product page. (Desktop is similar)
Tablet view for a product page. (Desktop is similar)
Three screens displaying the cart, checkout form, and order confirmation
Screens for the cart, checkout form, and order confirmation