This is a solution to the Audiophile e-commerce website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • My process
    • Built with
    • Setup the project

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Add/Remove products from the cart
• Edit product quantities in the cart
• Fill in all fields in the checkout
• Receive form validations if fields are missed or incorrect during checkout
• See correct checkout totals depending on the products in the cart
  • Shipping always adds $50 to the order
  • VAT is calculated as 20% of the product total, excluding shipping
• See an order confirmation modal after checking out with an order summary
• Bonus: Keep track of what's in the cart, even after refreshing the browser (localStorage could be used for this if you're not building out a full-stack app)

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

This project is set up as a monorepo using Lerna with the following modules:

• @fem-fae/tokens: Handles all the tokens and common mixins used in the application
• @fem-fae/static-website: Handles the site markup. This project is used for the mertoring sessions to explain the pages structure

To run it locally it should be run the following scripts from the root of the repo:

$ npm i

Ensure the tokens to be build before running the site:

$ npx lerna run build

Run the site:

$ npx lerna run dev

Note: The process will change once the repo has different projects (Next.js) and (Nuxt) for the different teams.