Adding Real-Time Bidding Capabilities to the Marketplace

In a world more connected than ever before, instant communication and real-time updates are expected behaviors in any application that enables interaction between users. Adding real-time features to your application can keep your users engaged, and because of that, they will be spending more time on your platform. In this chapter, we will learn how to use the MERN stack technologies, along with Socket.IO, to easily integrate real-time behavior in a full-stack application. We will do this by incorporating an auctioning feature with real-time bidding capabilities in the MERN Marketplace application that we developed in Chapter 7, Exercising MERN Skills with an Online Marketplace, and Chapter 8, Extending the Marketplace for Orders and Payments. After going through the implementation of this auction and bidding feature, you...

Introducing real-time bidding in the MERN Marketplace

The MERN Marketplace application already allows its users to become sellers and maintain shops with products that can be bought by regular users. In this chapter, we will extend these functionalities to allow sellers to create auctions for items that other users can place bids on in a fixed duration of time. The auction view will describe the item for sale and let signed in users place bids when the auction is live. Different users can place their own bids, and also see other users placing bids in real-time, with the view updating accordingly. The completed auction view, with an auction in a live state, will render as follows:

The code for the complete MERN Marketplace application is available on GitHub at https://github.com/PacktPublishing/Full-Stack-React-Projects-Second-Edition/tree/master/Chapter09/mern-marketplace-bidding...

Adding auctions to the marketplace

In the MERN Marketplace, we will allow a user who is signed in and has an active seller account to create auctions for items that they want other users to place bids on. To enable the features of adding and managing auctions, we will need to define how to store auction details and implement the full-stack slices that will let users create, access and update auctions on the platform. In the following sections, we will build out this auction module for the application. First, we will define the auction model with a Mongoose Schema for storing details about each auction. Then, we will discuss implementations for the backend APIs and frontend views that are needed to create new auctions, list auctions that are ongoing, created by the same seller and bid on by the same user, and modify existing auctions by either editing details of, or deleting an...

Displaying the auction view

The view for displaying a single auction will contain the core functionality of the real-time auction and bidding features for the marketplace. Before getting into the implementation of real-time bidding, we will set up the full-stack slice for retrieving details of a single auction and display these details in a React component that will house the auction display, timer, and bidding capabilities. In the following sections, we will start by discussing the backend API for fetching a single auction. Then, we will look at the implementation of an Auction component, which will use this API to retrieve and display the auction details, along with the state of the auction. To give users a real-time update of the state of the auction, we will also implement a timer in this view to indicate the time left until a live auction ends.

...

Implementing real-time bidding with Socket.IO

Users who are signed in to the marketplace platform will be able to take part in live auctions. They will be able to place their bids and get real-time updates in the same view while other users on the platform are countering their bids. To implement this functionality, we will integrate Socket.IO with our full-stack MERN application before implementing the frontend interface to allow users to place their bids and see the changing bidding history.

Integrating Socket.IO

Socket.IO will allow us to add the real-time bidding feature to auctions in the marketplace application. Socket.IO is a JavaScript library with a client-side module that runs in the browser and a server-side module...

Summary

In this chapter, we extended the MERN Marketplace application and added an auctioning feature with real-time bidding capabilities. We designed an auction model for storing auction and bidding details and implemented the full-stack CRUD functionalities that allow users to create new auctions, edit and delete auctions, and see different lists of auctions, along with individual auctions.

We added an auction view representing a single auction where users can watch and participate in the auction. In the view, we calculated and rendered the current state of the given auction, along with a countdown timer for live auctions. While implementing this timer that counts down seconds, we learned how to use setTimeout in a React component with the useEffect hook.

For each auction, we implemented real-time bidding capabilities using Socket.IO. We discussed how to integrate Socket.IO...