↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

Audio-Ecommerce

eCommerce JavaScript

Fullstack (MERN) – Audiophile e-commerce website solution

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.

Table of contents

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

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



↑