1.

INTRODUCTION

1.1. Abstract

The Ecommerce Product Management Website is a sophisticated and user-friendly platform designed to facilitate
seamless management of an online store, enabling users to effortlessly add new products, categories, and
administrators. The project is divided into two distinct components: the backend services and the frontend
application.

The backend services are built using React.js, Next.js, and are powered by the MongoDB Atlas database. Leveraging
Amazon AWS S3 Bucket, the platform efficiently stores and manages product images. Admins are granted the
privilege to access the management website by assigning their respective email addresses.

Key features of the backend services include:

1. Product Management: The system enables authorized admins to add new products, encompassing vital
information such as product name, description, category, brand, and other pertinent properties. Product
images are securely stored in the Amazon AWS S3 Bucket, and their URLs are returned for efficient retrieval
and display.
2. Category Management: Admins can effortlessly introduce new categories and organize products,
accordingly, streamlining the browsing experience for customers.
3. Admin Management: The platform empowers superusers to add new administrators by providing their
email addresses, allowing them to access the management website and perform necessary tasks.
4. Order Tracking: The backend services facilitate the seamless viewing of incoming orders, providing valuable
insights into customer activity and purchase trends.

The frontend application, a separate project, complements the backend services and provides an engaging and
responsive user interface for customers. Key features of the frontend application include:

1. Product Display: All products added through the backend services are elegantly displayed on the frontend,
ensuring an immersive shopping experience for customers.
2. Cart Functionality: Customers can effortlessly add products to their shopping carts, enabling convenient and
flexible shopping.
3. Checkout and Online Payment: The project incorporates a secure and user-friendly checkout process,
allowing customers to complete their transactions efficiently and make online payments with ease.

The integration of React.js and Next.js in the frontend ensures a highly performant and dynamic application, while
the use of CSS enhances the visual appeal and user experience.

In conclusion, the Ecommerce Product Management Website presents a comprehensive solution for online store
management, combining powerful backend services with an intuitive frontend application. The platform's robust
features cater to the needs of both administrators and customers, fostering seamless product management and
facilitating secure and convenient online transactions.
 1.3. Scope of System

The scope of the Ecommerce Product Management Website is vast, encompassing various functionalities and
features that facilitate comprehensive management of an online store. The system's scope includes both the back-
end services and the front-end application, providing a holistic solution for administrators and customers alike. The
key components within the scope of the system are as follows:

1. Backend Services Scope:

a. Product Management: The system allows administrators to add new products to the online store. It captures
essential information such as product name, description, category, brand, and other properties.
b. Category Management: Administrators can create and manage product categories, organizing the products
for better navigation and user experience.
c. Admin Management: Superusers have the privilege to add new administrators by providing their email
addresses. These administrators gain access to the management website with specific permissions.
d. Order Tracking: The system offers a feature to view incoming orders, providing insights into customer
activity and purchase trends.
e. Image Storage: The backend services utilize Amazon AWS S3 Bucket to efficiently store and manage product
images, returning secure URLs for frontend display.

2. Frontend Application Scope:

a. Product Display: The frontend application presents all products added through the backend in an appealing
and user-friendly manner, facilitating easy product browsing for customers.
b. Cart Functionality: Customers can add products to their shopping carts, edit quantities, and remove items as
needed.
c. Checkout and Payment: The frontend application enables customers to proceed with secure and convenient
online checkout, making payments through integrated payment methods.
d. User Account Management: Registered users can log in, view order history, manage personal information,
and update account settings.
e. Responsive Design: The frontend application ensures responsiveness across different devices, allowing
customers to access the online store seamlessly on desktops, tablets, and mobile phones.

3. Technology Scope:
a. React.js and Next.js: These technologies power the frontend application, providing a high-performance and
interactive user interface.
b. MongoDB Atlas: The NoSQL database is used for efficient data storage and retrieval in the backend services.
c. Amazon AWS S3 Bucket: It serves as the storage solution for product images, ensuring secure and scalable
image management.

The scope of the system extends to cover the entire lifecycle of an online store, from product addition and management
to customer browsing, shopping, and checkout. The project aims to deliver an integrated and feature-rich platform that
enhances productivity, simplifies management tasks, and provides an enjoyable shopping experience for customers. It
also supports potential future expansions and enhancements to meet the evolving needs of the business and its users.
 1.5.2. ROBMS/No SQL used to build database (MySQL / Oracle, Teradata etc.)

The Ecommerce Product Management Website utilizes a NoSQL database management system to build and
manage the database. Specifically, MongoDB is used as the NoSQL database for this project.

MongoDB:

• MongoDB is a popular and widely used NoSQL database that stores data in JSON-like BSON format
(Binary JSON). It is a document-oriented database, which means it stores data in flexible and self-
descriptive documents, making it ideal for handling complex and dynamic data structures.
• As a schema-less database, MongoDB allows for easy and dynamic modification of data structures,
making it well-suited for projects where the data model might evolve over time.
• MongoDB is designed to scale horizontally, allowing for easy distribution of data across multiple servers,
ensuring high performance and scalability as the project's data requirements grow.
• It provides powerful querying capabilities, indexing, and aggregation pipelines, enabling efficient
retrieval and manipulation of data, essential for an ecommerce website with extensive product
information.
• MongoDB Atlas, the cloud-based database service provided by MongoDB, is often used to host
MongoDB databases in the cloud, offering managed infrastructure and automated backups.

In contrast to traditional relational databases like MySQL, Oracle, or Teradata, MongoDB's flexible and scalable
nature aligns well with the requirements of modern web applications, especially those dealing with large volumes of
unstructured or semi-structured data. Additionally, MongoDB's ease of use and support for horizontal scaling make it
a popular choice for web applications, including ecommerce platforms like the Ecommerce Product Management
Website.
3.6. Activity Diagram

Below are diagrams for Checkout, Add Product, Add Category, Add Admin activities.

Add Product

1. Enter Product Title: The user starts the process of adding a new product by entering the title of the product.

2. Enter Product Description: The user provides a description for the product to give more details about it.

3. Enter Price: The user specifies the price of the product.

4. Select Category: The user selects a category for the product from the available categories.

5. Enter Product Properties: The user enters additional properties or attributes specific to the product, such as size,
color, etc.

6. Upload Images: The user uploads images of the product to be displayed on the product page.

7. Save Product: The user saves the product details, and the new product is added to the Ecommerce website's
product catalog.
Add Category

1. Enter Category Name: The user starts the process of adding a new category by entering the name of the
category.

2. Parent Category Needed?: The system checks if the new category needs to be a sub-category under an existing
parent category.

3. No (No Parent Category Needed): If the new category does not require a parent category, the user proceeds to
enter the properties or attributes specific to the category.

4. Enter Properties: The user enters additional properties or attributes associated with the category.

5. Save Category: The user saves the category details, and the new category is added to the Ecommerce website's
category list.

Checkout

1. Select Products: The customer starts the checkout process by selecting the products they want to purchase.

2. View Cart: The customer views the items added to the shopping cart before proceeding to checkout.

3. Is Cart Empty?: A decision point to check if the cart is empty or contains items.

4. No (Cart Not Empty): If the cart is not empty, the process proceeds to the "Checkout" activity.

5. Checkout: The customer initiates the checkout process to proceed with the purchase.

6. Payment: The customer provides payment details to complete the order.

7. Place Order: The order is placed, and the purchase is confirmed.

8. End: The checkout process ends after the order is successfully placed.

Add Admin

1. Enter Admin Email:

2. Save Admin:
 3.7. Sample Input and Output Screens
Ecommerce Admin
Ecommerce Front-End