E-commerce Web App for audio products. A full-stack project, using Nodejs and Express in the backend, MongoDB as database, React, and Redux on the front-end.

Overview

Frontend Mentor - Audiophile e-commerce website solution

By - Jose Furtado

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:

Back-end:

Author

You might also like...
A social-network project with MERN (MongoDb, Express, ReactJs, NodeJs) + tailwindCss
A social-network project with MERN (MongoDb, Express, ReactJs, NodeJs) + tailwindCss

Introduction This is a social-network project with MERN (MongoDb, Express, ReactJs, NodeJs) + tailwindCss Page (Not logged) Home. Login. Register. For

Resturant Management System backend was provided by Client so we did front end using ANT Design, Bootstrap and other Libraries of ReactJs
Resturant Management System backend was provided by Client so we did front end using ANT Design, Bootstrap and other Libraries of ReactJs

Resturant Management System backend was provided by Client so we did front end using ANT Design, Bootstrap and other Libraries of ReactJs

MERN stack  (MongoDB, Express, React, Node.js) blog app with Chakra UI and Redux.
MERN stack (MongoDB, Express, React, Node.js) blog app with Chakra UI and Redux.

MERN stack (MongoDB, Express, React, Node.js) blog app with Chakra UI and Redux.

A front-end clone project of the Spotify Web Player. The project was created using React.

Spotify Web Player Clone A front-end clone project of the Spotify Web Player. The project was created using React. This is my first big React.js proje

A full stack e-commerce web app with ReactJS

A Full Stack Shopping App that i built using ReactJS Redux with full E-Commerce Functionality!!

MERN BLOG - Fullstack open source blogging application made with MongoDB, Express, React & Nodejs (MERN)
MERN BLOG - Fullstack open source blogging application made with MongoDB, Express, React & Nodejs (MERN)

MERN BLOG Fullstack open source blogging application made with MongoDB, Express, React & Nodejs (MERN) Configuration and Setup Key Features Technologi

Full Stack E-Commerce App built with React, using Firebase and Stripe API. 🗽🚀
Full Stack E-Commerce App built with React, using Firebase and Stripe API. 🗽🚀

Full Stack E-Commerce App built with React, using Firebase and Stripe API. 🗽🚀

A front end base for a backend challenge
A front end base for a backend challenge

A Open source extreme simple task manager written in React Typescript

Full stack e-commerce web application

🛍️ Shopitel 🛒 To Get Started ⚡ Clone the shopitel-ecommerce-app repository using git: git clone [email protected]:AbihaFatima/shopitel-ecommerce-app.gi

Owner
Jose Furtado
Front-end Developer with Back-end knowledge, a crush for Web design, and Digital marketing background.
Jose Furtado
Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)

?? Shopping App ?? Online Marketplace Built with MERN stack (MongoDB, Express, React and Node). ⚡️ ⚡️ ⚡️ Kiwi Shop ⚡️ ⚡️ ⚡️ ?? Table of contents Main

Tomiwa Adeyemi 9 Jul 27, 2022
Backend for probook social media app using Nodejs, mongodb, express, jwt etc. Frontend is React, redux, material ui.

Probook - A social media app Probook App | A Social Media App An social media platform built using ReactJS, Redux Toolkit,Material UI, Node, Express,

Wasif Baliyan 21 Sep 26, 2022
flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example

Flipkar Clone MERN stack Sijeesh Miziha's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart it has RazorPay I

Sijeesh Miziha 40 Sep 25, 2022
Full-stack application example Using NodeJS + NestJS, React + SASS, MongoDB, NX monorepo

Full-stack application example Using NodeJS + NestJS, React + SASS, MongoDB, NX monorepo

null 35 Sep 24, 2022
A web app built using Javascript, communicating with a MongoDB database through express

Educational app for kids focussing on our solar system. Interactive elements along with 3D models, quizzes and audio to help keep them engaged.

Craig Marshall 3 Feb 1, 2022
A simple NodeJS backend and web front react page app that upload text file content

NodeJS + TypeScript backend This is a simple NodeJS backend and web front react page app that upload text file content(show ten most-used words) Insta

Kyle Wilson 3 Mar 29, 2022
A full E-Commerce Full Stack Amazon Clone which built using ReactJS. You can register, sign in and shop!

Amazon Clone with ReactJS In this Amazon Clone application you can register on the site, log in with your account, shop, pay for the products and see

Mert Çankaya 15 Jul 7, 2022
A Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality!!

A Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality!!

Özge Coşkun Gürsucu 49 Sep 14, 2022
A Responsive Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality

A Responsive Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality including user register, user login, user authentication, shop cart management, order management, and payment using Stripe, etc.

Mostafa Habib 3 Aug 18, 2022
Discord-clone - Discord Clone using React, ReactQuery, Tailwindcss, Redux, Socket IO, NodeJS, Express, MongoDB and Redis

Discord Clone using React, ReactQuery, Tailwindcss, Redux, Socket IO, NodeJS, Ex

Milad Ranjbar 195 Sep 20, 2022