Overview:

The Audiophile e-commerce website solution is a project created as a solution to the Audiophile e-commerce website challenge on Frontend Mentor. This challenge aims to improve coding skills by building a realistic e-commerce website. The solution allows users to view the app's optimal layout based on their device's screen size, interact with hover states for elements, add/remove products from the cart, edit product quantities, fill in fields in the checkout, receive form validations, see correct checkout totals, and more.

Features:

Optimal Layout: The app adjusts its layout to fit the screen size of the user's device.
Interactive Elements: Hover states are implemented for all interactive elements on the page.
Cart Functionality: Users can add/remove products from the cart and edit product quantities.
Checkout Validation: Form validations are provided to ensure all required fields in the checkout are filled in correctly.
Checkout Totals: The app calculates correct checkout totals based on the products in the cart, including additional costs such as shipping and VAT.
Order Confirmation: After checking out, users see an order confirmation modal with an order summary.
Persistent Cart: The app keeps track of the cart contents, even after refreshing the browser, using localStorage (bonus feature).

Summary:

The Audiophile e-commerce website solution is a project developed as a solution to the Audiophile e-commerce website challenge on Frontend Mentor. It showcases various features including responsive layout, interactive elements, cart functionality, checkout validation and totals, order confirmation, and a bonus feature of persistent cart using localStorage. The solution is built with semantic HTML5 markup, Flexbox, React (JavaScript library), Next.js (React framework), and Tailwind CSS (for styling). It can be accessed and tested live at the provided URL.

Lucaswinkler

Audiophile Ecommerce

Gulp Boilerplate