Lifestyle E-commerce Website

A Minor Project report submission for the partial fulfillment of the requirement for the award of the degree

B.TECH. (IT)

Submitted By:
Yaksh Sharma (215/UIT/054)
Prachi Verma (215/UIT/065)
Kashish Gautam (215/UIT/067)
Sukriti Nautiyal (225/LIT/001)

UNDER THE SUPERVISION OF

Mr. Vishvajeet Yadav

(Faculty Associate)

SCHOOL OF INFORMATION AND COMMUNICATION TECHNOLOGY

GAUTAM BUDDHA UNIVERSITY

GREATER NOIDA —201312, GAUTAM BUDDHA NAGAR

UTTAR PRADESH, INDIA

October-2024
 SCHOOL OF INFORMATION AND COMMUNICATION TECHNOLOGY
GAUTAM BUDDHA UNIVERSITY, GREATER NOIDA, 201312, U. P., (INDIA)

Candidate's Declaration

We, hereby. certify that the work embodied in this project report entitled "Lifestyle E-

Commerce Website" in partial fulfillment of the requirements for the award of the degree of

B. Tech (Information Technology). Submitted to the School of Information and Communication

Technology, Gautam Buddha University, Greater Noida is an authentic record of our own

work carried out under the supervision of Mr. Vishvajeet Yadav, School of ICT. The matter

presented in this report has not been submitted in any other University / Institute for the

award of any other degree or diploma. Responsibility for any plagiarism related issue stands

solely with us.

NAME: Yaksh Sharma ROLL NO.: 215/UIT/054 SIGNATURE:

NAME: Prachi Verma ROLL NO.: 215/UIT/065 SIGNATURE:
NAME: Kashish Gautam ROLL NO.: 215/UIT/067 SIGNATURE:
NAME: Sukriti Nautiyal ROLL NO.: 225/LIT/001 SIGNATURE:

This is to certify that the above statement made by the candidates is correct to the best of
my knowledge and belief. However, responsibility for any plagiarism related issue solely
stands the students.

Signature of the Supervisor:

Name with Designation: Mr. Vishvajeet Yadav (Faculty Associate)

Date: Place: Greater Noida

1
 Acknowledgement
We have taken efforts in this project. However., it would not have been possible without the
kind support and help of many individuals and organizations. I would like to extend my
sincere thanks to all of them.
We are highly indebted to Mr. Vishvajeet Yadav 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 thank Dean of ICT Prof. Sanjay Kumar Sharma, and HOD of IT, Dr.
Neeta Singh whose work helped me to complete my project. I would like to express my
gratitude towards my friends & family member for their kind co-operation and
encouragement which help me in completion of this project.

2
 Table Of Contents
1. Candidate’s Declaration……………………………………………………………………….1
2. Acknowledgement……………………………………………………………………………..2
3. List of Abbreviations…………………………………………………………………………..4
4. List Of Figures………………………………………………………………………………...5
5. Abstract…………………………………………………………………………………….….6
Chapter 1: Introduction…………………………………………………………………...…...7
Chapter 2: Literature Overview………………………………………………………………..8
Chapter 3: Objectives………………………………………………………………………….9
Chapter 4: Front-End Overview……………………………………………………………...10
o HTML
o CSS
o Bootstrap
o JavaScript
Chapter 5: Project Design & Requirements………………………………………………….11
o Home Page Design
o Responsive Design
o Product Display
o User Experience and Navigation
o Cross-Browser Compatibility
Chapter 6: Future Work………………………………………………………………………14
o Backend
o Database
6. Conclusion……………………………………………………………………………………17
7. References……………………………………………………………………………………18

3
List Of Abbreviations
1. HTML – Hyper Text Markup Language
2. CSS - Cascading Style Sheets
3. JS – JavaScript
4. CRUD - Create, Read, Update, Delete
5. UI - User Interface
6. UX - User Experience
7. EJS - Embedded JavaScript
8. SSL - Secure Sockets Layer
9. API - Application Programming Interface
10. NoSQL - Not Only SQL
11. AI - Artificial Intelligence
12. RBAC - Role-Based Access Control
13. ER - Entity-Relationship
14. MDN - Mozilla Developer Network
15. VS Code - Visual Studio Code
16. GTmetrix - Google Tools Metrix
17. GSC - Global Scientific Community
18. m-commerce - Mobile Commerce
19. REST - Representational State Transfer
20. AI-powered - Artificial Intelligence powered
21. URL - Uniform Resource Locator
22. SQL - Structured Query Language
23. JSON - JavaScript Object Notation
24. W3C - World Wide Web Consortium
25. CDN - Content Delivery Network
26. OMR - Optical Mark Recognition
27. OTP - One-Time Password
28. T&C - Terms and Conditions
29. GB - Gigabyte
30. OTP - One-Time Password
31. HTTPS – Hyper Text Transfer Protocol Secure

4
 List Of Figures
Fig 5.1 Home Page Design……………………………………………………………………
11
Fig 5.2 Signup
Page…………………………………………………………………………..12
Fig 5.3 Login Page……………………………………………………………………………
12
Fig 5.4 Product Display………………………………………………………………………13

5
 Abstract
This project focuses on building the front-end of an e-commerce website called "Lifestyle
Store," aimed at providing a seamless and user-friendly experience for customers. The
platform includes essential elements like a navigation bar, product display sections, and a
dynamic banner. Technologies used include HTML, CSS, Bootstrap, and JavaScript, ensuring
responsiveness and ease of use across devices. The future scope of the project involves back-
end development for user authentication, product management, and payment processing.

6
 Chapter 1: Introduction

The Lifestyle Store e-commerce website is designed to offer an intuitive shopping

experience. It provides users with the ability to explore a wide range of lifestyle products
through an interactive and visually appealing interface. The project aims to focus on two key
aspects: user experience and responsiveness. The current report details the front-end
development of the website, covering all technologies used to design and implement the user
interface. Future enhancements include a fully functional backend with a database and secure
payment processing.

7
 Chapter 2: Literature Overview

The Impact of AI and Omnichannel Strategies on Lifestyle E-Commerce:

In recent years, the lifestyle e-commerce industry has undergone a significant transformation,
with new technologies and strategies reshaping the way consumers interact with online
platforms. Research from 2023-2024 highlights the pivotal role that artificial intelligence (AI)
and omnichannel strategies play in this evolution.

AI-driven personalization has emerged as a critical tool in e-commerce. Through the use of
machine learning algorithms, businesses are now able to offer personalized recommendations
that enhance customer engagement and satisfaction. AI systems like recommendation engines
analyze user behavior and preferences, creating tailored shopping experiences that
significantly influence consumer purchasing decisions. This trend is especially prominent in
major e-commerce platforms, where personalized recommendations are linked to higher
conversion rates and customer loyalty (Widayanti et al., 2023; Donmezer et al., 2023).
Companies such as Amazon and Netflix exemplify the effectiveness of AI-driven
personalization, using advanced algorithms to recommend products and content based on user
history and preferences(GSC Online Press).

The shift towards omnichannel retailing is another crucial development. Omnichannel

strategies integrate online and offline channels to provide a seamless shopping experience,
enhancing customer engagement across multiple touchpoints. This strategy is becoming
increasingly common, as consumers now expect a unified experience whether they are
shopping on a website, mobile app, or in-store. Research shows that companies adopting
omnichannel approaches tend to outperform those with a singular focus, as they provide
customers with more flexibility in how they interact with the brand (Pandey et al., 2021). For
example, combining AI-driven chatbots and virtual assistants with omnichannel retailing can
enhance customer service, providing immediate responses to customer queries and improving
the overall shopping experience(IJCRT).

Moreover, the adoption of mobile commerce (m-commerce) is on the rise, with a growing
number of consumers making purchases directly through mobile platforms. This shift
requires e-commerce businesses to optimize their mobile interfaces, ensuring that the user
experience is smooth and intuitive. Personalized mobile experiences, backed by AI, are
expected to drive continued growth in this sector(IJCRT).

In conclusion, lifestyle e-commerce in 2023-2024 is increasingly defined by the integration

of AI and omnichannel strategies. These technologies are enhancing personalization,
improving customer satisfaction, and driving business success, making them indispensable
tools for any e-commerce platform aiming to thrive in the competitive digital marketplace.

8
 Chapter 3: Objectives

3.1 User Friendly Interface

To design and develop the front-end of the Lifestyle E-commerce website using
modern technologies such as HTML, CSS, Bootstrap, and JavaScript, ensuring a
visually appealing and user-friendly interface.

3.2 Seamless Usability

To create a fully responsive design using Bootstrap's grid system, ensuring seamless
usability across various devices including mobile phones, tablets, and desktops.

3.3 User Engagement

To implement core e-commerce features such as dynamic product display, interactive

navigation, and a banner that improves user engagement.

3.4 Cross Browser Compatibility

To ensure cross-browser compatibility, providing a consistent experience across major

web browsers such as Chrome, Firefox, and Edge.

3.5 Solid Foundation

To establish a solid foundation for future integration with back-end systems, including
user authentication, product management, and payment gateways using Node.js,
Express, and MongoDB.

9
 Chapter 4: Front-End Overview

HTML:
HTML (HyperText Markup Language) forms the structural backbone of the website. It is
used to define key elements like navigation bars, banners, product sections, and footers. Each
section is semantically structured to ensure clarity and organization, making the website
accessible and easy to navigate.
CSS:
CSS (Cascading Style Sheets) was used to style the website. The goal was to create a modern
and visually appealing layout, focusing on clean design principles, font choices, color
schemes, and positioning of elements. Media queries were used to ensure responsiveness.
Bootstrap:
Bootstrap's grid system was implemented to ensure the website’s layout adjusts seamlessly
across different screen sizes. Pre-defined classes for buttons, forms, and the navigation bar
were also used to accelerate development and maintain consistency.
JavaScript:
JavaScript was incorporated to handle minor interactivity, such as button effects and potential
dynamic updates. This enhances the overall user experience.

10
 Chapter 5: Project Design & Requirements

Home Page Design

The home page is the face of the website, featuring a welcoming layout with a prominent
banner. This banner includes a call-to-action button encouraging users to “Shop Now.” The
navbar allows easy navigation, and the product display section showcases featured items.
Each product is highlighted using high-quality images and descriptive text, helping users
make informed purchase decisions.
The layout was designed using Bootstrap’s grid system, ensuring that all elements are aligned
correctly and scale smoothly across different devices. CSS was used to style the banner, text,
and buttons, ensuring a professional and appealing look.

Responsive Design
One of the primary goals of the project was to make the website fully responsive. Bootstrap’s
grid system played a crucial role in achieving this by dividing the page into a 12-column
layout. The site was tested across various screen resolutions (mobile, tablet, and desktop),
ensuring that the content adapts well without breaking the layout.
Additionally, media queries were used to apply specific styles for different screen sizes, such
as adjusting font sizes and button dimensions. This ensures that the website remains user-
friendly on any device, improving user experience and engagement.

Fig.5.1 Home page of website.

11
Fig.5.2 Signup page

Fig.5.3 Login Page

Product Display
The product display section is one of the core elements of the website. Each product is
presented using a thumbnail image, a brief description, and an option to explore further.
Bootstrap’s thumbnail component was used to arrange products in a grid layout, ensuring
uniformity.
The hover effects were added using CSS to make the product cards interactive. The layout is
designed to be expandable, allowing more products to be added without compromising the
structure.

12
Fig.5.4 Product Display

User Experience and Navigation

User experience is a key focus of this project. The navbar was designed to be accessible and
intuitive, allowing users to easily navigate through the website. It includes links to important
sections like Sign-Up, Login, and Products. The navbar is also responsive, collapsing into a
hamburger menu on smaller screens to save space.
To enhance user interaction, the call-to-action buttons were styled using Bootstrap’s button
classes. These buttons guide users toward performing actions such as browsing products or
registering on the website.

Cross-Browser Compatibility
Cross-browser compatibility was another important aspect of the front-end development. The
website was tested across different browsers such as Google Chrome, Mozilla Firefox,
Safari, and Microsoft Edge. The use of standardized web technologies like HTML5, CSS3,
and Bootstrap ensured that the website looks and functions consistently across all platforms.
Additionally, JavaScript was used sparingly to avoid potential issues with older browser
versions.

13
 Chapter 6: Future Work

Backend Development
In future phases of this project, the focus will shift toward building the backend
infrastructure to transform the website into a fully functional e-commerce platform. The
backend will handle various critical aspects such as user authentication, shopping cart
management, order processing, and secure checkout.
Technologies to be Used
1. Node.js:
Node.js will be used as the core server-side technology. Known for its efficiency and
scalability, Node.js is a powerful platform for building fast and scalable web applications.
With its event-driven, non-blocking I/O model, it will allow the website to handle multiple
concurrent requests, making it ideal for an e-commerce platform where users interact
dynamically with the system.
2. Express.js:
Express.js, a fast and minimalist web framework for Node.js, will be utilized to handle HTTP
requests, route management, and middleware integration. Express will simplify the process of
creating RESTful APIs for managing product data, user sessions, and shopping carts. It will
also allow the server to communicate effectively with the frontend.
3. EJS (Embedded JavaScript Templates):
For the frontend rendering on the server side, EJS will be used. EJS allows for seamless
integration of JavaScript code directly into HTML files, making it easier to render dynamic
content such as product listings, user information, and order summaries. EJS will enable the
backend to serve fully rendered HTML pages to the client, providing a smooth user
experience.
4. MongoDB:
The database of choice for the project will be MongoDB. A NoSQL database, MongoDB is
well-suited for handling large volumes of unstructured data. It will store product information,
user details, orders, and shopping cart data. MongoDB’s flexibility and scalability will
support the platform as it grows, allowing it to easily accommodate new products, user
accounts, and transactional data.
Backend features:
 User Authentication:
The backend will handle secure user authentication, enabling users to create accounts, log in,
and manage their profiles. This feature will include user registration with encrypted
passwords using crypt or similar hashing algorithms to ensure that sensitive information is
securely stored in the database.
Session Management:
Using Express sessions and cookies, the backend will maintain session data for logged-in

14
users. This will enable personalized features such as saving items in the shopping cart and
tracking order histories.
 Shopping Cart Functionality:
The shopping cart will be a key feature of the website, allowing users to add or remove
products, adjust quantities, and proceed to checkout. The cart data will be stored in
MongoDB, ensuring persistence even when users navigate away from the page or log out.
 Secure Checkout Process:
The checkout process will include secure order submission, billing, and shipping details.
Payment gateway integration using third-party APIs such as Stripe or PayPal will be
incorporated to handle real-time payment processing. The backend will ensure that
transactions are processed securely and that sensitive data (e.g., credit card information) is
encrypted during transmission.
 Order Management:
Users will be able to view and manage their orders after checkout. The backend will handle
order status tracking, updating the inventory in real-time, and notifying the user via email or
dashboard updates. This feature will include the ability to check delivery statuses, modify
orders, or cancel them if necessary.
Product Management:
An admin panel will be implemented to manage products, including adding new items,
updating product details, and removing discontinued products from the database. This feature
will be crucial for maintaining an up-to-date product catalog on the front-end.
 Data Encryption and Security:
Security is a top priority for e-commerce websites. The backend will use HTTPS for secure
communication, ensuring that all data transfers between the server and clients are encrypted.
In addition to encrypting sensitive information, role-based access control (RBAC) will be
implemented to restrict certain functionalities to authorized users (e.g., admin access for
product management).
 API Development:
RESTful APIs will be developed using Express.js to enable communication between the
frontend and backend. These APIs will facilitate operations such as fetching product details,
adding items to the cart, handling user authentication, and processing orders. The APIs will
be designed to be stateless and scalable to handle future expansion.
 Search and Filter Functionality:
MongoDB’s querying capabilities will be used to implement efficient search and filter
features. Users will be able to search for products by category, price range, and other
attributes. This will significantly enhance the user experience, allowing for more personalized
and efficient browsing.

Database Design (Future Work)

The database will play a crucial role in managing user information, products, and orders. In
the future, an ER (Entity-Relationship) diagram will be created to represent the

15
relationships between different entities, such as users, products, and orders. A database
schema will be designed using relational or NoSQL databases to efficiently store and retrieve
data.
This future work will also involve setting up data migration strategies, implementing SQL
queries for CRUD (Create, Read, Update, Delete) operations, and indexing databases for
faster performances.
Security Measures (Future Work)
Security is a priority for any e-commerce website. In future iterations, security measures will
be implemented, such as SSL encryption for data transmission, user authentication and
authorization, and secure storage of sensitive data such as passwords and payment details.
Payment gateways will be integrated using secure protocols to ensure user data is protected
during transactions.
User Testing and Feedback
The front-end design was tested with multiple users to gather feedback on usability,
responsiveness, and visual appeal. Users appreciated the clean and organized layout, as well
as the easy navigation. Suggestions were collected to improve the design in future iterations,
such as adding filters and sorting options in the product section.
Based on this feedback, additional improvements will be made in the next development cycle
to further enhance user experience.
Accessibility Features
Accessibility is an important consideration in the development of the website. Efforts were
made to ensure the site is accessible to users with disabilities. Alt text was added to all
images, and semantic HTML tags were used to improve screen reader compatibility. The
website’s colour scheme was chosen to provide sufficient contrast for users with visual
impairments.
In future iterations, further accessibility improvements will be made, including keyboard
navigation and ARIA labels.
Performance Optimization
Website performance is a crucial factor in user experience. Various techniques were
employed to optimize the performance of the front-end. Image compression was used to
reduce file sizes without losing quality, while minification of CSS and JavaScript files was
applied to reduce load times.
Tools such as Google Page Speed Insights and GTmetrix were used to analyze the
website’s performance, and adjustments were made to ensure quick loading times, especially
on mobile devices.

16
17
 Conclusion

The current phase of the Lifestyle E-commerce Website successfully focuses on the front-
end development, creating a responsive, visually appealing, and user-friendly interface. Built
using modern web technologies such as HTML, CSS, JavaScript, and Bootstrap, the front-
end offers seamless navigation, product showcases, and promotional elements. Key features
include a fixed navigation bar, a visually engaging banner with a clear call-to-action, and a
grid-based product display optimized for all device sizes.
While the current implementation emphasizes user experience and aesthetics, it lays the
groundwork for future integration with the backend. In the next phases, technologies like
Node.js, Express.js, and MongoDB will be introduced to manage user authentication,
product management, and secure transactions, transforming the website into a fully functional
e-commerce platform. This phase ensures a solid and scalable foundation for the continued
development of the project.

18
 References
The following references were used throughout the development of the Lifestyle Store e-
commerce website:
1. Bootstrap Documentation
URL: https://getbootstrap.com
Description: Official documentation for Bootstrap, which was used for the responsive layout,
grid system, and UI components.
2. W3Schools – HTML, CSS, and JavaScript Tutorials
URL: https://www.w3schools.com
Description: A comprehensive tutorial and reference site for HTML, CSS, and JavaScript,
used to understand and implement various front-end features.
3. MDN Web Docs (Mozilla Developer Network)
URL: https://developer.mozilla.org
Description: MDN Web Docs provides detailed documentation on web technologies like
HTML5, CSS3, and JavaScript, which were crucial for understanding and implementing
modern web design principles.
4. Google Fonts
URL: https://fonts.google.com
Description: Resource for implementing web fonts such as Montserrat, which was used in the
website to enhance typography and overall visual appeal.
5. FontAwesome Documentation
URL: https://fontawesome.com
Description: Used to incorporate icons in the navigation and product sections of the website
to enhance UI design.
6. Stack Overflow
URL: https://stackoverflow.com
Description: A community-driven platform that provided solutions to coding challenges faced
during the front-end development process.
7. VS Code Documentation
URL: https://code.visualstudio.com/docs
Description: The official documentation for Visual Studio Code (VS Code), the code editor
used throughout the project for writing and managing the website’s codebase.
8. Google PageSpeed Insights
URL: https://developers.google.com/speed/pagespeed/insights
Description: Used to test and analyze the website’s performance, identifying optimization
areas for faster load times.
9. GTmetrix
URL: https://gtmetrix.com
Description: Another performance analysis tool used to gauge the site’s loading speed and
make optimizations.

19
10. W3C Validator
URL: https://validator.w3.org
Description: Used to validate the HTML and CSS code, ensuring the website conforms to
web standards and best practices.

Literature References:
11. Rahul Sharma, Shramishtha Srivastva, Sanobar Fatima “E-Commerce and Digital
Transformation: Trends, Challenges, and Implications” (October 2023) © International
Journal for Multidisciplinary Research (IJFMR)
12. Dr. Anil Varma “Future of E-commerce in India” (July 2023) ©International Journal Of
Creative Research Thoughts (IJCRT)
13. Mustafa Ayobami Raji, Hameedat Bukola Olodo, Timothy Tolulope Oke, Wilhelmina Afua
Addy, Onyeka Chrisanctus Ofodile and Adedoyin Tolulope Oyewole “E-commerce and
consumer behavior: A review of AI-powered personalization and market trends” (2024)
©GSC Advance Research and Reviews (GSC Online Press)
14. Razaz Waheeb Attar, Ahlam Almusharraf, Areej Alfawaj and Nick Hajli “New Trends in E-
Commerce Research: Linking Social Commerce and Sharing Commerce” (2022)
©MDPI

20