E-Commerce Web Application

E-COMMERCE WEBSITE
Project submitted to Jyoti Nivas College Autonomous affiliated to Bangalore City
University in partial fulfilment of the requirements for the award of the degree of Master
of Computer Applications.

By

Name: Sudipta Bala (19MCA18)

Under Guidance Of

Internal Guide External Guide

Mss. Swarnamugi M Mr. Siyaram Yadav

JYOTI NIVAS COLLEGE AUTONOMOUS

POST GRADUATE CENTRE

BANGALORE – 95
E-Commerce Web Application

JYOTI NIVAS COLLEGE AUTONOMOUS

POST GRADUATE CENTRE

BANGALORE-560095

CERTIFICATE
This is to certify that the Internship work entitled “E-COMMERCE SHOPPING SITE”
is the bonafide work carried out by SUDIPTA BALA, Reg.No:19MCA18 III-year (VI
semester) MCA, as pert of her academic year 2021 - 2022, in the particular fulfilment of
the award of the degree of Master of Computer Applications.

................................ …………………..…
Staff-in-Charge Head of Department

Examiners:

1. …………………………….

2.……………………………..
E-Commerce Web Application

INTERNSHIP CERTIFICATE
E-Commerce Web Application

ABSTRACT

E-commerce and online shopping in India is getting a noticeable growth as more usage of
internet facilities, high educational standards, changing life style and economical growth of the
country reasons in the demand of ecommerce techniques and tools. Versatile shopping
experience and rapid development of transaction facilities is further boosting opportunities for
the remaining market segments. The biggest advantage of e-commerce is the ability to provide
secure shopping transactions via the internet and coupled with almost instant verification and
validation of credit card transactions. One of the most important issues to be addressed in
electronic commerce is the area of services. The primary purpose of this study is to examine and
uncover the impact of e-commerce and also identify the issues and areas important to the
implementation of e-commerce that may help in enhancing the productivity in the economic
growth of the country.
E-Commerce Web Application

ACKNOWLEDGEMENT

The magnitude of this project demanded the co-operation, guidance and assistance from a
number of people and by the grace of God I have been fortunate enough to have this in entire
process of completion of this project work.

I would like to thank our Principal Dr. Sr.Lalitha for providing us the facilities to carry out the
project work.

I thank Dr.Irene Getzi, Head of the Department of MCA, Jyoti Nivas College Autonomous
Bangalore for having permitted me to take this project.

I would like to place on record the valuable guidance and constant encouragement by my
mentor Mrs. Swarna Mugi, Assisstant Professor, Department of MCA, Jyoti Nivas College
Autonomous, Bangalore for the suggestion to give a nice shape to this project.

I would like to thank all teaching and non-teaching staff members of MCA Department, Jyoti
Nivas College Autonomous for their co-operation and constant encouragement which helped
me in successfully completing this project.

Finally my heartfelt gratitude to all those who have helped me directly and indirectly, thus
making the project successful.
E-Commerce Web Application

TABLE CONTENT

SL.NO TITLE PAGE.NO

1 INTRODUCTION
1.1 Company Overview 1-3
1.2 Objectives
1.3 Methodology

2 ENVIRONMENT SPECIFICATION
2.1 Hardware Specification 4
2.2 Software Specification

SOFTWARE DEVELOPMENT METHODOLOGY

3.1 Architectural diagram 5-9
3.2 Functional Requirements – User Stories and Acceptance
criteria
3.3 Non-functional requirements

3 SYSTEM DESIGN
4.1 Database Design 10-24
4.2 Dataflow Diagram
4.3 UML Design
4.4 Interface Design

4 SYSTEM IMPLEMENTATIONS
5.1 Tools and Technologies used 25-28
5.2 Implementation workflow
5.3 Non-functional requirements results

6 CONCLUSION AND FUTURE SCOPE 29-30

7 APPENDIX 30-45
Source code References
E-Commerce Web Application

1.INTRODUCTION

1.1 COMPANY OVERVIEW

1.1.1ABOUT COMPANY:

Cybotrix is a global software development company. We provide IT services and consultancy to

our esteemed clients from numerous horizons of business and industries. Our expert IT
consultants, software engineers and application developers leverage modern technologies for
innovating unique and user-friendly IT solutions. Our IT products and services have unparalleled
attributes and pragmatic features. We have created our niche in enterprise service app
development and web/mobile application development. We are also actively involved in IT
Staffing and Recruitment. Our experienced consultants have spent years in IT industry and with
their expertise they hire quality resources for our clients. Our Dedicated Resource Model (DRM)
and Business Analysis Consulting service help our clients in managing the most dynamic aspect
of any business - Human Resource.

1.1.2 COMPANY PROFILE:

Cybotrix Technologies is a global software development company. We provide IT services and
consultancy to our esteemed clients from numerous horizons of business and industries. Our
expert IT consultants, software engineers, and application developers leverage modern
technologies for innovating unique and user-friendly IT solutions. Our IT products and services
have unparalleled attributes and pragmatic features. We have created our niche in enterprise
service app development and web/mobile application development.

1.1.3 SERVICES OF TECHNOFLY:

Cybotrix Technologies is top software development company in Bangalore, We are working
with 200+ Partner MNC's and domestic IT companies. We offer Best Software solutions for
small, medium, large scale of business in & out of india . We Provide best services for

Software Development Services

 Website Development

Department of mca, Jyoti Nivas College Autonomous Page 1

E-Commerce Web Application

 Android Development
 Angular Development
 Software Development
 WordPress CMD Development
 Drupal CMS Development
 iOS Development
 Magento Development
 Mobile App Development
 Hybrid Development
 NodeJs Development
 PHP Website Development
 E-Commerce Web Development
 ReactJs Development
 Web App Development

1.2 OBJECTIVE:
The main objective of the study is to develop an online fashion brochure system. The system
aims to achieve the following objectives:

 To design an online fashion system.

 To provides a solution to reduce and optimize the expenses of customer order
management

 To create an avenue where people can shop for fashion products online.
 To develop a database to store information on fashion products and services.
Internet is the rapidest growing media during the past decade. Especially, online shopping is a
rapidly growing e-commerce area. Online stores are usually available 24 hours a day, and many
consumers have Internet access both at work and at home. A successful web store is not just a
good looking website with dynamic technical features, listed in many search engines. This study
aims to establish a preliminary assessment, evaluation and understanding of the characteristics of
online shopping. Although the benefits of online shopping are considerable, when the process
goes poorly it can create a thorny situation. A few problems that shoppers potentially face

Department of mca, Jyoti Nivas College Autonomous Page 2

E-Commerce Web Application

include identity theft, faulty products, and the accumulations of spyware, as well as the
precautions to be taken are studied in this paper.

1.3 METHODOLOGY :
Almost 70 percentage of Indian population has switched to shopping online. According to google
trends and surveys its estimated to grow more by 8% by 2025. Hence building an e commerce
website is a successful business. Almost 40% of Indian population has switched to online
business during the pandemic. Taking this as an opportunity we are trying to solve the problem
of switching the small scale and retail offline businesses to online. Throughout the process of
building a web site our main scope is to integrate it with some unique features to make it stand
out of the others. And also, to make the website’s UI simple and UX to be more interactive and
connecting to costumer. Each product has multiple images from different angles for costumer’s
satisfaction. In this web site a new user can view, search, sort, filter the products without any
login credentials but, he or she has to register to add products to wish list and cart to save for
later or to place an order. When user proceeds to check out, his credentials will be auto
authenticated and verified by our data base and is provided with all the details to which the
further services are provided like phone number, delivery address, shipping charges, mail id etc.
Then the user is redirected to a secure payment service gate way through which transaction is
carried out. Once the transaction is placed user will be notified with an email as well as a
message regarding the purchase invoice, order summary and all other updates related to the order
i.e., order id, delivery service provider number, live order location etc. We have included a live
order tracking page for the costumers to know about the live location of the product to ensure
that the product is in right track and predict the delivery time. Every time when a registered user
logs into the website he has a quick access to the products of his wish, cart list which is viewed
in the separate column. Which saves the time of the costumer We are also trying to implement a
chat bot for 24/7 costumer queries assistance. Managing and updating the entire website may
sound difficult task for admin. Keeping this in mind we have used firebase as our data base
which serves a very user-friendly tool. Admin has access to the entire website for future
modifications. He has access to products, quantity, price, images, offers, promocode etc that is
provided to the costumers and all other features. He can add new category, product, make
changes in the stock quantities of the products, add offers make changes in promocode time etc.

Department of mca, Jyoti Nivas College Autonomous Page 3

E-Commerce Web Application

He can use the data provided by the costumers and make some changes according to the
Customer needs and comments and can serve them with better offers and discounts.

2. ENVIRONMENT SPECIFICATION

2.1 HARDWARE SPECIFICATION

 8 GB RAM

 512 GB hard disk

 2.5 GHZ processor

 Network connectivity

 Windows 10

2.2 SOFTWARE SPECIFICATION

 Backend: Node JS, Express

 Designing: CSS, JavaScript

 Fronted: React JS

 State management: Redux

 Database: MongoDB

Department of mca, Jyoti Nivas College Autonomous Page 4

E-Commerce Web Application

 Editor: Visual Studio Code Editor

3. SOFTWARE DEVELOPMENT METHODOLOGY

3.1 ARCHITECTURE DIAGRAM:

Department of mca, Jyoti Nivas College Autonomous Page 5

E-Commerce Web Application

Fig: 3.1 Architecture diagram of E-Commerce Website

3.2 FUNCTIONAL REQUIREMENTS:

Functional requirements are responsible for the behaviour of your website and can vary as per
the needs and business industry niche. For e.g. the fashion e-commerce stores lets the customers
choose different item attributes such as colour, size, sleeves, etc.; on the other side the travel
companies may require a chatbot for providing user assistance, luxury goods or jewellery brands
come with a zoom option on the product detail page. Here are the other important functional
requirements that you must consider for your e-commerce store:

3.2.1. 3rd Party Integrations:

It is important to know which 3rd party integrations you will require on your newly developed e-
commerce site. This functional requirement focuses on streamlining business operations such as
ERP, CRM, PIM, and flexible payment gateways for the customers on your website.
Determining the right 3rd party integrations for your website will make it structured and ready
for business scaling in the future.

3.2.2. Mobile Responsive:

In today’s era, the most number of users for the website are coming through mobile devices
especially smartphones. The numbers are only going to increase in the future. Thus investing in
the development of a mobile-responsive website can earn you more than a few bucks. You will
also get increased customer loyalty from the customers base.

You can use an analytic tool to study your audience and inquire about their devices. Know the
position of essential buttons and options on the web pages. Change them accordingly for a better

Department of mca, Jyoti Nivas College Autonomous Page 6

E-Commerce Web Application

shopping experience (tip: place the checkout button within the reach of your customer’s thumb,
as most people surf the website using a single hand on the mobile device).

3.2.3. Product Attributes:

The PDP will include different types of product characteristics and the e-commerce development
company should know how to implement those features. Will, the customer chooses only
product size and colour? Do you require videos on a product detail page? Will some product
attributes appear in a menu like in a mega menu? Write down all the essential product attributes
for your website.

3.2.4. Order & Checkout Flow:

It is important to mention how the orders will be processed in your e-commerce store on your
functional requirements. In particular, you need to determine whether you want your site visitor
to register on your website or he can make a purchase as a guest user. You can list the statuses of
the orders you want to have which will be visible to both customers and the store admin. Explain
how to manage the B2B orders. Basically, you have to be highly detailed about the order &
checkout flow functionalities.

You have to also mention the discount and coupon policy at this part (if any). Whether they are
to be handled at the checkout or directly on the PDP, you should include a separate functional
requirement on them.

3.2.5. Social Sharing:

Presence on social media platforms is highly important for your e-commerce business. Letting a
user share the content of your website on a social media platform will increase the awareness of
your brand and brings you closer to your present and potential customers. Know about your

Department of mca, Jyoti Nivas College Autonomous Page 7

E-Commerce Web Application

target audience, and what social networks they mostly use. Allow your customers to share
products, blog posts, and inspirational pictures by adding a corresponding button to their website.

3.3 NON-FUNCTIONAL REQUIREMENTS

As we mentioned above, these requirements are responsible for the positive user experience and
optimal website performance. The Bible of business analysts — BABOK — distinguishes
between NFRs for merchants (e.g. maintainability, scalability, reusability) and for users (e.g.
usability, security, accessibility). These are highly important at different stages of the business
journey.

Here are the major non-functional requirements for which you must give high attention:

3.3.1. Usability:

Regardless of the size of your business, the website of your business should be easy to use for
even a non-technical user. Do you know that a general user takes just 0.05 seconds to figure out
whether the website is worth its time or not? Thus you have to give special attention to the
design of your homepage, CTAs, and easy checkout to get past those milliseconds of doom. The
usability of a website is also defined by:

 How easily a user can achieve their target in a single page visit
 How quickly they can perform tasks in the store
 The memorable & intuitiveness of the design
 Number and types of errors users make

3.3.2. Security:

Security comes with utmost importance if your site is dealing with monetary transactions, users’
financial and sensitive data. Using an SSL certificate and data privacy policy will create trust
among the users for your website and convert the customers into brand advocates. It is also
considered for the different admin roles by which you can control who can create, see, copy,

Department of mca, Jyoti Nivas College Autonomous Page 8

E-Commerce Web Application

change or delete information. Depending upon the location of your business, security also refers
to compliance with customer data protection rules such as GDPR in Europe.

3.3.3. Performance:

For increasing the traffic on your website, you have to give special attention to the performance
in the non-functional requirements documentation. The focus should be on loading the e-
commerce store as fast as possible regardless of the number of integrations and traffic on your
website. You can set up the speed benchmark, maximum SKUs which you want to add, or any
other performance indicator best for your business. Don’t consider the 3rd party system delivery
time, because the developers will not have control over the 3rd party API calls.

3.3.4. Maintainability:

The operational costs for maintenance are the tricky part of planning a business budget. Thriving
the website maintenance from the initial development means cutting the time & cost to determine
and resolve the faults of the system in the future. Well, it sounds sad but there is no way to avoid
issues in the future and you have to look for a website development company that can maintain
your website.

3.3.5. Scalability:

Last but not the least, you have to look for a future-proof solution considering the scalability. It
will define how the website can grow and increase its features and functionality without
impacting the performance of your website. You must be able to add more memory, servers, or
disc space for making more transactions on your website. On the server side, while entering new
markets you may need to add localization features. Overall, this NFR accounts for painless
business expansion and has both hardware and software implications.

Department of mca, Jyoti Nivas College Autonomous Page 9

E-Commerce Web Application

4. SYSTEM DESIGN

4.1. DATABASE DESIGN:

Department of mca, Jyoti Nivas College Autonomous Page 10

E-Commerce Web Application

Department of mca, Jyoti Nivas College Autonomous Page 11

E-Commerce Web Application

Department of mca, Jyoti Nivas College Autonomous Page 12

E-Commerce Web Application

DASHBOARD DESIGN:

Department of mca, Jyoti Nivas College Autonomous Page 13

E-Commerce Web Application

Department of mca, Jyoti Nivas College Autonomous Page 14

E-Commerce Web Application

Department of mca, Jyoti Nivas College Autonomous Page 15

E-Commerce Web Application

4.2. DATA FLOW DIAGRAM:

Department of mca, Jyoti Nivas College Autonomous Page 16

E-Commerce Web Application

FIG 4.1 : Data Flow Diagram

Department of mca, Jyoti Nivas College Autonomous Page 17

E-Commerce Web Application

Fig 4.2: ER Diagram

Department of mca, Jyoti Nivas College Autonomous Page 18

E-Commerce Web Application

4.3 UML DIAGRAM:

Fig 4.3: UML Diagram

Department of mca, Jyoti Nivas College Autonomous Page 19

E-Commerce Web Application

4.4 INTERFACE DESIGN:

Home Page

Department of mca, Jyoti Nivas College Autonomous Page 20

E-Commerce Web Application

Product

After filter

Department of mca, Jyoti Nivas College Autonomous Page 21

E-Commerce Web Application

Login Page

Department of mca, Jyoti Nivas College Autonomous Page 22

E-Commerce Web Application

Profile

Order Page

Department of mca, Jyoti Nivas College Autonomous Page 23

E-Commerce Web Application

Review Page

Review Counting

Department of mca, Jyoti Nivas College Autonomous Page 24

E-Commerce Web Application

5. SYSTEM IMPLIMENTATION
5.1 TOOLS AND TECHNOLOGIES USED:

5.1.1 REACT:

ReactJS is an open-source, trendiest, and component-based JavaScript library that is widely used
to build reusable user interfaces components for web and mobile applications. React is often
mistaken as a tool, framework, and language, sometimes it is confused with React Native –
cross-platform mobile application development tool.

INSTALLATION:

 Open a terminal(Windows Command Prompt or PowerShell).

 Create a new project folder: mkdir ReactProjects and enter that directory: cd
ReactProjects.

 Install React using create-react-app, a tool that installs all of the dependencies to build
and run a full React.js application:

 npx create-react-app my-app

 Start your new React app:

 npm start


5.1.2 REDUX:

Redux is a pattern and library for managing and updating application state, using events called
"actions". It serves as a centralized store for state that needs to be used across your entire
application, with rules ensuring that the state can only be updated in a predictable fashion.

INATALLATION:

To use React Redux with your React app, install it as a dependency:

# If you use npm:

npm install react-redux

Department of mca, Jyoti Nivas College Autonomous Page 25

E-Commerce Web Application

# Or if you use Yarn:

yarn add react-redux

5.1.3 NODE JS AND EXPRESS JS:

 NODE.JS:

Node.js is an open source and cross-platform runtime environment for executing JavaScript code
outside of a browser. You need to remember that NodeJS is not a framework and it’s not a
programming language. Most of the people are confused and understand it’s a framework or a
programming language. We often use Node.js for building back-end services like APIs like Web
App or Mobile App. It’s used in production by large companies such as Paypal, Uber, Netflix,
Walmart and so on.

 EXPRESS.JS:

Express is a small framework that sits on top of Node.js’s web server functionality to simplify
its APIs and add helpful new features. It makes it easier to organize your application’s
functionality with middle ware and routing. It adds helpful utilities to Node.js’s HTTP objects. It
facilitates the rendering of dynamic HTTP objects.

INSTALLATION:

Step 1: Download Node.js Installer.

Step 2: Install Node.js and NPM from Browser.

Step 3: Verify Installation

This is a Node.js module available through the npm registry.

Before installing, download and install Node.js. Node.js 0.10 or higher is required.

If this is a brand new project, make sure to create a package.json first with the npm init
command.

Installation is done using the npm install command:

$ npm install express

5.1.4 MONGO DB:

Department of mca, Jyoti Nivas College Autonomous Page 26

E-Commerce Web Application

MongoDB stores data in flexible, JSON-like documents, meaning fields can vary from document
to document and data structure can be changed over time

The document model maps to the objects in your application code, making data easy to work
with

Ad hoc queries, indexing, and real time aggregation provide powerful ways to access and
analyze your data

MongoDB is a distributed database at its core, so high availability, horizontal scaling, and
geographic distribution are built in and easy to use.

Below are the few of the reasons as to why one should start using MongoDB

 Document-oriented – Since MongoDB is a NoSQL type database, instead of having data

in a relational type format, it stores the data in documents. This makes MongoDB very
flexible and adaptable to real business world situation and requirements.
 Ad hoc queries – MongoDB supports searching by field, range queries, and regular
expression searches. Queries can be made to return specific fields within documents.
 Indexing – Indexes can be created to improve the performance of searches within
MongoDB. Any field in a MongoDB document can be indexed.
 Replication – MongoDB can provide high availability with replica sets. A replica set
consists of two or more mongo DB instances. Each replica set member may act in the
role of the primary or secondary replica at any time. The primary replica is the main
server which interacts with the client and performs all the read/write operations. The
Secondary replicas maintain a copy of the data of the primary using built-in replication.
When a primary replica fails, the replica set automatically switches over to the secondary
and then it becomes the primary server.
 Load balancing – MongoDB uses the concept of sharding to scale horizontally by
splitting data across multiple MongoDB instances. MongoDB can run over multiple
servers, balancing the load and/or duplicating data to keep the system up and running in
case of hardware failure.

INSTALLATION:

Department of mca, Jyoti Nivas College Autonomous Page 27

E-Commerce Web Application

Step 1 — Download the MongoDB MSI Installer Package. Head over here and download the
current version of MongoDB. ...

Step 2 — Install MongoDB with the Installation Wizard. A. ...

Step 3— Create the Data Folders to Store our Databases. A. ...

Step 4 — Setup Alias Shortcuts for Mongo and Mongod. ...

Step 5 — Verify That Setup was Successful.

5.1.5 VISUAL STUDIO CODE:

Visual Studio is an Integrated Development Environment(IDE) developed by Microsoft to

develop GUI(Graphical User Interface), console, Web applications, web apps, mobile apps,
cloud, and web services, etc. With the help of this IDE, you can create managed code as well
as native code. It uses the various platforms of Microsoft software development software like
Windows store, Microsoft Silverlight, and Windows API, etc. It is not a language-specific IDE
as you can use this to write code in C#, C++, VB(Visual Basic), Python, JavaScript, and many
more languages. It provides support for 36 different programming languages. It is available for
Windows as well as for macOS.

INSTALLATION
 Installation of Visual Studio Code Some features of Visual Studio Code are
following−
 Light editor as compared to the actual version of Visual Studio.
 It can be used for coding languages such as Closure, Java, Objective-C, and many
other languages.
 It supports built-in Gits extension so that you can work with source control
without leaving the editor.
 It includes built-in support for IntelliSense code completion, rich semantic code
understanding and navigation, and code refactoring.
 It includes an interactive debugger, so you can step through source code, inspect
variables, view call stacks, etc.
 Many more extensions for development.
 The link of official site for Visual Studio code is https://code.visualstudio.com/

Department of mca, Jyoti Nivas College Autonomous Page 28

E-Commerce Web Application

6. CONCLUSION AND FUTURE SCOPE

6.1 CONCLUSION

Working with Cybortix Technologies as an intern has helped me to understand what is my

area of interest. I have gained an immense amount of technical knowledge from this
work experience and I plan to continue it for my future career. I believe that my commitment
as a web application developer won't solely enhance my career path however additionally I
have to learn new technologies to improve my ability to create changes on my career path.

To extend, as an intern, I have learned React JS for web application development,

and to code in a way that my code can be easily changeable, reusable, and easy to fix bugs and
profitable and a new programmer can use it after. I used to React JS for my internship project
development and while working with React JS, I found it easily learnable, usable, and there
is a bright scope for me to choose to React development as a future path.

Also, I set myself some achievement list before the beginning of my internship for my
improvement and I am pleased to inform that my achievement list was achieved
precisely. On the other hand, I have learned to acclimate to work in a development team
and also in a professional environment. As a web developer, I gain so much confidence
dramatically due to my internship. I am ready to work in a professional organization and eager to
contribute to growth and profit with all the skills I have acquired.

Department of mca, Jyoti Nivas College Autonomous Page 29

E-Commerce Web Application

6.2 FUTURE SCOPE

Web-based application development is a crucial topic for an e-commerce site. People can
browse, choose the products, and order towards the company, and the company will be
delivered the product within a few days. We have a plan to changed bring a few changes to this
website. Besides, we have another plan to add a few functionalities in this website which are
given below:

i. Add the chatting system.

ii. Have a launch android app.

iii. Add an online payment system

Our designed online shopping system provides a 24×7 service, that is customers can surf the
website, place orders anytime they wish to. Also, the delivery system works 24×7 hours a week.
Some of the features that can be modified and added to this system in the future involve its
implementation by local shopkeepers, where shops will be providing an online interface to
customers for shopping and placing orders.

Then some delivery persons can perform their work. This will be adding on benefit for the
customers as it will save their time, plus it adds on for the shopkeepers also, as people will
continue to shop from local shops rather than preferring to supermarkets every time.

Also, since the deliveries from these local vendors will not be as time-consuming as these days
Flipkart, Amazon, etc. take but rather will be delivered the same day of an order placed. Else the
shopkeeper can ask the customer that the product will be available by the next day, so if he/she
still wants to place the order, it can be done.

Again, return or exchange will be easy since the delivery boy can even do it as the store is
nearby. Including a chat box for public benefit is also a great idea via which people can directly
have a conversation with some officials regarding any type of queries.

Department of mca, Jyoti Nivas College Autonomous Page 30

E-Commerce Web Application

APPENDIX

BACKEND:

App.js:

const express = require("express");

const app = express();

const cookie Parser = require("cookie-parser");

const body Parser = require("body-parser");

const file Upload = require("express-fileupload");

const path = require("path");

const error Middleware = require("./middleware/error");

if (process.env.NODE_ENV !== "PRODUCTION") {

require("dotenv").config({ path: "backend/config/config.env" });

app.use(express.json());

app.use(cookieParser());

Department of mca, Jyoti Nivas College Autonomous Page 31

E-Commerce Web Application

app.use(bodyParser.urlencoded({ extended: true }));

app.use(fileUpload());

const product = require("./routes/productRoute");

const user = require("./routes/userRoute");

const order = require("./routes/orderRoute");

const payment = require("./routes/paymentRoute");

app.use("/api/v1", product);

app.use("/api/v1", user);

app.use("/api/v1", order);

app.use("/api/v1", payment);

app.use(express.static(path.join(__dirname, "../frontend/build")));

app.get("*", (req, res) => {

res.sendFile(path.resolve(__dirname, "../frontend/build/index.html"));

});

app.use(errorMiddleware);

module.exports = app;

Server.js:

const app = require("./app");

const cloudinary = require("cloudinary");

const connectDatabase = require("./config/database");

Department of mca, Jyoti Nivas College Autonomous Page 32

E-Commerce Web Application

process.on("uncaughtException", (err) => {

console.log(`Error: ${err.message}`);

console.log(`Shutting down the server due to Uncaught Exception`);

process.exit(1);

});

if (process.env.NODE_ENV !== "PRODUCTION") {

require("dotenv").config({ path: "backend/config/config.env" });

connectDatabase();

cloudinary.config({

cloud_name: process.env.CLOUDINARY_NAME,

api_key: process.env.CLOUDINARY_API_KEY,

api_secret: process.env.CLOUDINARY_API_SECRET,

});

const server = app.listen(process.env.PORT, () => {

console.log(`Server is working on http://localhost:${process.env.PORT}`);

});

process.on("unhandledRejection", (err) => {

console.log(`Error: ${err.message}`);

console.log(`Shutting down the server due to Unhandled Promise Rejection`);

server.close(() => {

process.exit(1);

});

Department of mca, Jyoti Nivas College Autonomous Page 33

E-Commerce Web Application

});

FRONTEND:

App.js

import "./App.css";

import { useEffect, useState } from "react";

import Header from "./component/layout/Header/Header.js";

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import WebFont from "webfontloader";

import React from "react";

import Footer from "./component/layout/Footer/Footer";

import Home from "./component/Home/Home";

import ProductDetails from "./component/Product/ProductDetails";

import Products from "./component/Product/Products";

import Search from "./component/Product/Search";

import LoginSignUp from "./component/User/LoginSignUp";

import store from "./store";

import { loadUser } from "./actions/userAction";

import UserOptions from "./component/layout/Header/UserOptions";

import { useSelector } from "react-redux";

import Profile from "./component/User/Profile";

import ProtectedRoute from "./component/Route/ProtectedRoute";

import UpdateProfile from "./component/User/UpdateProfile";

import UpdatePassword from "./component/User/UpdatePassword";

Department of mca, Jyoti Nivas College Autonomous Page 34

E-Commerce Web Application

import ForgotPassword from "./component/User/ForgotPassword";

import ResetPassword from "./component/User/ResetPassword";

import Cart from "./component/Cart/Cart";

import Shipping from "./component/Cart/Shipping";

import ConfirmOrder from "./component/Cart/ConfirmOrder";

import axios from "axios";

import Payment from "./component/Cart/Payment";

import { Elements } from "@stripe/react-stripe-js";

import { loadStripe } from "@stripe/stripe-js";

import OrderSuccess from "./component/Cart/OrderSuccess";

import MyOrders from "./component/Order/MyOrders";

import OrderDetails from "./component/Order/OrderDetails";

import Dashboard from "./component/Admin/Dashboard.js";

import ProductList from "./component/Admin/ProductList.js";

import NewProduct from "./component/Admin/NewProduct";

import UpdateProduct from "./component/Admin/UpdateProduct";

import OrderList from "./component/Admin/OrderList";

import ProcessOrder from "./component/Admin/ProcessOrder";

import UsersList from "./component/Admin/UsersList";

import UpdateUser from "./component/Admin/UpdateUser";

import ProductReviews from "./component/Admin/ProductReviews";

import Contact from "./component/layout/Contact/Contact";

import About from "./component/layout/About/About";

Department of mca, Jyoti Nivas College Autonomous Page 35

E-Commerce Web Application

import NotFound from "./component/layout/Not Found/NotFound";

function App() {

const { isAuthenticated, user } = useSelector((state) => state.user);

const [stripeApiKey, setStripeApiKey] = useState("");

async function getStripeApiKey() {

const { data } = await axios.get("/api/v1/stripeapikey");

setStripeApiKey(data.stripeApiKey);

useEffect(() => {

WebFont.load({

google: {

families: ["Roboto", "Droid Sans", "Chilanka"],

},

});

store.dispatch(loadUser());

getStripeApiKey();

}, []);

window.addEventListener("contextmenu", (e) => e.preventDefault());

return (

<Router>

<Header />

{isAuthenticated && <UserOptions user={user} />}

{stripeApiKey && (

Department of mca, Jyoti Nivas College Autonomous Page 36

E-Commerce Web Application

<Elements stripe={loadStripe(stripeApiKey)}>

<ProtectedRoute exact path="/process/payment" component={Payment} />

</Elements>

)}

<Switch>

<Route exact path="/" component={Home} />

<Route exact path="/product/:id" component={ProductDetails} />

<Route exact path="/products" component={Products} />

<Route path="/products/:keyword" component={Products} />

<Route exact path="/search" component={Search} />

<Route exact path="/contact" component={Contact} />

<Route exact path="/about" component={About} />

<ProtectedRoute exact path="/account" component={Profile} />

<ProtectedRoute exact path="/me/update" component={UpdateProfile} />

<ProtectedRoute

exact

path="/password/update"

component={UpdatePassword}

/>

<Route exact path="/password/forgot" component={ForgotPassword} />

<Route exact path="/password/reset/:token" component={ResetPassword} />

<Route exact path="/login" component={LoginSignUp} />

<Route exact path="/cart" component={Cart} />

Department of mca, Jyoti Nivas College Autonomous Page 37

E-Commerce Web Application

<ProtectedRoute exact path="/shipping" component={Shipping} />

<ProtectedRoute exact path="/success" component={OrderSuccess} />

<ProtectedRoute exact path="/orders" component={MyOrders} />

<ProtectedRoute exact path="/order/confirm" component={ConfirmOrder} />

<ProtectedRoute exact path="/order/:id" component={OrderDetails} />

<ProtectedRoute

isAdmin={true}

exact

path="/admin/dashboard"

component={Dashboard}

/>

<ProtectedRoute

exact

path="/admin/products"

isAdmin={true}

component={ProductList}

/>

<ProtectedRoute

exact

path="/admin/product"

isAdmin={true}

component={NewProduct}

/>

Department of mca, Jyoti Nivas College Autonomous Page 38

E-Commerce Web Application

<ProtectedRoute

exact

path="/admin/product/:id"

isAdmin={true}

component={UpdateProduct}

/>

<ProtectedRoute

exact

path="/admin/orders"

isAdmin={true}

component={OrderList}

/>

<ProtectedRoute

exact

path="/admin/order/:id"

isAdmin={true}

component={ProcessOrder}

/>

<ProtectedRoute

exact

path="/admin/users"

isAdmin={true}

component={UsersList}

Department of mca, Jyoti Nivas College Autonomous Page 39

E-Commerce Web Application

/>

<ProtectedRoute

exact

path="/admin/user/:id"

isAdmin={true}

component={UpdateUser}

/>

<ProtectedRoute

exact

path="/admin/reviews"

isAdmin={true}

component={ProductReviews}

/>

<Route

component={

window.location.pathname === "/process/payment" ? null : NotFound

/>

</Switch>

<Footer />

</Router>

);

Department of mca, Jyoti Nivas College Autonomous Page 40

E-Commerce Web Application

export default App;

App.css

margin: 0;

scroll-behavior: smooth;

body {

cursor: url("./images/cursor.png"), auto;

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

-webkit-appearance: none;

margin: 0;

input[type="number"] {

-moz-appearance: textfield;

.greenColor {

color: green !important;

.redColor {

Department of mca, Jyoti Nivas College Autonomous Page 41

E-Commerce Web Application

color: red !important;

Index.js

import React from "react";

import ReactDOM from "react-dom";

import App from "./App";

import { Provider } from "react-redux";

import store from "./store";

import { positions, transitions, Provider as AlertProvider } from "react-alert";

import AlertTemplate from "react-alert-template-basic";

const options = {

timeout: 5000,

position: positions.BOTTOM_CENTER,

transition: transitions.SCALE,

};

ReactDOM.render(

<Provider store={store}>

<AlertProvider template={AlertTemplate} {...options}>

<App />

</AlertProvider>

</Provider>,

Department of mca, Jyoti Nivas College Autonomous Page 42

E-Commerce Web Application

document.getElementById("root")

);

Store.js

import { createStore, combineReducers, applyMiddleware } from "redux";

import thunk from "redux-thunk";

import { composeWithDevTools } from "redux-devtools-extension";

import {

newProductReducer,

newReviewReducer,

productDetailsReducer,

productReducer,

productReviewsReducer,

productsReducer,

reviewReducer,

} from "./reducers/productReducer";

import {

allUsersReducer,

forgotPasswordReducer,

profileReducer,

userDetailsReducer,

userReducer,

} from "./reducers/userReducer";

Department of mca, Jyoti Nivas College Autonomous Page 43

E-Commerce Web Application

import { cartReducer } from "./reducers/cartReducer";

import {

allOrdersReducer,

myOrdersReducer,

newOrderReducer,

orderDetailsReducer,

orderReducer,

} from "./reducers/orderReducer";

const reducer = combineReducers({

products: productsReducer,

productDetails: productDetailsReducer,

user: userReducer,

profile: profileReducer,

forgotPassword: forgotPasswordReducer,

cart: cartReducer,

newOrder: newOrderReducer,

myOrders: myOrdersReducer,

orderDetails: orderDetailsReducer,

newReview: newReviewReducer,

newProduct: newProductReducer,

product: productReducer,

allOrders: allOrdersReducer,

order: orderReducer,

Department of mca, Jyoti Nivas College Autonomous Page 44

E-Commerce Web Application

allUsers: allUsersReducer,

userDetails: userDetailsReducer,

productReviews: productReviewsReducer,

review: reviewReducer,

});

let initialState = {

cart: {

cartItems: localStorage.getItem("cartItems")

? JSON.parse(localStorage.getItem("cartItems"))

: [],

shippingInfo: localStorage.getItem("shippingInfo")

? JSON.parse(localStorage.getItem("shippingInfo"))

: {},

},

};

const middleware = [thunk];

const store = createStore(

reducer,

initialState,

composeWithDevTools(applyMiddleware(...middleware))

);

export default store;

Department of mca, Jyoti Nivas College Autonomous Page 45

E-Commerce Web Application

REFERENCE
[1] Visual Studio Code - Code Editing. Redefined, "Docs, Getting Started”.Available:
https://code.visualstudio.com/. [Accessed: 10-march-2022].

[2] Node JS tutorial [Online], Available: https://www.w3schools.com/nodejs/ [Accessed: 28-

June-2022].

[3] Express JS Tutorial [Online]: https://www.tutorialspoint.com/expressjs/index.htm [Accessed:

10-June-2022].

[4] MongoDB Tutorial [Online]: https://www.mongodb.com/docs/manual/tutorial/

https://www.tutorialspoint.com/expressjs/index.htm [Accessed: 29-June-2022].

[5] Redux Tutorial [Online]: https://www.tutorialspoint.com/redux/index.htm [Accessed: 10-

May-2022].

[6] React Tutorial [Online], Available:https://www.w3schools.com/REACT/default.asp

[Accessed: 18-April-2022].

[7] JavaScript Tutorial [Online], Available:https://www.w3schools.com/js/default.asp

[Accessed: 1-April-2022].

[8] CSS Tutorial [Online], Available:https://www.w3schools.com/css/default.asp

[Accessed: 10-March-2022].

[9] HTML Tutorial [Online], Available:https://www.w3schools.com/html/default.asp

[Accessed: 1-March-2022].

Department of mca, Jyoti Nivas College Autonomous Page 46

E-Commerce Web Application

Department of mca, Jyoti Nivas College Autonomous Page 47