E-Commerce

Contents

• End users and their expectations
• Ways to Setup this Project Locally

End users and their expectations

This is our home page.

Above is the nav bar with login and signup option of buyer and seller. Cart option which can be accessed only after login as buyer. Search option (general or in some specific category). (All these will be discussed later in pdf)

The nav bar is followed by product cards from category showcasing few (4) products from every category from the database. The add to cart option will not be clickable till a user log in as a buyer.

ScreenShot

One after clicks on any card on the home page he will be shown a product information page. Here one can see all the information about the product and option to add the item in cart or in wishlist (again this requires the user to be logged-in). Below there is a similar product of the product you are viewing that the buyer might like to look upon from the database.

Search Option:-

One can search for products by product name, product brand or product description from a particular category or from all the categories.

Filter Option :-

Here users can filter their search results.

Users can sort the items in descending or ascending order of price. Users can filter the items according to the available brand name. Users can select a price range.

Log-in and sign-up screen for buyer and user

From the home page one can get option to log-in or sign-up as buyer or seller as shown

ScreenShot

All the login and signup functionality are fully made and connected to the database.

A new user can sign-up as a buyer or as seller as he wants providing information as per the page. Once a user has an account as buyer or as seller he can use the specific login page to login on our website.

Signup Page

For buyer ->

For seller ->

Login page ->

Let’s take a look at seller side ->

Seller Dashboard

The nav bar here have the options ->

Add items which allows the seller to add items to sell on the website. (we will look more below)

Orders -> here the seller can see the orders details. All the orders that were made on his product he was selling. (we will look more below)

Home page / seller dashboard ->

It shows all basic information of his product like price discount and quantity left. He can edit all the information and also see the product information.

ScreenShot

Add Items ->

He can add items to sell here. He can fill the required information about the product.

Also he can add multiple photographs of the products. And click on add item to add the product to sell.

ScreenShot

Edit item

Once he click edit on any product card he can edit the information like -

Updating quantity (adding quantity), name, price,discount, and all the other attributes he wishes he can do this easily in the edit menu

ScreenShot

Orders in Seller Dashboard

Here, the seller can see the orders which were made by the customers. He can see Order No., Customer's Name, Order Date, Dispatched status (which can be updated by him), Total Price. There is an option to see details of the order.

In this order page the seller can search any order by the use of order number, customer name and order date. Sellers can also see the dispatched and not dispatched order by the filter.

Order details in Seller Dashboard

Order details page displays as the name says. The details include Order Number, Customer Name and a table showing the details of the items order.

The item order details include :

Item Name, Item Quantity, Price per unit item and Total Price.

At the bottom, the total amount the user pays is displayed.

If the order isn’t dispatched, then there will be one time option to mark the order as dispatched. The seller can’t unmark once the order is dispatched.

Once the order is marked dispatched, the buyer can see the same in your orders page.

Buyers Wish List

Buyers can save the products which they love and would like to buy in future inside the wishlist. There is also a feature to move a product directly from the wishlist to the cart and also to remove it from the wishlist if they do not wish to buy it anymore.

Buyer Cart

A user can add all the items they want to buy to the cart. The items in the cart can be moved to and from the wishlist.

Payment Page

Here the seller can select the payment option like Debit / Credit Card. Upi Payment and Cash on Delivery.and proceed ahead for address and confirmation of order.

Place Order:

On the place order page, buyer can fill the shipping address, he wants the order to be shipped to. He can also view the summary of his order like items in his cart. Then, he can view the order amount, shipping charges and the total amount.

Your Orders :-

Here the buyer can order all his orders The dispatched status and all the details. There is an order details option where he can see more details.

Orders Deatils :-

Here the buyer can see details of an order.

About us

Ways to Setup this Project Locally

• You need to have the latest version of Node.js installed on your device.
• Clone this Repository.
• Open cmd and go to the root Directory.
• Create a file with name .env
• structure of .env should look like this

  DATABASE = YOUR_DATABASE_NAME
  DATABASE_HOST  = YOUR_DATABASE_HOST
  DATABASE_USER =  MYSQL_USER
  DATABASE_PASSWORD  = DATABASE_PASSWORD
  JWT_SECRET = write_any_secret_here (we can't tell our own secret due to security reason)

• Run npm i to install all the dependencies.
• Now, run npm start to start the website on https://localhost:3000