KENABECHA.

COM

SUBMITTED BY

1. Name: Emon Ahmed Akash

(ID: CSE04190101319)
2. Name: Thamina Islam Ema
(ID: CSE04190101295)
3. Name: Sanjida Akter Tithi
(ID: CSE04190101331)

A Project Report Submitted in Partial Fulfillment of

the Requirements for the Degree of Bachelor of Science
in Computer Science & Engineering

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

NORTHERN UNIVERSITY BANGLADESH
August 2023
 APPROVAL

The Project Report “Kenabecha.Com” submitted by Emon Ahmed Akash (ID:

CSE04190101319),Thamina Islam Ema (ID: CSE04190101295) and Sanjida Akter
Tithi (ID: CSE04190101331) to the Department of Computer Science and Engineering,
Northern University Bangladesh, have been accepted as satisfactory for the partial
fulfillment of the requirements for the degree of Bachelor of Science in Computer
Science and Engineering and approved as to its style and contents.

Board of Examiners

1. Muhammed Samsuddoha Alam (Supervisor)

Associate Professor
Department of Computer Science and Engineering
Northern University Bangladesh.

2. Md. Ruhul Amin (Examiner)

Associate Professor
Department of Computer Science and Engineering
Northern University Bangladesh.

---------------------------------------

Md. Raihan-Ul-Masood
Associate Professor and Head
Department of Computer Science and Engineering
Northern University Bangladesh
 DECLARATION

We, hereby, declare that the work presented in this Project report is the outcome of the
investigation performed by us under the supervision of Muhammed Samsuddoha Alam,
Associate Professor & Coordinator, Dept. of Computer Science & Engineering. We also
declare that no part of this Project has been or is being submitted elsewhere for the award
of any degree or diploma.

Candidates-Signature

……………………………
Name: Emon Ahamed Akash
(ID: CSE04190101319)

……………………………
Name: Thamina Islam Ema
(ID: CSE04190101295)

……………………………
Name: Sanjida Akter Tithi
(ID: CSE04190101331)
 ACKNOWLEDGEMENTS

First, we express our heartiest thanks and gratefulness to Allah for His divine blessing in
making us possible to complete the final year project successfully.

The real spirit of achieving a goal is through the way of excellence and austere discipline. We
would have never succeeded in completing our task without the cooperation, encouragement,
and help provided to us by various personalities.

We would like to express our deepest appreciation to our supervisor Muhammed

Samsuddoha Alam, Associate Professor & Coordinator, Department of Computer Science
and Engineering, Northern University Bangladesh. His endless patience, scholarly guidance,
continual encouragement, constant and energetic supervision, constructive criticism, valuable
advice, reading many inferior drafts, and correcting them at all stages have made it possible to
complete this project. We are especially grateful to our honorable teachers.

We would like to express our heartiest gratitude to Md. Raihan–Ul-Masood, Head,

Department of CSE, for his kind help to finish our project and we would also like to admit
with much appreciation the crucial role of the staff of Northern University Bangladesh (NUB),
who has permitted us to access all kinds of library materials and equipment to gain knowledge
and to clear out our understandings. We must appreciate the guidance given by the other
supervisors and lecturers who have helped us to clear our understanding and created concern
and the importance of completing the project report carefully with maintaining good
knowledge and quality.

We would like to thank our entire classmates at Northern University Bangladesh, who took
part in this discussion while completing the coursework. Finally, we must acknowledge with
due respect the constant support and patience of our parents.

iv
 ABSTRACT
Kenabecha.Com is an e-commerce website that caters to people with hectic schedules who
prefer the ease of internet purchasing over physical marketplaces. The primary goal of this
project is to produce a user-friendly web page that promotes online advertising, purchasing,
and selling. Customers can quickly browse for products, read thorough descriptions, and
make purchases through the website. Customers will be able to explore, view, and place
purchases directly on the website, while vendors will be able to promote their items. This
web application was built using HTML, CSS, Bootstrap, React Js, and Express Js.

v
 TABLE OF CONTENTS

ACKNOWLEDGEMENTS....................................................................................................... iv
ABSTRACT................................................................................................................................ v
TABLE OF CONTENTS.......................................................................................................... vi
LIST OF FIGURES................................................................................................................... ix

Chapter I: Introduction 1

1.1 Overview......................................................................................................................... 01
1.2 Objectives of the Project………………………………………………………..…….. 01
1.3 History of E-Commerce Website................................................................................... 02
1.4 Overview of the Project Report…….............................................................................. 03

Chapter II: System Analysis & Design 04

2.1 System Requirements Analysis..................................................................................... 04

2.1.1 Functional Requirements............................................................................................... 04
2.1.2 Non- Functional Requirement....................................................................................... 05
2.2 Flow Chart of the System.............................................................................................. 06
2.3 Use Case Diagram......................................................................................................... 08
 Chapter III: Tools & Requirements 09

3.1 System tools................................................................................................................. 09

3.2 Database Design Process........................................................................................... 10
3.3 HTML.......................................................................................................................... 15
3.4 CSS............................................................................................................................ 15
3.5 Bootstrap..................................................................................................................... 15
3.6 React JS...................................................................................................................... 16
3.7 Node JS...................................................................................................................... 16
3.8 Express JS.................................................................................................................. 17
3.9 Mongo DB................................................................................................................. 17
3.10 API............................................................................................................................. 17
3.11 Source & Component............................................................................................... 20
3.11.1 Source Code............................................................................................................... 20
3.11.2 Component................................................................................................................ 21

Chapter IV: Project Demonstration 23

4.1 Home Page................................................................................................................. 23

4.1.1 Customer Registration.............................................................................................. 24
4.1.2 Verification................................................................................................................ 24
4.1.3 Customer Login......................................................................................................... 26
4.2 Element Details......................................................................................................... 26
4.2.1 Search....................................................................................................................... 26
4.2.2 Menu Bar................................................................................................................... 27
4.3 All Category Manage................................................................................................ 27
4.3.1 Product Category List................................................................................................ 27
4.3.2 Product Page / Category Wise Page........................................................................... 28
4.4 Product........................................................................................................................ 29
4.5 Cart............................................................................................................................ 29
4.6 Checkout.................................................................................................................... 30
4.7 Order Summery......................................................................................................... 31
4.8 Payment Method........................................................................................................ 31
4.9 Footer........................................................................................................................ 32
4.10 Admin Panel.............................................................................................................. 32
4.10.1 Admin Dashboard..................................................................................................... 32
4.10.2 Product Information................................................................................................ 33
4.11 Mobile View.............................................................................................................. 34

Chapter V: System Testing & Reports 35

5.1 Introduction.............................................................................................................. 35
5.2 Testing..................................................................................................................... 35
5.2.1 Integration Testing................................................................................................... 35
5.2.2 Performance Testing................................................................................................ 35
5.3 Error & Bugs............................................................................................................. 37
5.4 Solution..................................................................................................................... 37

Chapter VI: Conclusion and Future Scope 38

6.1 Conclusion............................................................................................................... 38
6.2 Future Scope............................................................................................................ 38

REFERENCES.................................................................................................................. 39

APPENDIX……................................................................................................................... 40
 LIST OF FIGURES
2.1.1 Flow Chart of The System............................................................................................ 06
2.1.2 Flow Chart of The System............................................................................................ 07
2.2 Use Case Diagram........................................................................................................ 08
3.1.1 Database Design Process............................................................................................. 10
3.1.2 Database Design Process............................................................................................. 11
3.1.3 Database Design Process............................................................................................. 12
3.1.4 Database Design Process............................................................................................. 13
3.1.5 Database Design Process…………………………………………………………… 14
3.2.1 API................................................................................................................................ 18
3.2.2 API................................................................................................................................ 19
3.3.1 Source Code................................................................................................................. 21
3.3.2 Source Code................................................................................................................. 22
4.1 Customer Registration................................................................................................. 24
4.2.1 Mail Verification.......................................................................................................... 25
4.2.2 Mail Code..................................................................................................................... 25
4.3 Customer Login Page.................................................................................................... 26
4.4 Search Box.................................................................................................................... 27
4.5 Menu Bar...................................................................................................................... 27
4.6 Category List................................................................................................................. 28
4.7 Category Wise Page...................................................................................................... 28
4.8 Product Image............................................................................................................... 29
4.9 Cart................................................................................................................................ 30
4.10 Checkout....................................................................................................................... 31
4.11 Footer............................................................................................................................ 32
4.12 Admin Dashboard......................................................................................................... 32
4.13 Product Information...................................................................................................... 33
4.14 Mobile View................................................................................................................. 34

ix
 CHAPTER I

INTRODUCTION

1.1 Overview

Electronic commerce refers to the buying and selling of products or services over computer
networks, such as the Internet. It relies on various technologies, including mobile commerce,
online transaction processing, and inventory management systems, among others. Nowadays, e-
commerce primarily utilizes the World Wide Web to handle transactions, although it can also use
email and other technologies. E-commerce shops have become part of our daily lives and
technological advancement has made it possible for people of all over the world to sit in their
homes and still shop online without going to any physical shop. This project is divided into two
distinct categories: administrators and users. Administrators have the ability to add, edit, update,
or delete products, change product names, and adjust pricing. Meanwhile, users can browse
products, update the shopping cart, and even add new products.

1.2 Objectives of the Project

 Manage Online Selling Costs In A Strategic Way

 Making a Responsive E-commerce Website

 Establish Deeper Business Relationships

 Provide a Unique Customer Experience

 Improve Customer Loyalty

 Refine Service Efficiency

 Increasing the number of loyal customers

 Boosting the efficiency of services

1
  Identify The Right Target Audience

 Increasing Sales

 Reducing the management cost

 Keep Products within Low price budget

1.3 History of E-Commerce Website

The history of e-commerce websites dates back to the invention of the internet in the 1960s.
However, the first e-commerce website was created in 1991 by a computer programmer named
Tim Berners-Lee. The site was designed to sell book online, and it used a basic HTML interface
to display the product listings and accept orders.

In 1994, Jeff Bezos founded Amazon.com, which quickly became one of the largest and most
successful e-commerce websites in the world. Established traditional retailers also began to take
notice of the growing trend and sought to establish their own online presence.

During the dot-com bubble of the late 1990s, hundreds of new e-commerce websites were
launched. Many of these companies, however, failed to turn a profit and went out of business
during the crash in the early 2000s.

Despite these challenges, e-commerce continued to grow, and innovations like PayPal and Credit
card processing made online shopping more convenient and secure. By the mid-2000s, e-
commerce had become an integral part of the global economy.

Today, e-commerce is a multi - billion-dollar industry, and thousands of businesses operate

exclusively online. Advances in technology continue to drive innovation in the field, from mobile
commerce to social commerce and beyond.

2
1.4 Overview of the Project Report

The book is organized as follows:

In Chapter 2 we have discussed the overall system analysis & design.

Chapter 3 contains Tools And Requirements.

Chapter 4 is a system demonstration with screenshots.

Chapter 5 contains the system testing for our project.

Chapter 6 concludes the Project Report by giving some future works plans.

References are added at the end of the report.

3
 CHAPTER II

SYSTEM ANALYSIS & DESIGN

2.1 System Requirements Analysis

The requirements of the system are categorized into functional and non-functional requirements.

2.1.1 Functional Requirements

The following is the desired functionality of the system. The project would cover:

Customer Module

• Customers can view/search products without logging in.

• Customer can also add/remove product to the cart without login (if the customer try
to add the same product in the cart. It will add only one)
• When a customer tries to purchase a product, then he/she must log in to the system.
• After creating an account and login into the system, he/she can place an order.
• If the customer clicks on the pay button, then their payment will be successful and
their order will be placed.
• Customer can check their order details by clicking on the orders button.
• Customers can see the order status (Pending, Confirmed, Delivered) for each order.
• Customer can download their order invoice for each order.
• Customer can send feedback to admin (without login)

4
Admin Module

• Admin can provide a username, email, and password and your admin account will
be created.
• After login, there is a dashboard where the admin can see how many customers
are registered, how many products are there for sale, how many orders placed
and notify how many stock products are low.
• Admin can add/delete/view/edit the products.
• Admin can view/edit/delete customer details.
• Admin can view/delete orders.
• Admin can change the status of the order (order is pending, confirmed, out for
delivery, delivered)
• Admin can view the feedback sent by customers.

2.1.2 Non- Functional Requirements

• Availability: The system should remain operational on any day and at any place.
• Accuracy: There is a need to optimize the system to ensure more accurate results
and calculations.

• Usability: The system should provide a User-friendly user interface and tooltips
to enhance itself and be effectively responsive.

• Secure: The system must be able to provide security against any external injections
by using a layered security system. Implementation of user login functionalities
also ensures the system is secure from unauthorized persons.

• Performance of the system: Response time is very good for a given piece of work.
The system will support a multi-user environment.

• Reliability of the system: The system will be highly reliable and it generates
all the updated information in the correct order. Data validation and verification are
done at every stage of the activity.

5
2.2 Flow Chart of the System

The following flow chart describes the system of “Kenabecha.com”. When an active
user logs in he/she can go to his/her respective home page and has access to the main
features. Customers can log in and order any products from here. Admin can manage
orders and can update and modify everything.

Admin Flowchart:

Figure 2.1.1: Flow Chart of the system

6
Customer /User Flowchart :-

Figure 2.1.2: Flow Chart of the system

7
2.3 Use Case Diagram

A Use Case Diagram sometimes called unified modeling language (UML) is a graphical
representation of a system action and user’s roles. System’s user interaction with the system and
role of the users with these actions.

Figure 2.2: Use Case Diagram

8
 CHAPTER III

TOOLS & REQUIREMENTS

3.1 System Tools

This Website used some of the tools, those tools are mentioned below:
Frontend:

• HTML

• CSS

• Bootstrap

• React JS

Backend:

• Node.js

• Express JS

Database:

• MongoDB

3.2 Database Design Process

 Users

id Number

name String

email String

address String

password String

Figure 3.1.1: Database Design Process

10
 Products
id Number
title String
price Number
desc String
category String
brand String
image String
stock Number
discount Number
rating Number
review String

Figure 3.1.2: Database Design Process

11
 orders

id Number

title String

price Number

address String

phone String

userid Number

isDelivered Boolean

Figure 3.1.3: Database Design Process

12
Figure 3.1.4: Database Design Process

13
Figure 3.1.5: Database Design Process

14
3.3 HTML

Every web page you encounter is created using a language called HTML, which serves as the
fundamental structure or skeleton of the page. In this course, we will use HTML to include
various elements such as paragraphs, headings, images, and links to construct a complete
webpage. The test.html tab in the editor on the right is where we will write our HTML code.
HTML has its own specific syntax, like any other language, and when we open this file in a
web browser, it interprets the HTML code and renders it into a visually recognizable webpage.
The browser knows how to arrange and display the content according to the instructions
provided in the HTML code.

3.4 CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of
a document written in a markup language. It is most commonly used to define the visual style
of web pages and user interfaces written in HTML and XHTML, but it can also be used to
render them in speech or on other media. Along with HTML and JavaScript, CSS is a
cornerstone technology used by most websites to create visually engaging web pages, user
interfaces for web applications, and user interfaces for many mobile applications. CSS is
designed primarily to enable the separation of document content from document presentation,
including aspects such as layout, colors, and fonts. This separation can improve content
accessibility; provide more flexibility and control in the specification of presentation
characteristics; enable multiple HTML pages to share formatting by specifying the relevant
CSS in a separate CSS file; and reduce complexity and repetition in the structural content.

3.5 Bootstrap

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end
web development. It contains HTML, CSS, and (optionally) JavaScript-based design templates for
typography, forms, buttons, navigation, and other interface components.

15
3.6 React JS

React is a powerful and flexible JavaScript library used to create user interfaces and UI
components. It simplifies the process of building complex UIs by allowing developers to compose
them from smaller, isolated code units called "components." Renowned companies like Netflix,
Airbnb, Instagram, and the New York Times, as well as startups, rely on React for their web
development needs. Compared to other frameworks like Angular.js, React offers numerous
advantages, making it a preferred choice for front-end development.

React JS is an open-source library maintained by Meta (previously Facebook) and a community

of developers and companies. It enables the creation of user interfaces based on reusable UI
components. Developers can employ React as a foundation for single-page applications, mobile
applications, or server-rendered applications in conjunction with frameworks like Next.js.
However, React focuses on state management and rendering, so developers often use additional
libraries for routing and other client-side functionalities when building React applications. Overall,
React's versatility, performance, and component-based approach make it an excellent choice for
modern web development.

3.7 Node JS

Node.js is a server environment that is open-source and allows developers to run JavaScript on the
server-side. This means that JavaScript, traditionally known for client-side scripting, can now be
utilized for server-side scripting as well as writing command line tools. By running scripts server-
side, Node.js can dynamically generate web page content before it is sent to the user's web browser.
This concept of "JavaScript everywhere" unifies the development of web applications under a
single programming language, promoting consistency and efficiency throughout the entire process.
One of the key benefits of Node.js is its cross-platform nature, making it independent of any
specific operating system software. Node.js can seamlessly operate on various platforms such as
Linux, macOS, and Windows, providing flexibility and compatibility for developers working in
different environments.

16
3.8 Express JS

Express is a versatile web application framework designed for Node.js, offering a wide array of
features to facilitate the development of web and mobile applications. It enables developers to
build various types of applications, including single-page, multipage, and hybrid web apps. It's a
layer built on top of the Node js that helps manage servers and routes. Express JS syntax
Features of Express JS
● Middleware
● Fast Server-Side Development
● Routing
● Debugging
● Templating

3.9 Mongo DB

MongoDB is a widely used, cross-platform document-oriented database program with source code
availability. It falls under the category of NoSQL databases, meaning it does not rely on traditional
relational tables for data storage. Instead, MongoDB uses JSON-like documents, which can be
flexible and schema-less, allowing developers to store and retrieve data in a more dynamic manner.
The database is developed by MongoDB Inc. and is licensed under the Server Side Public License,
which has been considered non-free by some distributions due to its terms and restrictions.

3.10 API

An API (Application Programming Interface) refers to a standardized set of rules and protocols
that allow different software applications to communicate and work together seamlessly. It serves
as a bridge that enables developers to build and integrate their software with other systems
efficiently. In the context of web development, the front-end of a website or application often
needs to retrieve data from an API hosted on a server. This data can be in various formats, such as
JSON or XML, and is fetched using specific API requests made by the front-end code. By utilizing
APIs, developers can access and exchange data between different applications, enabling them to
enhance the functionality and user experience of their web projects.

17
Figure 3.2.1: API

18
Figure 3.2.2: API

19
3.11 SOURCE & COMPONENT:

3.11.1 SOURCE CODE

Frontend: http://github.com/emonahamedakash/kenabecha.git

Backend: https://github.com/emonahamedakash/kenabecha-backend.git

20
3.11.2 COMPONENT

Frontend:

Figure 3.3.1: Source Code

21
Backend:

Figure 3.3.2: Source Code

22
 CHAPTER IV
PROJECT DEMONSTRATION

4.1 Home page

. Login

. Search

. Category

. Cart

. Latest Product

. Menu Bar

. Brands

. Footer

23
4.1.1 Customer Registration:

Registration or login function used for creating an account.

. Name

. Email

. Address

. Password

Figure 4.1: Customer Registration

4.1.2 Verification

. Email Verification For Register

24
 Figure 4.2.1: Mail Verification

Figure 4.2.2: Mail Code

25
4.1.3 Customer Login:

After Register account we need to login account.

. Email Address

. Password

. Submit Button

Figure 4.3: Customer Login Page

4.2 Element Details:

4.2.1 Search:

We have created a search box for search any product.

26
 Figure 4.4: Search Box

4.2.2 Menu Bar

. Home

. Category

. Login

. Cart

Figure 4.5: Menu Bar

4.3 All-Category Manage

4.3.1 Product Category List

Whenever we enter a product category, the category products are displayed.

27
 Figure 4.6: Category List

4.3.2 Product Page / Category Wise Page:

As per product category

Figure 4.7: Category Wise Page

28
4.4 Product

• Image

• Title

• Price

• Old Price

Figure 4.8: Product Image

4.5 Cart

• Cart Product List

• Product Quantity
• Price
29
 Figure 4.9: Cart

4.6 Checkout

• Address

• Phone Number

30
 Figure 4.10: Checkout

4.7 Order Summary

• Product

• Subtotal

• Total Shipping

• Coupon code

• Total

4.8 Payment Method

• Cash On Delivery

• Nagad

• Rocket

• Bkash

31
4.9 Footer

Figure 4.11: Footer

4.10 Admin Panel

4.10.1 admin dashboard

• Low stock notification when product less than 15 in stock its notify.

Figure 4.12: Admin Dashboard

32
4.10.2 Product Information

Figure 4.13: Product Information

33
4.11 Mobile View

Figure 4.14: Mobile View

34
 CHAPTER V
SYSTEM TESTING & REPORTS

5.1 Introduction

This chapter illustrates the last two phases of project testing and UI/UX phases. In the testing
phase, integration testing and performance testing were performed. In addition, the UI/UX was
performed through user experience analysis and finding out what clients/users are demanding.

5.2 Testing

Testing was performed to test the website and how it supports mobile working.

5.2.1 Integration Testing

In this type of testing, we test various integration of the project module by providing input. The
primary objective is to test the module interfaces in order to ensure that no errors are occurring
when one module invokes the other module.

5.2.2 Performance Testing

The website was tested on the Google Chrome browser using an online tool called GTmetrix,
which analyzes web pages according to different rules by giving each rule weight and then
evaluating the score of each rule for the website. The rule tested by these tools is indicated in
the Table below.
35
1. Make fewer HTTP requests. 2. Remove duplicate JavaScript and CSS

3. Use a CDN 4. Configure E Tags.

5. Avoid empty src or href 6. Make AJAX cacheable

7. Add Expires Headers 8. Use GET for AJAC requests

9. Compress components with GZip 10. Reduce the number of DOM element

11. Put CSS at the top 12. Avoid HTTP 404(Not Found) errors

13. Put JavaScript at the bottom 14. Reduce cookie size

15. Avoid CSS expressions 16. Use cookie-free domains

17. Make JavaScript and CSS external 18. Avoid AlphaImageLoader filter

19. Reduce DNS lookups 20. Do not scale images in HTML

21. Minify JavaScript and CSS 22. Make favicon small and cacheable

23. Avoid URL redirects

Table 5.1: Rules used during the test of the website

36
Report & Results:

All users of this system were completely satisfied and the system was user-friendly also. Users can
easily understand the full system and can use it perfectly.

5.3 Error & Bugs

We didn’t find any bugs or errors in this system. It is a lite weight web application without any
issues.

5.4 Solutions

Though we did not find any bugs after testing by 200+ students and 4+ advisors. So, at this moment
we did not need any solutions. But in the future, if we need any updates or we find any issues our
support & tech team will solve it as soon as possible because we have a strong 24/7 support team
for this system.

37
 CHAPTER VI

CONCLUSION & FUTURE SCOPE

6.1 Conclusion

The Kenabecha.Com e-commerce website project has achieved successful completion,

meticulously developed and thoroughly error-free. With a focus on providing a seamless and swift
shopping journey, it maintains robust database integrity while minimizing data duplication. The
core objective was to revamp project management, elevating user proficiency across diverse
sectors. Notably cost-effective, the system boasts efficiency and rapidity. Rigorous system testing
has validated its user-friendliness and impeccable performance.

6.2 Future Scope

We will implement the following features in the future.

1. AI Chabot system

2. Live Product Show

38
 REFERENCES

[1] https://www.w3schools.com/html/

[2] https://www.w3schools.com/css/

[3] https://www.w3schools.com/react/

[4] https://www.youtube.com/playlist?list=PLgH5QX0i9K3r6ZGeyFnSv_YDxVON2P85m

[5] https://www.youtube.com/playlist?list=PLkyGuIcLcmx2qXaZkjCL8-P78i2J5rDOa

39
7.1 Appendix
 Drive Link of Source File
https://drive.google.com/drive/folders/10VhkJ-
07xAWf5Nt8rdVxDxtuqNugZ8Sb?fbclid=IwAR3VsbS_6sn_j8_AiATVZQluh1rqANxTBicuu5a
-vz6QYMuzNBEwzp-K60o

Fig: 7.1: QR Code of Drive Link

40
41
Figure 7.1: Source Code

42