11 IV April 2023

https://doi.org/10.22214/ijraset.2023.50318
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 11 Issue IV Apr 2023- Available at www.ijraset.com

Developing An E-Commerce Web Application with

ReactJS and Firebase
Ashwini Yerlekar1, Vipul Rajpurohit2, Shreyas Kunte3, Nakul Shende4, Tushar Kamble5, Shreyash Ingole6, Shubham
Admane7
1, 2, 3, 4, 5, 6, 7
Computer Science and Engineering RGCER Nagpur, India

Abstract: With the rise of e-commerce platforms, shopping is now possible anytime, anywhere. Web application development is a
great solution for the shopping needs of people who want to avoid the hassle of physical stores. The web application will provide
users with a user-friendly interface that will allow them to easily purchase a wide range of products. This app will include
various features like product search, filtering, sorting, shopping cart management, payment gateway integration. In
contemporary times, most people use technology to live their lives and meet their daily needs. In this generation, most of us use
e-commerce sites to buy clothes, groceries, and electronics. Additionally, this app will provide users with personalized
recommendations based on their purchase history, search history, and preferences. The application is designed to provide users
with stable and fast engagement. All in all, it will provide a convenient and a safe platform for users to purchase products online.
With its powerful features and modern technology, the app will help users save time and effort while providing a hassle-free
shopping experience.Loading time and minimalist design. The ambition of this article is to discuss the development of an app
that provides users with a seamless shopping experience while ensuring security and comfort.
Keywords: REACT, NODE JS, STRIPE, JAVASCRIPT, FIREBASE , HTML, CSS

I. INTRODUCTION
E-commerce web applications have developed from traditional brick-and-mortar stores to online platforms, making it simple for
people to buy products from the comfort of their homes. With the increase in the use of smartphones, web application development
is a great solution for those who want to shop at any moment in any place. It allows users to browse a wide range of products,
compare prices and make purchases directly from their mobile devices.
The internet has become an integral part of our daily lives, particularly during the current pandemic crisis, with an estimated 5.25
billion active internet users worldwide. With the convenience of online shopping, e-commerce has seen significant growth,
particularly in the mobile sector, which generated 56.8% of all internet traffic in 2020. However, slow loading times have caused
users to switch to native applications for their daily internet activities, leading to a decline in web browsing time.
In response to this trend, this thesis focuses on developing a functional and responsive e-commerce web application prototype for
small businesses. The use of JavaScript, particularly the ReactJS library, is emphasized as a powerful tool to create dynamic and
user-friendly websites that respond to user requests. Additionally, the Firebase cloud service is utilized to handle data management
and authentication.
The primary aim of this thesis is to provide an e-commerce web application that includes basic features such as product viewing and
purchasing, order handling, and an admin panel for managing products and orders. By combining ReactJS and Firebase, this web
application is expected to provide an efficient and user-friendly experience to potential customers[5].

II. LITERATURE SURVEY

1) “Design and Development of E-Commerce Web Application” E-commerce web application, Cooperative Store Management
System is a platform for customers to shop online without physically visiting the store. It is designed to reduce sellers' workload
and minimize manual errors by automatically recording entries. Customers can significantly reduce the costs and wasted time
of using the system. In addition, customers benefit from better services and can make their purchases at their convenience since
they are available at home. This not only helps attract new customers, but also retains old ones, which ultimately contributes to
the long-term growth of the business.
2) “E-Commerce Web Application “ HTML5, CSS and JavaScript and some of their libraries as frontend and Firebase as
backend. JavaScript library to manage dynamic database content and Firebase to build the whole e-commerce site.

©IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 1529
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 11 Issue IV Apr 2023- Available at www.ijraset.com

Many web developers use it to create dynamic web pages, this technique allows the web page to be updated asynchronously by
exchanging small amounts of data with the server in the background, so that different parts of the web page can be updated to
make it work properly, without reloading all the pages in any way, it also helps developers to make web pages interactive and
dynamic.
3) “Developing an E-commerce application prototype with React JS and Firebase” In this article, we aim to explain the process of
developing an e-commerce application using React JS and Firebase Services. Along with a brief description of e-commerce,
this article examines the fundamentals of React JS and Firebase. At the heart of the process is creating a conceptual framework
for Firebase that leverages its tools and services. The result of the project based on this thesis is a prototype of an e-commerce
online store.
4) “Building an E-commerce Application Utilizing Firebase Cloud service” The thesis project resulted in the creation of an e-
commerce application prototype. The purpose of the application is to allow individuals to buy and sell things related to their
own needs. E-commerce websites exist as utilities that help businesses process orders, receive payments, and manage logistics.
Overall, all key aspects of a working prototype application were successfully implemented, except for some that were excluded
for various reasons.
5) “Internship on Web-Based-Commerce Application Development at Bangla Soft Computer using React JS” Web application
development is an important topic for e-commerce websites. People can browse, select products, and order from the company,
which will ship within days. We plan to change and make some changes to this site.
6) “E-Commerce Web Shop” After implementing the topic and systematically covering the basics of Spring Boot, React JS,
MySQL and a few other technologies and techniques for building enterprise Java applications on the web, it is useful to provide
an overview of Spring Framework as well than understanding the basics. framework principles and working mechanisms.
7) “Enhancing E-Commerce with Modern Web Technologies”. The purpose of this article is to study new developments in the
field of web development and use them to create e-commerce web applications. The application implemented in this article
adopts a headless architecture, which separates the backend and frontend logic. This optimizes the front-end of the app and
builds progressive web apps.
8) “Designing and Developing a Website with React Js” The main objective of this thesis is to design and develop a user-friendly
and responsive website for a restaurant. The motivation of this article is also to learn and implement progressive web
applications. The main objective of this thesis is to learn and implement ReactJS to develop a website for the restaurant
"Ravintola Sargam". The desire to learn and implement Progressive Web Apps on a website adds extra motivation.

III. PROBLEM STATEMENT

Today, most consumers prefer to shop online through mobile apps. However, many shopping apps have poor user interfaces, a lack
of personalized recommendations, and insufficient payment security. As a result, consumers may find it difficult to browse vast
catalogs of products, make informed purchasing decisions, and transact seamlessly.
Current web applications for shopping apps lack modern web technologies and user experience as the apps are built using
traditional web development frameworks that do not provide responsive design and efficient data management. As a result, users
may not be able to access the app on multiple devices, experience slow page load times, and experience issues searching for
products. Some apps also lack essential features like real-time product availability updates, user-specific recommendations, and
smooth navigation. To solve these problems, it is necessary to have a shopping application that offers a user-friendly interface, safe
and convenient payment options and efficient post-purchase services. Therefore, the app should be designed to enhance the overall
shopping experience and provide users with a hassle-free environment.

IV. PROPOSED WORK

The project is a full-stack e-commerce application using React, JavaScript, Node Js, Stripe, and Firebase. It consists of five primary
pages - the authentication page, homepage, cart, orders, and logout. React with Node.js and DOM, Google's Firebase, HTML &
CSS, JavaScript, and Visual Studio Code were used to create this web application. The first task, once we get the development
environment ready, will be to set up the React Router.
Once we have everything in place, we can start off with creating the website header, which will basically serve as the navigation
bar, as in most modern websites.
Next up is the home page building. In this project, we’ll be keeping it simple by showing all our sample products on the homepage.

©IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 1530
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 11 Issue IV Apr 2023- Available at www.ijraset.com

Then we’ll be setting up the React Context API. The Context API is a component structure provided by the React framework, which
enables us to share specific states across all levels of the application. In our project, we’ll need to manage two states: basket (to
manage the shopping cart) and user (for managing the details of the currently logged in user).
For setting up the payments functionality, we’ll be using APIs provided by Stripe.
Handling our database and authentication needs to be supported and we’ll be using Firebase for the same. Basically the database
will be used to store the login information for the users, but the resource can be used for storing product information as well.
Once we have Firebase setup, we can work on the Login page of our application.
Successful implementation of the above requirements will lead to completion of the core implementation of our e-commerce
solution.
The following diagram shows the proposed workflow of the project:

Fig.1: proposed workflow of the project.

V. FUTURE SCOPE
In the future, the use of native apps is expected to continue to grow, especially in the e-commerce market. As a result, web
developers will continue to seek out ways to provide experiences that are comparable to native apps. JavaScript will likely remain
one of the most powerful programming languages for web development. React's unique feature of generating a memory-based data
structure cache is expected to further enhance the efficiency of webpages.
More businesses will likely turn to React and Firebase to create responsive and scalable e-commerce web applications. Firebase's
cloud service will continue to be useful in managing data and authentication, while React will handle the front-end work.
Future research may focus on improving the design and architecture of e-commerce web applications, as well as enhancing the
testing procedures used to ensure their functionality. Additionally, there may be further exploration of the advantages of using
numerous services on Cloud Firebase to improve the performance of e-commerce websites. Overall, the use of React and Firebase is
expected to continue to grow as businesses seek to create high-performance, user-friendly e-commerce web applications.

VI. CONCLUSION
In comparison to most of the e-commerce applications, we can conclude that our web application is faster as it has a high response
time, more secure because Stripe provides high security. The application also provides an enhanced user interface and user
experience. Validation after placing an order via email ensures integrity and a secure environment.
Deploying and testing were conducted on different platforms. The outcome was positive because the webstore satisfies all the listed
requirements.
There are a lot of useful features in this web app, yet it is still basic as well as appealing enough for an online business. At a modest
cost, it gives customers a way to grow their company.

©IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 1531
 International Journal for Research in Applied Science & Engineering Technology (IJRASET)
ISSN: 2321-9653; IC Value: 45.98; SJ Impact Factor: 7.538
Volume 11 Issue IV Apr 2023- Available at www.ijraset.com

REFERENCES
[1] K Soundarya; M Abirami; Kumaran R senthil; D Prabakaran;B;G Nagarajan “Webapp Service for Booking Handyman Using Mongodb, Express JS, React JS,
Node JS” Baig, Mirza Jabbar Aziz, et al. "Design and implementation of an open-Source IoT and blockchain-based peer-to-peer energy trading platform using
ESP32-S2, Node-Red and, MQTT protocol." Energy reports 7 (2021): 5733-5746.
[2] Mandeep Singh Kandhari;Farhana Zulkemine “A Voice Controlled E-Commerce Web Application” Kandhari, Mandeep Singh, Farhana Zulkemine, and
Haruna Isah. "A Voice Controlled E-Commerce Web Application." 2018 IEEE 9th Annual Information Technology, Electronics and Mobile Communication
Conference (IEMCON). IEEE, 2018.
[3] Shivanshu Tyagi,Himanshi Chaudhary “Analysis and Development of E-commerce Web Application” Tyagi, Shivanshu, et al. "Analysis and Development of
E-Commerce Web Application." 2022 Fifth International Conference on Computational Intelligence and Communication Technologies (CCICT). IEEE, 2022.
[4] Tran Nham “Developing an E-Commerce Application prototype With React JS and Firebase” Nham, Tran. "Developing an E-commerce application prototype
with ReactJS and Firebase." (2022).
[5] Nhan Nguyen ”Building an E-Commerce Application utilizing Firebase Cloud Service” Nguyen, Nhan. "Building an E-commerce Application Utilizing
Firebase Cloud service." (2022).
[6] Minaa kankaala “Enhancing E-Commerce Modern Web Technologies” Kankaala, Minna. "Enhancing E-Commerce with Modern Web Technologies." (2019).
[7] Anup Satyal “ Designing and developing A Website With React JS” Satyal, Anup. "Designing and Developing a Website with ReactJS: Progressive Web
Application." (2020).
[8] Hung Viet Nguyen “End-to-end E-commerce web application, a modern approach using MERN stack” Nguyen, Hung. "End-to-end E-commerce web
application, a modern approach using MERN stack." (2020).
[9] Nagothu Diwakar Naidu , Pentapati Adarsh “E-Commerce Web Application by using MERN Technology” Naidu, Nagothu Diwakar, et al. "E-Commerce web
Application by using MERN Technology." International Journal for Modern Trends in Science and Technology 7 (2021): 1-5.
[10] YongKang Xing, JiaPeng Huang, YongYao Lai “Research and Analysis of the Front-end Frameworks and Libraries in E-Business Development” Xing,
YongKang, JiaPeng Huang, and YongYao Lai. "Research and analysis of the front-end frameworks and libraries in e-business development." Proceedings of
the 2019 11th International Conference on Computer and Automation Engineering. 2019.
[11] AN Nguyen “”Building and E-Commerce Website Using Next JS And MANTINE AND STRAPI” Nguyen, An. "Building an E-commerce Website Using
Next Js, Mantine, and Strapi." (2022)..
[12] Son Chu Hoang “Shopify Upsell App: Using Next.JS, React.JS to boost sale” Chu, Son. "Shopify Upsell App: Using Next. js, React. js to boost sale." (2020).
[13] Faria Soroni, Md. Amdadul Bari and Mohammad Monirujjaman Khan “GERAM BAZAR, A Mobile Application and Website Interface E-commerce” Soroni,
Faria, Md Amdadul Bari, and Mohammad Monirujjaman Khan. "GERAM BAZAR, A Mobile Application and Website Interface E-commerce." 2021 IEEE
World AI IoT Congress (AIIoT). IEEE, 2021.
[14] Monir Uz Zaman “BUILDING AN ANDROID E-COMMERCE APPLICATION “DAILYSHOP” Zaman, Monir Uz. "Building an Android E-Commerce
Application “Dailyshop”." (2021).
[15] Phuc Le “Development of an E-Commerce web-Site for Ngoc’s MaxiNutri Company” Le, Phuc. "Development of an eCommerce website for Ngoc’s
MaxiNutri Company." (2022).
[16] Dan Shen, Jean David Ruvuni. 2010. “A study of smoothing algorithms for item categorisation for ecommerce sites”. Shen, Dan, et al. "A study of smoothing
algorithms for item categorization on e-commerce sites." Neurocomputing 92 (2012): 54-60.
[17] Vinitha Stephie, V M. Lakshmi, “DESIGN AND IMPLEMENTATION OF E-COMMERCE WEB APPLICATION” Vinitha Stephie, V., and M. Lakshmi.
"Design and implementation of e-commerce web application." ARPN J. Eng. Appl. Sci 12.16 (2017): 4769-4772.

©IJRASET: All Rights are Reserved | SJ Impact Factor 7.538 | ISRA Journal Impact Factor 7.894 | 1532