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.
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 (
localStoragecould be used for this if you're not building out a full-stack app)
- Solution URL: Solution URL
- Live Site URL: Audiophile
- Semantic HTML5 markup
- SASS - Syntactically Awesome Style Sheets
- Flexbox
- Mobile-first workflow
- Vue - Framework
- NuxtJS - The Intuitive Vue Framework
- Vuex - Serves as a centralized store for all the components in an application.
- Vuetify - Material Design Framework
- Storyblok - Headless CMS
- nuxt/axios - easy Axios integration with Nuxt.
- Netlify-Functions - Deploy server-side code that works as API endpoints.
- Frontend Mentor - @TamirAssayag