Let’s Bid: A Web Application for Online Auctions

Abstract

Auctions are processes where selling and buying of products takes place by offering them for a bid and the buyer with the highest bid price buys the product or the seller with lowest ask price sells the product. Due to the emergence of e-commerce , the world has become a universal marketplace which grants every individual the right to become a seller and buyer of products irrespective of geographical barriers. In this project, we aim to create a web application for online auction system where every product is offered for bidding and the interested buyers can bid on them and buy them at fair prices. We have used the ReactJS library for developing the frontend and Django for the backend development. Initially, we have created an e-commerce web application prototype with all the typical features in it like user and admin system, login / authentication system, catalogue of products, shopping cart, payment page,etc. We have introduced bidding functionality after development of the base e-commerce system. The purpose of this project is to create a simulated environment for research in this domain to test the different fraud detection algorithms for shill bidding , bid shielding, etc.

Introduction

I. INTRODUCTION

Online auction systems are a major component of the electronic commerce space which have an ever increasing popularity [1]. In these systems, a seller uploads an product online for a given set amount of time and the buyers with the highest bid purchases the product. This system allows sellers to sell their products from anywhere which eliminate the geographic limitations. In the traditional approach, web applications have been written using HTML along with embedded JavaScript code which manipulated the Document Object Model through low level browser API. React is useful to develop modular code which employs incremental update of user interfaces in response to state changes. React applications are component based in nature organized in a tree structure. A component in React has a state which varies over time along with a set of properties that represent input paremeters and a render method that specifies the subcomponents [5]. Rumpe and Wimmel [4] have given a framework for online web based auctions in their work which describes the architecture along with discussing the functional and technical requirements by  combining the standard software and self developed components. They have employed the eXtreme programming approach and its test concepts. Majadi et al., in [1] analyzed, designed and implemented a secure online auction system known to be uAuction. The authors’ aim  was to test the countermeasures for auction related frauds like shill bidding , bid shielding in a controlled environment by creating their own online auction server. The authors have presented an analysis and design of their system by making use of the Unified Modeling Language (UML) to show the architectural model, subsystems, use cases, activity workflows, class diagram, user interfaces, and system sequence diagrams. A web based auction system was designed using UML and implemented using ASP.net programming language and Microsoft Access 2010 by Aldaej, Razan[2].  In their work, they introduced a practical case study to emphasize the use of best practices to analyze and design an online auction system.  In their proposed Online Web-based Auction System, the UML helped them to update and  add new functions using use case, sequence and class diagrams. Ren [3] used the UML technique to present a concept for an online auction system based on the campus network. For designing the scheme of the auction system, they made the use of activity diagrams, case diagrams, sequence diagrams, class diagrams, and deployment diagrams. To build the campus electronic commerce , this scheme provided certain reference values which also helped to realize the digital campus.

II. SYSTEM ANALYSIS

We have made the use of UML to design this web application using class diagrams, sequence diagrams, data flow diagrams, etc. The UML has been developed to reduce the life cycle of system development and to easily maintain the system along with increasing module reusability  [2]. In case of our system, we have used React which employs the use of reusable components which eases the frontend development process as compared to developing it using HTML and JavaScript to develop dynamic pages. We have used the functional components in React along with hooks as functional variables do not have their own state variables like class based components [6]. For the server side development , we have used Django as it has extensive support for libraries and is easy to work with. Since our application focuses on scalability , Django offers to be the best-fit for backend development [7].

A. Use Case Diagram

A use case diagram is used to identify, clarify and organize user requirements and shows how a system interacts with the external entities. There are three participants in our system – bidder , seller and admin. Each one has their own use cases like:

1. Bidder

a. Bidder can search for a product

b. Bidder can view product details

c. Bidder can make a bid for product

d. Bidder can edit profile information.

e. Ask questions about product

2. Seller

a. Seller can post a product

b. Seller can allot time limit and initial price for product bidding.

c. Seller can view bidding information

d. Seller can edit profile information

3. Admin

a. Admin can manage products 

b. Admin can manage users

c. Admin can manage bidding

d. Admin can view visualizations for bidding data.

B. Sequence Diagram

A sequence diagram shows the interaction between different objects in a sequential manner. It depicts the order of interaction between objects in the system. These diagrams are used to analyse and model the usage scenarios in the system. For example, in our system, the given sequence diagram is drawn for a buyer who bids for the first time on a product.

???????C. Class Diagram

The class diagram helps to define the kinds of objects that are present in the system and describes the static relationships between the system internal classes .It shows the attributes and operations of a class along with the constraints that apply that apply to the objects connection [9].

???????D. Data Flow Diagram

Data flow diagrams are used to present the data transformation in the system and serves as a visual tool to depict logical models. Data flow diagrams help in the analysis and requirement stage of development to model the details of the data flows in the system. According to the degree of detail, data flow diagrams are of three levels, level 0 , level 1 and level 2. The main components of data flow diagrams are process, data flow , data store and external entity.

III. SYSTEM IMPLEMENTATION

The customer has to register themselves in the application to enter the application. The registered users can login into the system using their usernames and passwords. The customer searches for the product of their choice and places a bid for a given product which is recorded in a database. Other customers who view the product also place their bids on the product which is visible to all those who view the product. The bidding policy implemented is given below:

After every bid, we increase the reserve price of the product by 10 percent. The price of the product is incremented using compounding. The idea behind using compounding is to reduce the number of bids after a given number of bids are placed. The product also has a bid timer which shows the time for which bidding on the product is active.

A. For the Frontend of the Application

1. We import all the necessary libraries for developing the components for the frontend of the system.
2. Since React supports development of single page applications, we create only a single file index.html and index.js
3. First , we developed the product.js file to create the catalogue of products in the frontend. We add all the features to this component so that it looks like a proper e-commerce product card.
4. We make use of jsx to decide how should each product card look like and also for the other components like buttons, textboxes, etc.

B. For the Backend of the Application

1. For the backend , we make use of Axios to communicate with the backend to make requests to an API, return data from the API and to do changes with the data in the React application.
2. We declare the route path in axios as to perform HTTP requests.
3. Initially, we used the React Redux store dispatch to reflect changes from backend to the frontend of the system.
4. After any changes are made in the frontend, they are sent to the actions.js file through which asynchronous requests are sent through Axios and changes are made in the backend and results are displayed on the frontend.

IV. RESULT

1. The product interface shows the product details along with it’s initial price and status with the option to bid on the product.

2. The bidding summary interface displays the count of bidders on a given product along with the visualization of bid price progression over time.

3. The user information model in the Django based backend shows the details of the users registered in the application

V. ACKNOWLEDGEMENT

This paper and the research behind it would not have been possible without the exceptional support of our project guide and

supervisor, Mr. Shirish Sabnis. His enthusiasm, knowledge and exact attention to detail have been an inspiration and kept the work on track from the beginning. We would also like to thank our friends and family who supported us and also offered deep insight into the study.

Conclusion

This paper employs the best practices in building a web application for online auctions. We have designed, analyzed and implemented a web application for online auctions using UML, React library and Django framework. We have used UML to add functions using class diagrams, use case diagrams, data flow diagrams, sequence diagrams,etc. The application allows the bidder for quick bidding and sellers to achieve maximum profit. React library allows the development of a single page application which does not reload while navigating through each page.The backend of the system is developed by using the Django framework which makes it easier to achieve modular development. Future works involve adding new functionalities to the system like verifying users’ identity, support different types of auctions, a mechanism to remove spurious and inactive accounts to improve system performance.

References

[1] Majadi, Nazia, Jarrod Trevathan, and Neil Bergmann. \"uAuction: Analysis, design, and implementation of a secure online auction system.\" 2016 IEEE 14th Intl Conf on Dependable, Autonomic and Secure Computing, 14th Intl Conf on Pervasive Intelligence and Computing, 2nd Intl Conf on Big Data Intelligence and Computing and Cyber Science and Technology Congress (DASC/PiCom/DataCom/CyberSciTech). IEEE, 2016. [2] Aldaej, Razan, et al. \"Analyzing, Designing and Implementing a Web-Based Auction online System.\" International Journal of Applied Engineering Research 13.10 (2018): 8005-8013. [3] Ren, Chuancheng. \"Research and design of online auction system based on the campus network using uml.\" 2009 Second Pacific-Asia Conference on Web Mining and Web-based Application. IEEE, 2009. [4] Rumpe, Bernhard, and Guido Wimmel. \"A framework for realtime online auctions.\" arXiv preprint arXiv:1409.6592 (2014). [5] Madsen, Magnus, Ondrej Lhotak, and Frank Tip. \"A Semantics for the Essence of React.\" European Conference on Object-Oriented Programming. 2020. [6] https://www.geeksforgeeks.org/reactjs-functional-components/ [7] Ghimire, Devndra. \"Comparative study on Python web frameworks: Flask and Django.\" (2020). [8] Li, Q., & Chen, Y. L. (2009). Data flow diagram. In Modeling and Analysis of Enterprise and Information Systems (pp. 85-97). Springer, Berlin, Heidelberg. [9] Rajagopal, Deepak, and K. Thilakavalli. \"A Study: Uml For Ooa And Ood.\" International Journal of Knowledge Content Development & Technology 7.2 (2017): 5-20.

Copyright

Copyright © 2022 Shaunak Pethe, Huzaifah Munshi, Abhishek Polekar, Shirish Sabnis. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.