i

DEVELOPMENT OF A WEB BASED MODERN

ECOMMERCE MOBILE APP.

MD.SHOHIDULLAH BISWAS
Id:ASH1711016M
Session: 2017-18

Supervisor
Jayed Us Salehin
Assistant Professor
Noakhali Science and Technology University
 ii

This project proposal submitted to the Department of Information and Communication

Engineering, Noakhali Science and Technology University, in partial fulfillment of the
requirements for the degree of B.Sc. (Eng.) in Information and Communication Engineering.

Department of Information and Communication Engineering

NOAKHALI SCIENCE AND TECHNOLOGY UNIVERSITY

AUGUST- 2022
 i

DECLARATION

I hereby declare that this project report has not been submitted elsewhere for the requirement of
any kind of Degree, Diploma or Publication.

MD.SHOHIDULLAH BISWAS

Roll No: ASH1711016M

Session: 2017-2018

Year- 04, Term- 01

 ii

ACCEPTANCE

This project report is submitted to the Department of Information & Communication

Engineering, Noakhali Science & Technology University, Sonapur, Noakhali in partial
fulfillment of the requirements for having the B.Sc. degree in ICE.

Prof. Dr. Md. Ashikur Rahman Khan

Professor

Department of Information and Communication Engineering

Noakhali Science & Technology University

Sonapur, Noakhali
 iii

ABSTRACT

This paper contains features to build and develop a reliable website based on the e-commerce
theories, developing effective well designed web pages. This website will sell computer products
include to manage records all user data and monitor electronically. As a result, this project is
often beneficial for all users with extra features.  It should setting up online ecommerce store
with easy-to-use. 

In this project, our proposed system named as “Web based Modern E-Commerce Mobile App”
will implemented for managing online product sell and shopping. Where includes Question and
Answer forum in which increasing the community between customers and seller. It is also
increasing extra traffic and visitor in our web app. It improves the the customer experience, and
lastly implement the Direct Online Sale between business to consumer by implement electronic
payment methods.
 iv

TABLE OF CONTENT

Declaration i
Acceptance ii
Abstract iii
Table of content iv
List of figures vi

CHAPTER 1 INTRDUCTION

1.2 Background Study 1

1.2 Problem Statement 2

1.3 Objective 2

CHAPTER 2 LITERATURE REVIEW

2.1 Literature Review 3

2.2 Web Based Modern Ecommerce Website 3

2.3 Existing Ecommerce Website 3

2.5 Summery 8

CHAPTER 3 METHODOLOGY

3.1 Methodology 9

3.2 Analysis of The Current System 9

3.3 Proposed System 10

3.3.1 Use Case Diagram of Proposed System 11
 v

3.3.3 Flowchart Diagram of Admin 13

3.3.4 Flowchart Diagram of Register Customer 14
3.3.5 Flowchart Diagram Admin registration 15
3.3.6 ER diagram of the proposed system 16

3.4 Project Development Tools 17

3.4.1 Software Language Tools 17
3.4.2 Hardware Interface 19
3.4.3 Software Interface 19

CHAPTER 4 EXPECTED RESULT

4.1 Login Page 21

4.2 Admin Dashbord 22

4.3 User Dashbord 23

4.4 24

CHAPTER 5 CONCLUSION & FUTURE WORK

5.1 Conclusion 25

5.2 Future Work 25

PROJECT TIMETABLE 26

REFERENCES 27
 vi

LIST OF FIGURES

Figure No Title Page

3.1 Use case diagram of proposed system 8
11
3.2 Flowchart diagram of Admin Login 12
3.4 Flowchart diagram of Customer Login 13
3.5 Flowchart diagram of Admin registration 14
3.6 ER diagram of proposed system 14
 1

CHAPTER 1

INTRODUCTION

1.1 BACKGROUND STUDY

 The main objective of this study is to introduce the concept of the e-commerce in a suitable
application area to enhance the performance and enable the customer, the shopping process to be
quick and to achieve the benefits of the e-commerce which causes positive prosperity to the
economy.

In this study an e-commerce website is designed using React js and Node & Mongo Db to create
the database using NoSQL node js server . Macromedia Dreamweaver8 is also implemented to
design the website bases.
 2

1.2 PROBLEM STATEMENT

The following are the problem current system has: -

I. Following system that are made by generally Javascript, My SQL Server language for
which it less secure for sensitive data like email password, credit card pin number etc.
II. Customer need to provide name, phone numbers, email address and address details
when creating account.
III. Managing buyers information is very tough in hard copies.
IV. Update take time to reach buyer end because of offline process.
V. No confirmation of order with document proof .
VI. Order list is prepared manually.
VII. Limited time period to order products.

1.3 OBJECTIVE

The system will do the following activities:

I. Design an e-commerce website in order to be utility in various commercial fields.

II. Allow people from different places to share the same market place in the same time
by achieving the benefits of the ecommerce..
III. Create an external market for the products which helps in increasing the total value of
investment in industry field by promoting the national products worldwide in the real time.
IV. User can add essential product to his wish list, add product to cart, delete product to
cart
V. Customer may have post any problem and post a product for selling.
 3

1.4FEATURES

The proposed system's primary goal is to computerize the existing system and reduce manpower
and time consumption. It has the following capabilities:

I. User-focused personalized experience.

II. . High quality product images and videos.

III. Mobile friendly website.
IV. User Generated review system.
V. Relevant frequently asked question .
VI. Graph analysis view.
VII. Centralized database management.
VIII. Easy and user-friendly interface for the operator of the system.
IX. Reduce paper work and time consumption.
X. Computerize the entire activities and operations.
 4

CHAPTER 02

LITERATURE REVIEW

2.1 LITERATURE REVIEW

This section discusses about the background study for the project. To make the project fruitful, we need to
study online shopping procedure and the way to attract the end users. Then shopping of the payment
method and the available e-commerce application testing is done. Some limitations of the existing
applications are found, which are tried to make up by this project.

2.2EXISTING ECOMMERCE WEBSITE

Before the staring to get into a complete discussion of e-commerce, it is helpful to have a good
mental image of plain old commerce first. If you understand commerce, then e-commerce is an
easy extension. Merriam-Webster's Collegiate Dictionary defines commerce as follows:
commerce n [MF, fr. L cornmercium, fr. com-+ mere-, merx merchandise] (1537) 1: social
intercourse: interchange of ideas, opinions, or sentiments 2: the exchange or buying and selling
of commodities on a large scale involving transportation from place to place 3: sexual
intercourse So commerce is, quite simply, the exchange of goods and services, usually for
money. Many people see commerce all around them in a million of different forms. When
buying something at a grocery store or at Wall-mart, they are participating in commerce. In the
same way, if you cart half of your possessions onto your front lawn for a yard sale, you are
 5

participating in commerce from a different angle. If you go to work each day for a company that
produces a product, that is yet another link in the chain of commerce. When you think about
commerce in these different ways, you instinctively recognize several different roles: Buyers -
these are people with money who want to purchase a good or service. Sellers - these are the
people who offer goods and services to buyers. Sellers are generally recognized in two different
forms: retailers who sell directly to consumers and wholesalers or distributors who sell to
retailers and other businesses. Producers - these are the people who create the products and
services that sellers offer to buyers. A producer is always, by necessity, a seller as well. The
producer sells the products produced to wholesalers, retailers or directly to the consumers. 4 It
seems to he the high level, commerce is a fairly simple concept! Whether it is something as
simple as a person making and selling popcorn on a street corner all of commerce at its simplest
level relies on buyers, sellers and producers. The growth of Internet Technology has made
changes so it affects many products and services many businesses are going online selling and
buying. There is one final point for e-commerce that needs to be made. E-commerce allows
people to create completely new business models. In a mail order company there is a high cost to
print and mail catalogs that often encl up in the trash. There is also a high cost in staffing the
order-taking department that answers the phone. In e-commerce both the catalog distribution cost
and the order taking cost fall toward zero. That means that it may be possible to offer products at
a lower price, or to offer products that could not be offered before because of the change in cost
dynamics. However, it is important to point out that the impact of e-commerce only goes so far.
Mail order sales channels offer many of these same advantages, but that does not stop your town
from having a mall. The mall has social and entertainment aspect,s that attract people, and at the
mall you can touch the product and take delivery instantly. Ecommerce cannot offer any of these
features. The mall is not going to go away anytime soon. E-commerce is one of the most visible
examples of the way in which information and communication technologies (ICT) can contribute
to economic growth. It helps business improve trade efficiency and facilitates the integration of
developing firms into the global economy. It allows businesses and entrepreneurs to become
more competitive. In addition, it provides jobs, thereby creating wealth.

Md. Milon Islam, Md. Kamrul Hasan, Md Masum Billah, Md. Manik Uddin, “Development of
Smartphonebased Student Attendance System”, Department of Computer Science and
Engineering Khulna University of Engineering & Technology, Khulna-9203, Bangladesh,
 6

2017.In this paper, the system is able to mark attendance, marking intruders‟ entry, attendance
percentage calculations, send emails, and send SMS to the guardian to keep them updated about
their child’s attendance at the Institute.The designed system allows for internet access from any
location and at any time, which can greatly aid the course instructor in keeping track of their
students' attendance. Android API level 19 is used by the system. As an IDE, the application is
developed using the Eclipse Android ADT bundle. The phone database was an internal SQLite
database, and the web server database was www.golapmilonkuet.byethost16.com. The MySQL
database is stored on the server.

Karwan Jacksi, Falah Ibrahim, Shahab Ali, “Student Attendance Management System”,
University of Zakho, Iraq, 2018. 6] In this paper, the system is designed in a way that can
differentiate the hours of theoretical and practical lessons since the rate of them is different for
calculating the percentages of the student’s absence.
 7

2.4 SUMMERY

The aim of this project is to develop a responsive, user friendly, scalable e-commerce website
with a modern, high performance JavaScript framework called React. We will design and test a
model for web-based Ecommerce mobile app as part of our project. The responsive test,
functionality test, and browser compatibility were performed on different platforms. The result
was good as the website met all the requirements.
 8

CHAPTER 03

METHODOLOGY

3.0 Software Development Technique

There are many software development technique available like the Waterfall model, Spiral model, agile
model and many more .
In this project, I used AGILE methodology to develop my web application.
AGILE:

Agile methodologies are approaches to product development that are aligned with the values and
principles described in the Agile Manifesto for software development. Agile methodologies aim to
deliver the right product, with incremental and frequent delivery of small chunks of functionality,
through small cross-functional self-organizing teams, enabling frequent customer feedback and course
correction as needed.

3.1 Software Language Tools

3.1.1 JAVASCRIPT & REACT JS

JavaScript, often abbreviated JS, is a programming language that is one of the core technologies
of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript
on the client side for web page behavior, often incorporating third-party libraries. All major web
browsers have a dedicated JavaScript engine to execute the code on users' devices. JavaScript is
a lightweight programming language that web developers commonly use to create more dynamic
interactions when developing web pages, applications, servers, and or even games.
 9

3.1.2 HTML5 & CSS3

The Hyper Text Markup Language or HTML is the standard markup language for documents

designed to be displayed in a web browser. It can be assisted by technologies such as Cascading
Style Sheets (CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure of a web page
semantically and originally included cues for the appearance of the document.

Developers generally use JavaScript alongside HTML and CSS The scripting language works

well with CSS in formatting HTML elements. However, JavaScript still maintains user
interaction, something that CSS cannot do by itself.

3.1.3 NODE JS & MONGO DB

.As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable

network applications. This is in contrast to today's more common concurrency model, in which
OS threads are employed. Thread-based networking is relatively inefficient and very difficult to
use. Furthermore, users of Node.js are free from worries of dead-locking the process, since there
are no locks. Almost no function in Node.js directly performs I/O, so the process never blocks
except when the I/O is performed using synchronous methods of Node.js standard library.
Because nothing blocks, scalable systems are very reasonable to develop in Node.js.

MongoDB, the most popular NoSQL database, is an open-source document-oriented database.

The term ‘NoSQL’ means ‘non-relational’. It means that MongoDB isn’t based on the table-like
relational database structure but provides an altogether different mechanism for storage and
retrieval of data. This format of storage is called BSON ( similar to JSON format). 

SQL databases store data in tabular format. This data is stored in a predefined data model which
is not very much flexible for today’s real-world highly growing applications. Modern
applications are more networked, social and interactive than ever. Applications are storing
more and more data and are accessing it at higher rates.
 10

Relational Database Management System (RDBMS) is not the correct choice when it comes to
handling big data by the virtue of their design since they are not horizontally scalable. If the
database runs on a single server, then it will reach a scaling limit. NoSQL databases are more
scalable and provide superior performance. MongoDB is such a NoSQL database that scales by
adding more and more servers and increases productivity with its flexible document model.
 11

3.3 WEB DEVELOPMENT LIFE CYCLE PROCESS

A web development life cycle refers to all of the steps involved in creating a website, from
conceptualization through coding and design to deployment and maintenance. It is the regular or
methodical procedure to follow in order to create a functional website.

Figure 3.1 Web Development life cycle

1. Research and Analysis: We simply acquire some additional information throughout this step
of the web development process to help us in the planning stage. It's important to note that
research and analysis are generally repeated throughout a project's development life cycle.
However, performing adequate research prior to developing any code is essential to the long
success of a project.

2. Planning and Strategy: Creating a wireframe and sitemap is part of the website planning
process. This is an important stage because it serves as the skeleton of your website. This
procedure might take anywhere from 2 to 6 weeks to complete. The sitemap gives the developer
an idea of how the site will look, what pages will be present, and how they will interact with one
another. This is advantageous not only to planning but also to the user experience.

2. Designing: The web design stage comprises the establishment of a website layout as well as
the participation of creative UI/UX designers. To get a sense of the website's design, you'll need
 12

to create a basic draft, which might be graphical. The goal of the layout is to provide your clients
with an information structure that allows them to take a visual tour of the material and
fundamental features. The wire-frame created in the previous stage is translated into buttons,
tabs, menus, dashboards, color themes, typography, and graphic to create a base layout for the
website.
 13

3.3 PROPOSED SYSTEM

1) Customer accounts

(2) Customer address books (other shipping destinations)

(3) Order history

(4) Temporary (not logged on) and permanent (logged on) shopping carts

( 5) Search catalog for products or manufacturers

(6) Product reviews by customers

(7) E-mail notifications

(8) For checkout procedure

(9) Secure transactions with SSL

( 10) Number of products in each category are shown

( 11) Display what other customers have purchased (relating to the current product displayed).

(12) Question and Answer forum

(13)Customer may also post for selling products

 14

3.3 Use Case Diagram of the Proposed System

A use case is a system analysis methodology for identifying, clarifying, and organizing system
needs. Registered
Registration Login User

j LogoutN

Unregistered View products

User Edit info
Order Product

Search
Product
Add to Post prblems
LOGINN cartcartN

Logout

View

Upload

Admin Edit

Figure 3.1: Use case diagram for proposed system

3.3.1 Data Flow Diagram

A Data Flow Diagram (DFD) is a classic visual representation of how data flows through a
system. A clean and clear DFD can graphically display the right amount of system need. It can
be done manually, automatically, or in a combination of the two. It depicts how data enters and
exits the system, as well as what changes the data and where it is stored.
 15

Figure 3.2 Data Flow Diagram of the system

 16

3.3.4 Flowchart Diagram of Admin registration

Figure 3.4: Flowchart Diagram of Admin registration

 17

3.3.4 Flowchart Diagram of Admin Login

Figure 3.5: Flowchart Diagram of Admin Login

 18

3.3.6 ER Diagram of the Proposed System

An Entity Relationship (ER) Diagram is a form of flowchart that shows how "entities" within a
system interact with one another. In the disciplines of software engineering, business information
systems, education, and research, ER Diagrams are most commonly used to build or troubleshoot
relational databases.

Figure 3.7: ER Diagram of propose system

 19

3.4.2 Hardware Interface

For server side and client side the following hardware interfaces are:

Processor:

Processor type: Pentium III-comparable processor or faster.

Processor speed: Minimum: 1.0GHz, Recommended: 2.0GHz or faster.

Memory:

RAM: 2GB
Minimum: 512 MB
Recommended: 2.048 GB or more
Maximum: Operating system maximum

Disk Space:

Minimum 6 GB or above

3.4.3 Software Interface

Following software interfaces are:

Operating System: Windows XP /vista/7/8/10

Browser: Latest any kind of browser like:

i. Mozilla Firefox

ii. Google chrome

iii. Internet Explorer

 20

iv. Microsoft Edge

v. UC Browser

vi. Opera
 21

CHAPTER 4

EXPECTED RESULTS

4.1 USER LOGIN PAGE

There will be a form for login in and a form for signing up. After login in, the user will be able to see his
profile information.

Figure 1: Register with Token page

4.2 ADMIN LOGIN PAGE

 22

The admin will be able to upload new products to the database.

Figure 2: Admin Login Page

 23

4.3 USER REGISTERED PAGE

After User login , then the user will show the registered page .

Figure 3: Customer Registration Form

 24

4.4 Customer, Order info and Delivery Page

This page will show customer order ,ordre place and delivery information .

Figure 4: Customer, Order and Delivery page

 25

4.5 PAY MENT METHOD

After ordering and The user will able to see delivery select payment method .

Figure 5: Payment method

 26

4.6 Admin Dashboard

Admin panel including total sales, total order and total product .It has containing sales and product
statistics for the instant time period.

Fig: Admin Dashboard

 27

CHAPTER 5

CONCLUSION AND FUTURE WORK

5.1 CONCLUSION

The aim of this thesis was to develop a responsive, user friendly, scalable ecommerce website
with high performance using React. The website works well as requested, which makes the
project successful. This website was built to enable users to do several actions like seeing the list
of products with thumbnails and full-sized images, sorting the list in an ascending or descending
order, filtering the products by size, adding preferred items to cart or removing them. React,
HTML5, CSS3, Bootstrap 4, Node.js, and JSON were technologies used to built this project.
After developing process, the project was deployed on the Internet. Netlify was chosen as the
hosting platform. The responsive test, functionality test, and browser compatibility were
performed on different platforms. The result was good as the website met all the requirements.
The web application is simple, elegant and functional with important features for an online store.
It provides clients with a solution to develop their business at a very low cost.
 28

PROJECT TIMETABLE

I've included a schedule for completing my project. This isn't an accurate schedule. It's only a
rough schedule. I make every effort to complete my project within this time frame.

Activity Plan Month 1 Month 2 Month 3

Selection of Project and Literature survey
Front-end Design
Backend Development
Testing and modification
Documentation
 29

REFERENCES

[1] Development of Ecommerce System by Apandi Siti Hawa, Mohammed Rozllina

https://www.theseus.fi/bitstream/handle/10024/343090/Huynh_Thao.pdf?sequence=2

[2] https://www.theseus.fi/bitstream/handle/10024/343090/Huynh_Thao.pdf?sequence=2

[3] . Journal of Hamdard University Bangladesh, 3(1); 137-148, 2016 ONLINESHOP.COM:

AN E-COMMERCE WEBSITE Md. Solaiman Mia*

https://d1wqtxts1xzle7.cloudfront.net/54420191/HUB_2-with-cover-page-v2.pdf?Expires=1662008700&Signature=eaL8Tl-
jDkyAhl-
DNrPy0~SPh~dxv~XcOVJytV2vxSUTu1~wQWsDGKWEMGnIOgNMl3iMXfGjmAmZPCoi1w~hrCDxlQisv2AKXIP0u2
B3yI6d3pE~rj24YfQFv2bG~cTJQR9rllBZ-iSrfKrvVeHxt6KY1cWWbO88MgUu3hR1DY5-
mZQYOWvHwfJFTfR8IWep3owKpqt3nDvZZETOk0RVpbIntksNXelEHjMy4a1a5~3zPkVTjgA2H4GW2vbOVzJ0Qsg8H
JSojR0I5C0xtisrqP4zk7LkKJrFMLnN3oyIp3XldI5CKiL4SAh6x56jNYjJsYK9xV8mt72iwbTtdg7hCg__&Key-Pair-
Id=APKAJLOHF5GGSLRBV4ZA

[8] https://reactjs.org/tutorial/tutorial.html

[9] Node.js -https://nodejs.org/en/

[10] Material UI -https://mui.com/

[11] Javascript Tutorial -https://www.w3schools.com/js/DEFAULT.asp

[12] https://developer.mozilla.org/en-US/docs/Web/JavaScript