Fullstack (MERN) - Audiophile e-commerce website solution

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

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • Useful resources
• Author

Overview

The challenge

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
• Keep track of what's in the cart, even after refreshing the browser.

Links

• Solution URL: Add solution URL here
• Live Site URL: https://audio-commerce.netlify.app/

Built with

Front-end:

• React-js - JavaScript framework
• Redux - State Container for JS Apps
• Tailwindcss - CSS framework
• React Final Form - subscription-based form state management for React
• Dropzone - Files Uploader
• Imagekit - Assets manager and deliver in the web
• Stripe - APIs to accept payments, send payouts, and manage businesses online.
• Axios - Promise based HTTP client for the browser and node.js

Back-end:

• Node-js - JavaScript Runtime
• Express - Node-js framework
• Mongodb - Database
• Mongoose - Mongodb object modeling for Node.js
• Stripe - APIs to accept payments, send payouts, and manage businesses online.
• Sandgrid - Email API.

Author

• LinkedIn - https://www.linkedin.com/in/jose-digiweb/
• Frontend Mentor - @JoseDigiweb
• GitHub - https://github.com/jose-digiweb