0% found this document useful (0 votes)
3K views31 pages

1final - Report MERN Stack

This document presents a project report for the development of an e-commerce website called "Blissful Bazar" using the MERN stack. The objectives are to create an intuitive shopping platform offering a wide range of products across categories with secure payments and personalized experiences. The core components include user authentication, product catalog, shopping cart, payment integration, and order management. The project aims to design an e-commerce solution that seamlessly integrates the front-end, back-end and database while ensuring high performance. It was developed using HTML, CSS, JavaScript, React, Node.js, Express.js and MongoDB with guidance from Prof. Mansi Gosai.

Uploaded by

Krishna Amrutiya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
0% found this document useful (0 votes)
3K views31 pages

1final - Report MERN Stack

This document presents a project report for the development of an e-commerce website called "Blissful Bazar" using the MERN stack. The objectives are to create an intuitive shopping platform offering a wide range of products across categories with secure payments and personalized experiences. The core components include user authentication, product catalog, shopping cart, payment integration, and order management. The project aims to design an e-commerce solution that seamlessly integrates the front-end, back-end and database while ensuring high performance. It was developed using HTML, CSS, JavaScript, React, Node.js, Express.js and MongoDB with guidance from Prof. Mansi Gosai.

Uploaded by

Krishna Amrutiya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 31

GUJARAT TECHNOLOGICAL UNIVERSITY

Chandkheda,Ahmedaba
dAffiliated

GYANMANJARI COLLEGE OF
COMPUTER APPLICATION
A
Project
ReportOn

Blissful Bazar

Under subject of
SOFTWARE PROJECT-1
M.C.A, Semester – II

Submitted By
Jelanshi Shah 225750694034
Krishna Patel 225750694031

Prof. Mansi Gosai


(Faculty Guide)
Prof. Kashyap A. Dave
(Head of the Department)
Academic
year 2022-2023
GYANMANJARICOLLEGEOFCOMPUTERAPPLICATI
ONBHAVNAGAR

CERTIFICATE

This is to certify that the project on Blissful Bazar has been


satisfactorily carried by Shah Jelanshi A. (Er.no.225750694034) and
Patel Krishna H. (Er. no.225750694031) under my guidance in the
fulfillment of the software project-1 (629405) work during the
academic year2022-2023

1. Shah Jelanshi A. Er.no.-225750694034

2. Patel Krishna H. Er.no.-225750694031

Faculty Guide Head of the Department


Prof. Mansi Gosai Prof. Kashyam A. Dave
GMCC,Bhavnagar Blissful Bazar

ACKNOWLEDGEMENT

We have taken efforts in this project. However, it would not have been possible without
the kind of support and help of many individuals and organizations. We would like to
extend our sincere thanks to all of them.

I am highly indebted to Prof. Mansi Gosai for their guidance and constant supervision as
well as for providing necessary information regarding the project & also for their support
in completing the project. We would like to express our special gratitude and thanks to
faculties forgiving me such attention and time.

Our thanks and appreciations also go to my colleague for guiding me during the project
andpeople who have willingly helped me out with their abilities.
I sincerely appreciate the inspiration; support and guidance of all those people who have
been instrumental in making this project a success. We would also like to thank all the
faculty members of M.C.A department for their critical advice and guidance without which
this projectwould not have been possible.

Last but not the least I place a deep sense of gratitude to our family members and our
friends who have been a constant source of inspiration during the preparation of this
project work.

Thank you.

Prepared by: -

Jelanshi Shah

Krishna Patel

205750694002
Jelanshi Shah (225750694034) I
Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

ABSTRACT

A "Blissful Bazar" is an E-commerce website developed using the MERN (Mongo


DB, Express.js, React.js, Node.js) stack. The website aims to provide a seamless
shopping experience to users, offering a wide range of products across various
categories. This project report outlines the design, development, and implementation
of the website, along with the use of agile methodologies to ensure an efficient and
flexible development process.

205750694002 II
Jelanshi Shah (225750694034)
Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

INDEX
SrNo. Chapter Name PageNo.

ACKNOWLEDGEMENT I
ABSTRACT II
1. Chapter 1: Introduction 1
1.1 Existing System 1
1.2 Need For New System 1
1.3 Objective Of The New System 1
1.4 Problem Definition 2
1.5 Core Components 2
1.6 Project Profile 3
1.7 Assumptions And Constraints 4
1.8 Advantages And Limitation Of Proposed System 4
2. Chapter 2:RequirementDetermination&Analysis 6
2.1RequirementDetermination 6
2.2TargetedUser 6
3. Chapter 3:SystemDesign 7
3.1UseCaseDiagram 7
3.2DataDictionary 12
4. Chapter 4:Development 19
4.1CodingStandards 19
4.2ScreenShots 22
5. Chapter 5:AgileDocumentation 35
5.1 Agile project chare 35
5.2 Agile Project Plan 35
5.3 User’s story 36
5.4 Agile Release plan 36
5.5 Agile Sprint Backlog 37
5.6 Agile Test plan 37
5.7 Earnedvalue 37
6. Chapter 6:ProposedEnhancement 38
7. Chapter7:Conclusion 39
8. Chapter8:Bibliography 40

205750694002
Jelanshi Shah (225750694034) III
Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

1. Introduction
1.1 Existing System:

 The existing E-commerce systems often lack certain features and may not provide a
user-friendly experience. Therefore, the development of "Blissful Bazar" aims to
overcome these limitations and deliver a robust and efficient online shopping
platform.

1.2 Need for the new system:

 The need for the new system arises from the growing demand for a user-friendly,
feature-rich, and reliable E-commerce platform that caters to the diverse needs of
customers.

1.3 Objective of new system:

 The primary objectives of the new system include:

 Creating an intuitive and responsive E-commerce website.


 Offering a wide range of products from various categories.
 Implementing secure and efficient payment gateway.
 Providing a personalizes shopping experience through user accounts and
recommendations.
 Streamlining the order and delivery process.

1.4 Problem Definition:

▪ The main challenge is to design and develop an E-commerce website that


seamlessly integrates the front-end, back-end and database components while
ensuring high performance and scalability.

Jelanshi Shah (225750694034) Page 1


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

1.5 Core Components.

 The core components of "Blissful Bazar" include:

 User authentication and authorization

 Product catalog and search

 Shopping cart and checkout

 Payment gatway integration

 Order management

Jelanshi Shah (225750694034) Page 2


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

1.6 Project Profile


Project Title Blissful Bazar E-commerce website

Front-End HTML, CSS, JS, React JS, REDUX

Back-End Node JS, Express JS

Database MongoDB

Tools Vs code

Operating System Microsoft Windows 10.

Project Guide Prof. Mansi Gosai

Submitted By Jelanshi A. Shah


Krishna H. Patel

Tabel 1 : -Project Profile

Jelanshi Shah (225750694034) Page 3


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

1.7 Assumptions and Constraints:

1.7.1 Assumption
▪ Users will have access to a stable internet connection.
▪ Product information and image will be provide by vendors in a standardized format.
▪ The project must be completed within the given time frame and budget.

1.7.2 Constraints
▪ Internet connection is mandatory.
▪ Browser is mandatory.
▪ Project must be completed within the given time frame and budget.

1.8 Advantages and Limitation of the proposed system.

Advantages:
▪ Enhanced user experience with a modern and intuitive interface.
▪ Increased sales and revenue potential due to a broader reach.
▪ Better customer engagement through personalized recommendations.
▪ Efficient order and inventory management.

Limitations:
▪ Initial setup cost and maintenance requirements.
▪ Dependency on third-party payment gateway.
▪ Potential security risks related to online transactions.

Jelanshi Shah (225750694034) Page 4


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

2. Requirement Determination & Analysis


2.1 Requirement determination And Analysis:
▪ To develop any application, it is important to identify the user requirement
therefore it is very important to analyses the existing application.

▪ Engage with stakeholders, including business owners, marketing teams,


potential customers, and other key personnel, to understand their
expectations, goals, and requirements for the website.

▪ Users should be able to register accounts, log in, and manage their profiles
securely.

▪ The website should offer a well-organized product catalog with various


categories and subcategories.

▪ Each product page should provide detailed information, including images,


descriptions, prices, and reviews.

▪ Implement a robust search and filtering system to help users find product
quickly.

▪ Users should be able to add items to their carts, view cart contents, and
proceed to checkout.

▪ Secure payment options must be provide for online transactions.

▪ Admin should be able to manage orders, process payments, and track


deliveries.

2.2 Targeted User:


▪ The targeted users of the website include customers seeking a convenient and
diverse online shopping experience, vendors interested in showcasing and
selling their products, and administrators responsible for managing the
platform.

Jelanshi Shah (225750694034) Page 5


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

3. System Design

Jelanshi Shah (225750694034) Page 6


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissfull Bazar

3.5. Data Dictionary:

 A data dictionary is a catalog – a repository – of the elements in the system.


The data dictionary consists of different major elements like Data Elements,
Data Store [Tables Used], Data Flow, Processes and other External entities
used in the system. The data dictionary stores details and description of these
elements.
 Analysts use data dictionary for the following important reasons:

 To manage the details in large system.


 To communicate a common meaning for all system elements.
 To document the features of the system.
 To facilitate analysis of the details in order to evaluate the characteristics and
determine where system changes should be made.
 To locate errors and omissions in the system.

Sr. No. Field Name Datatype Size Constraint Description

1 User_id Integer 7 Primary Key This field stores user Id.

2 Name Varchar 25 Not Null This field stores name of


user.
3 Email Varchar 35 Not Null This field stores Email
Id.
4 Password Password 15 Not Null This field stores
password.
Table 01:- User Tables

Jelanshi Shah (225750694034) Page 7


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissfull Bazar

Sr. No. Field Name Datatype Size Constraint Description


1 Product_id Integer 7 Primary Key This field stores
product Id.

2 Name Varchar 25 Not Null This field stores


name of product.

3 Brand Varchar 25 Not Null This field stores


name of product
brand.
4 Price Integer 5 Not Null This field stores
price.

5 Image Varchar 25 Not Null This field stores


image of Product.

6 Category Varchat 25 Not Null This field stores


category of product.

7 Description Varchat 50 Not Null This field stores


description of the
product.

8 Rating Float 5 Not Null This field stores


rating of the
product.

9 Number of Integer 10 Not Null This field stores the


review number of reviews.

10 Count in stock Integer 10 Not Null This field stores the


number of product
is avilable.

Table 02:- Product Table

Jelanshi Shah (225750694034) Page 8


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissfull Bazar

Sr. No. Field Name Datatype Size Constraint Description


1 Order_id Integer 7 Primary This field stores
Key order Id.
2 Order item Varchar 25 Not Null This field stores
order item .

3 Shipping address Varchar 55 Not Null This field stores


shipping address.

4 Payment method Varchar 25 Not Null This field stores


payment method.
5 Item price Float 5 Not Null This field stores item
price.

6 Tax amount Integer 5 Not Null This field stores tax


amount.

7 Total price Integer 5 Not Null This field stores total


price .

8 Is paid Boolean 5 Not Null This field stores


payment is done or
not .
9 Is deliver Boolean 5 Not Null This field stores
product is deliver or
not .

Table03:- Order Table

Jelanshi Shah (225750694034) Page 9


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissfull Bazar

Sr. No. Field Name Datatype Size Constraint Description


1 Categorie id Integer 7 Primary Key This field stores
Categorie Id.

2 Categorie Name Varchar 15 Not Null This field stores


Categorie name.

Table04:- Categories Table

Jelanshi Shah (225750694034) Page 10


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissfull Bazar

4. Development

4.1 Coding Standards:

1 Naming Convention:

▪ Give meaningful name to the variables, methods and classes.


▪ Use descriptive and meaningful names for variables, functions, and classes.
▪ Follow camel case for variables and functions (e.g., productList, getUserDetails).
▪ Use pascal case for class and component names (e.g., ProductDetails, OrderHistory).
▪ Constants should be in uppercase with underscores (e.g.,
MAX_PRODUCTS_PER_PAGE)

2 Organization of Files :

▪ This is section that defines how we need to place the files used in the website
and under what section:
▪ We should follow MVC architecture. In which all the model classes or
fragment classes should be in model folder.
▪ All controllers should be separate and view should be separate as well.
▪ There should be a section to define all Constants for the app. The constants
should include the following:
▪ Constants for dimensions. For E.g.: row height = 80, number of cells = 5 etc.
▪ Constants for URLs used in the app. This can be for projects related to web
services. This should be at one place.
▪ All the image name should be defined at one place and there should be no
hard-code values in the code.
▪ All the code that is used repeatedly should be defined in macros whenever
possible.
▪ All images, videos and media should be in “resources” folder. There should
be sub folders to save images, medias etc.

Jelanshi Shah (225750694034) Page 11


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

3 Formatting and Indentation:

Formatting and indentation are crucial aspects of coding in the MERN stack when
developing an E-commerce website. Consistent and well-organized code improves
readability, reduces errors, and enhances collaboration among developers. Here are some
formatting and indentation guidelines for the MERN stack E-commerce website:

1 Indenting and Whitespace:


▪ Use an indent of 2 spaces, with no tabs.

▪ Lines should have no trailing whitespace at the end.

▪ Files should be formatted with \n as the line ending, \r\n(Windows line endings).

▪ All text files should end in a single newline (\n). This avoids the verbose "\

No newline at end of file" patch warning and makes patches easier to read

since it's clearer what is being changed when lines are added to the end of a

file.

2 Operators:
▪ All binary operators (operators that come between two values), such as +, -, =, !=,
==, >, etc. should havea space before and after the operator, forreadability.

▪ For example, an assignment should be formatted as $foo = $bar; rather than


$foo=$bar;. Unary operators(operators that operate on only one value),such as
++, should not have a space between theoperator an the

Jelanshi Shah (225750694034) Page 12


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

3 Casting:
▪ Put a space between the (type) and the $variable in a cast: (int)
$my_number.

4 Control Structures:
▪ Control statements should have one space between the control
keyword and opening parenthesis, to distinguish them from function
calls.
▪ Use curly braces for all control structures, even for single-line statements,
to prevent potential bugs.
▪ Properly indent the code within control structures for better code
organization.

4.2 Screen ShotsAdmin Panel

Fig_01: Admin Login

Jelanshi Shah (225750694034) Page 13


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

Fig_02: Admin Profile

Fig_03: View and Delete Product Categories

Jelanshi Shah (225750694034) Page 14


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

Fig_04 : Edit Product

Fig_05 : Order Data

Jelanshi Shah (225750694034) Page 15


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

Fig_06: View and Delete Customer Data

Fig_07: Edit User

Jelanshi Shah (225750694034) Page 16


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

User panel

Fig_01 : User Registretion

Jelanshi Shah (225750694034) Page 17


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

Fig_02 : Home Page

Jelanshi Shah (225750694034) Page 18


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

Fig_03 : View Product

Jelanshi Shah (225750694034) Page 19


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

Fig_04 : Order Details

Jelanshi Shah (225750694034) Page 20


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

5. Agile Documentaion

5.1 Agile project charter

Project Name :- Blissful Bazar


Project Scope :- To create a user-friendly, feature-rich platform offering a wide range of
products and seamless shopping experiences

Project Description :- Onilne protal for shopping


Project Risk :- Potential security breach of customer data.
Time Frame :- 4 Months
Stockholders :- Jelanshi Shah
Krishna Patel
Staet Date :- 17/03/2023
End Date :- 09/06/2023

5.2 Agile Project plan:

 The Agile project plan provides a detailed breakdown of the development process,
including iterations, timelines, and milestones. It helps in effective project tracking
and progress evaluation.
 Contents of agile project plan :
 Iteration Schedule: A list of iterations (sprints) with start and end dates.
 Feature Set : Features and functionalities planned for each iteration.
 Deliverables : The expected deliverables for each iteration.
 Resource Allocation : Allocation of resources (development team, tools, etc.)
for each iteration.
 Milestones : Key milestones to track project progress.
 Risk Assessment : Identification and assessment of potential risks during the
project.
 Contingency Plan : Contingency strategies to handle unforeseen issues or
delays.
 Review and Evaluation : Regular review and evaluation schedule to assess
progress and make improvements.

Jelanshi Shah (225750694034) Page 21


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

5.3 user’s story

 User stories describe the features or functionalities from the perspective of end-users,
helping to understand their needs and expectations.
 Examples of user stories :
 As a customer, I want to be able to search for products based on specific
categories or keywords.
 As a user, I want to view my order history and track the status of my current
orders.
 As a vendor, I want to manage my product listings, including adding new
products and updating existing ones.

5.4 Agile Release plan

▪ The Agile release plan defines the schedule and feature sets for each release of
the Blissful Bazar website.

▪ Contents of Agile Release plan :


 Release Schedule: A timeline for planned releases and their respective
dates.
 Feature Prioritization: Identification of key features to be included in
each release based on importance and complexity.
 Deployment Strategy: Description of the deployment process for each
release.
 Quality Assurance: Quality assurance and testing strategies for each
release.

Jelanshi Shah (225750694034) Page 22


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

5.5 Agile Sprint Backlog

▪ The Agile sprint backlog is a list of tasks and user stories to be completed within
each sprint (iteration).
▪ Contents of agile sprint backlog :
 List of User Stories: The user stories that will be worked on in the current
sprint.
 Task Breakdown: Breakdown of user stories into specific tasks with
estimated effort and assignment to team members.
 Status Tracking: Tracking the progress of each task during the sprint.

5.6 Agile Test Plan


 The Agile test plan outlines the testing approach, methodologies, and criteria for
ensuring the quality of Blissful bazar.
 Contents of Agile Test Plan :
 Testing Objectives: Clear objectives and goals for the testing phase.
 Test Types: Types of testing (e.g., functional, usability, performance) to be
conducted.
 Test Environment: Details of the test environment and tools used for testing.
 Test Cases: Specific test cases to be executed for each feature or functionality.
 Test Execution: Schedule and sequence of test execution.
5.7 Earned-value and burn charts
 Earned Value analysis provides insights into the project's progress and performance,
comparing the planned progress to the actual progress.
 Contents of Earned Value Analysis :
 Planned Value (PV): The estimated value of the work planned to be completed
at a specific point in time.
 Earned Value (EV): The value of the work actually completed at that same
point in time.
 Actual Cost (AC): The actual cost incurred for the work completed.
 Cost Performance Index (CPI): The ratio of EV to AC, indicating cost
efficiency.
 Schedule Performance Index (SPI): The ratio of EV to PV, indicating schedule
efficiency.

Jelanshi Shah (225750694034) Page 23


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

6. Proposed Enhancements

● In future planning we are planning to add social media integration in this product if it
is possible so it is very easy to manage a social media of a blissful bazar and send a
product photos and many more videos and other things.

● In future we are planning to put a payment get way automatic to send a salary to all
person based on there work timing.
● This is a main thing for all we want to Enhancement in our product

Jelanshi Shah (225750694034) Page 24


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

7. Conclusion

● In conclusion I only want to say this is a mainly focus product to sell only andit make
a easy and reliable solution for all product instead of manual selling systems.
● This system is purely selling product It can manage a web application and many more
things and it is easy to understand for a professionals and make a reliable solution for
a call centers.

Jelanshi Shah (225750694034) Page 25


Krishna Patel (225750694031)
GMCC,Bhavnagar Blissful Bazar

8. Bibliography

● Video Tutorial – YouTube


● www.justdial.com
● www.abcvanrental.com
● http://www.w3schools.com
● https://www.mongodb.com

Jelanshi Shah (225750694034) Page 26


Krishna Patel (225750694031)

You might also like