In this tutorial, we'll show you how to build a user-friendly online auction application in React using PubNub Real-time Messaging and React-Bootstrap. The auction app will have a gallery of artwork and you can join the bidding event to place bids on the art. While placing your bids, you can simultaneously check the bids placed by other users in real time. Your app will also have a dashboard that can be used by the admin to track the viewers and their bids.
Use cases for a bidding app
Some great ideas for an auction or bidding app are:
Selling collectibles
Selling everyday items
Using it to sell clothing and luxury clothing items
Create auctions for art pieces
Real-estate
In-app purchases
And more!
Examples of online auction apps
Why use React to build an auction app?
React is a JavaScript library for building user interfaces. React gives you a template language and some function hooks to render HTML. Your bundles of HTML/JavaScript are called "components".
Components are similar to JavaScript functions. They accept arbitrary inputs called props and return React elements. These elements describe what should appear on the screen for your bidding platform.
Developers love ReactJS because it is highly performant and render changes almost instantly. The best part about ReactJS is that it is a relatively small framework and does not take too much time to learn!
How to create your bidding app
The full GitHub code repository can be found here. To get started with your auction platform, first, you’ll have to sign up for a PubNub account to get your unique publish/subscribe keys. Then, install PubNub package using the following command in your terminal. PubNub's real-time infrastructure simplifies the bidding process, ensuring a smooth user experience. Begin by installing the PubNub package in your project:
Import the required libraries.
The PubNub React Framework is a wrapper of PubNub Javascript. It adds a few extra features to simplify the integration with React. In order to get the integration between your React Components and PubNub, pubnub-react will be the way to get this without any kind of difficulty or extra job when you need to render data in your UI.
Here is how you can initialize PubNub in your application which will be providing the authentication system ensuring secure communication across your bidding system.
Let's divide the application into Bidding Portal and Admin Dashboard. The bidding portal would be used by customers to bid prices during an auction. And the dashboard can be used by the admins to track values of the auction.
Creating the Bidding Portal for your auction app
Creating Registration for your auction
Let's have a registration modal to register the user. Make the registration mandatory. This way, you can keep track of every bid that comes in from potential buyers.
Inside render():
How to create a Homepage for your bidding app
Routing helps us build a single page auction application in React. To use routing, we have to pull down React Router and React DOM:
This is how you can build a single page bidding application using routers by switching between the tabs.
Using Products – PubNub Channels in your bidding app
Products here represent different channels of PubNub in your live auction app. You can re-use React components in such a way that the buttons on different art products lead you to different channels.
The Cardholder component receives values passed by the
Here's a small code snippet of Cardholder, which can be used to build a number of products by passing different product names and their associated subtitles and description. Additionally, you can make the buttons lead you to different PubNub channels based on the product.
Placing a Bid
The most interesting part of your auction application is the page where you place the bid. The buttons on the products page lead you to their corresponding PubNub channels, which in turn lead you to the corresponding bidding pages, where you can submit the amount.
Using PubNub for Real-time Messaging for your bidding app
Building a Bidding Dashboard
Using Presence in your bidding app
Presence delivers the status of users and devices connected to PubNub's channels at any point under a millisecond. PubNub requires you to enable Presence on their PubNub Dashboard.
Here's how to enable Presence. Now you can execute this piece of code to find out how many users/devices are connected to a PubNub channel at the moment.
Here is how you can design the Admin Dashboard cards to display the number of bids, highest bid, and the number of viewers. You can also implement graphs and charts to represent these values graphically.
Creating a bidding app: Ideas for Implementation
Congratulations! Now you have your small bidding portal. You can have OAuth 2.0 for login instead of username modal and you can design the dashboard using CSS to display statistics of multiple artwork. You can also add payment gateways and reserve price functionality to your application allowing users to make transactions within your online auction platform.
See how else PubNub can help add features to your auction software.
Mobile Push Notifications: Notify mobile users who are away from the app about any chat messages, project updates, or application updates.
App Context: Store information about your user in one place without setting up or calling your database.
Access Manager: Restrict access for private conversations, channel rooms, documents, and projects for specific users.
Functions: Translate messages, censor inappropriate messages, announce the arrival of new users, and notify other users of mentions.
Events & Actions: Centrally manage events in your application’s ecosystem and trigger business logic without code.
