/react-node-ecommerce-client

Primary LanguageJavaScriptMIT LicenseMIT

MERN-Online Shopping Platform

Task: To design responsive Ecommerce client containing product pages, shopping carts, different homepages with product presentations and many more.

Overview

Technologies

For frontend, we will mainly work upon React for components along with Sass and some other frontend and UI libraries.

Learning Outcomes

  • This project will take a bit of layout planning, so you will need some time, in the beginning, to think it through.
  • This project presents some nice layout challenges. It's a great opportunity to practice Flexbox or CSS Grid.
  • View the optimal layout for the component depending on their device's screen size. So, scaling the content down to mobile without it looking too squashed will be a challenge as well.
  • You'll learn how to do basic form validation on client side. So the main learning outcome here will be how to write reusable JavaScript code to check the validity of the different form fields.
  • Learning a pre-processor, like Sass, to help keep your code maintainable.

Browsers support

IE / Edge
IE / Edge		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari		 iOS Safari
iOS Safari		 Samsung
Samsung		 Opera
Opera
IE11, Edge Yes Yes Yes Yes Yes Yes

Quick Start

What's included

The project structure is predefined and is in sync with backend. We will mainly work to improve the UI of the platform and we will also include some other cool features if time permits.

.
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── README.md
├── src
│   ├── admin
│   │   ├── AddCategory.js
│   │   ├── AddProduct.js
│   │   ├── apiAdmin.js
│   │   ├── ManageProducts.js
│   │   ├── Orders.js
│   │   ├── updateCategory.js
│   │   └── UpdateProduct.js
│   ├── auth
│   │   ├── AdminRoute.js
│   │   ├── index.js
│   │   └── PrivateRoute.js
│   ├── config.js
│   ├── core
│   │   ├── apiCore.js
│   │   ├── Card.js
│   │   ├── cartHelpers.js
│   │   ├── Cart.js
│   │   ├── Checkbox.js
│   │   ├── Checkout.js
│   │   ├── fixedPrices.js
│   │   ├── Home.js
│   │   ├── Layout.js
│   │   ├── Menu.js
│   │   ├── Product.js
│   │   ├── RadioBox.js
│   │   ├── Search.js
│   │   ├── Shop.js
│   │   └── ShowImage.js
│   ├── index.js
│   ├── Routes.js
│   ├── styles.css
│   └── user
│       ├── AdminDashboard.js
│       ├── apiUser.js
│       ├── Profile.js
│       ├── Signin.js
│       ├── Signup.js
│       └── UserDashboard.js
└── yarn.lock

Build

PS: Go through installation of Server code before setting up this repository Server.

To clone and run this project, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# clone this repository
$ git clone https://github.com/milekag01/react-node-ecommerce-client.git

# Go into the repository
cd react-node-ecommerce-client

# Install dependencies
npm install

# Start
npm run start

For Admin Login credentials:

Id: milek@gmail.com

Password: qwerty123

For Placing the order, use Test Card Details:

Card no.: 4012000077777777

Date: Any