There are two ways to get live information from your server about a new bid:

1. Use a long-polling HTTP request, basically an HTTP request every 5 – 10 seconds, to get information about a new bid.
2. Use an open socket (Websockets) to get information directly from the server when a new bid arrives.

In this article, I will talk about Websockets and specifically the Node.js library – Socket.io

Novu – the first open-source notification architecture

Just a quick background about us. Novu is the first open-source notification infrastructure. We basically help to manage all the product notifications. It can be In-App (the bell icon like you have on Facebook), Emails, SMSs, and so on.

Looking for new contributors

Come help us out to build the best open-source notification infrastructure, get recognized by the community, and become a Community Hero here:
https://novu.co/contributors

So what the hack is Socket.io?

Socket.io is a JavaScript library that enables us to create real-time, bi-directional communication between web browsers and a Node.js server. It is a highly performant library capable of processing a large volume of data within the shortest possible time.

Usually, to get information from the server, you need to send an HTTP request. However, with WebSockets, the server lets you know when there is new information without asking it.

In this article, we’ll leverage the real-time communication provided by Socket.io to create a bidding system that allows users to put items up for auction and bid for them. Socket.io will also notify users when an item is up for auction and after a user places a bid.

How to add Socket.io to React & Node.js applications

In this section, we’ll set up the project environment for our bidding system. You’ll also learn how to add Socket.io to a React and Node.js application and connect both development servers for real-time communication via Socket.io.

Create the project folder containing two sub-folders named client and server.

1mkdir bidding-system
2cd bidding-system
3mkdir client server

Navigate into the client folder via your terminal and create a new React.js project.

1cd client
2npx create-react-app ./

Install Socket.io client API and React Router. React Router is a JavaScript library that enables us to navigate between pages in a React application.

1npm install socket.io-client react-router-dom

Delete the redundant files such as the logo and the test files from the React app, and update the App.js file to display Hello World as below.

1function App() {
2  return (
3    <div>
4      <p>Hello World!</p>
5    </div>
6  );
7}

Next, navigate into the server folder and create a package.json file.

1cd server
2npm init -y

Install Express.js, CORS, Nodemon, and Socket.io Server API.

Express.js is a fast, minimalist framework that provides several features for building web applications in Node.js. CORS is a Node.js package that allows communication between different domains.

Nodemon is a Node.js tool that automatically restarts the server after detecting file changes, and Socket.io allows us to configure a real-time connection on the server.

1npm install express cors nodemon socket.io 

Create an index.js file – the entry point to the web server.

1touch index.js

Set up a simple Node.js server using Express.js. The code snippet below returns a JSON object when you visit the http://localhost:4000/api in your browser.

1//index.js
2const express = require('express');
3const app = express();
4const PORT = 4000;
5
6app.get('/api', (req, res) => {
7  res.json({
8    message: 'Hello world',
9  });
10});
11
12app.listen(PORT, () => {
13  console.log(`Server listening on ${PORT}`);
14});
15

Import the HTTP and the CORS library to allow data transfer between the client and the server domains.

1const express = require('express');
2const app = express();
3const PORT = 4000;
4
5//New imports
6const http = require('http').Server(app);
7const cors = require('cors');
8
9app.use(cors());
10
11app.get('/api', (req, res) => {
12  res.json({
13    message: 'Hello world',
14  });
15});
16
17http.listen(PORT, () => {
18  console.log(`Server listening on ${PORT}`);
19});

Next, add Socket.io to the project to create a real-time connection. Before the app.get() block, copy the code below.

1//New imports
2.....
3const socketIO = require('socket.io')(http, {
4    cors: {
5        origin: "http://localhost:3000"
6    }
7});
8
9//Add this before the app.get() block
10socketIO.on('connection', (socket) => {
11    console.log(`⚡: ${socket.id} user just connected!`);
12    socket.on('disconnect', () => {
13      console.log('🔥: A user disconnected');
14    });
15});

From the code snippet above, the socket.io("connection") function establishes a connection with the React app, then creates a unique ID for each socket and logs the ID to the console whenever a user visits the web page.

When you refresh or close the web page, the socket fires the disconnect event showing that a user has disconnected from the socket.

Next, configure Nodemon by adding the start command to the list of the scripts in the package.json file. The code snippet below starts the server using Nodemon.

1"scripts": {
2    "test": "echo \"Error: no test specified\" && exit 1",
3    "start": "nodemon index.js"
4  },

You can now run the server with Nodemon by using the command below.

1npm start

Open the App.js file in the client folder and connect the React app to the Socket.io server.

1import socketIO from 'socket.io-client';
2const socket = socketIO.connect('http://localhost:4000');
3
4function App() {
5  return (
6    <div>
7      <p>Hello World!</p>
8    </div>
9  );
10}

Start the React.js server.

1npm start

Check the terminal where the server is running; the ID of the React.js client appears in the terminal.

Congratulations 🥂 , the React app has been successfully connected to the server via Socket.io.

💡 For the remaining part of this article, I will walk you through creating the flow of the bidding system, and in the upcoming article in this series, I will guide you through sending messages between the client and the server and saving them in a JSON file.

💡 The JSON file will serve as the database for the application. Although this is not a secure way of saving data, this is just a demo, so feel free to use any database of your choice if necessary.

The Workflow for the Bidding System

Before we start building each component, I’ll walk you through the application’s workflow.

Here is how it works:

• The Home page: Users provide only their username, and the application saves this username for identification throughout the application. To keep the tutorial simple, we won’t use any authentication library.
• The Products page: Users can view all the products up for auction, click on each product to bid, and there is a call to action that redirects users to the page where they can add items for auction.
• The Add Products page: This page allows users to add the name and price of the auction item, then redirects them to the Products page to view the recently added item.
• The Bid page: Users can bid for the item they selected from the Products page. This page accepts URL parameters containing the name and the price of the chosen item; then displays a form input that allows users to bid up the product.
• The Nav component: All the pages have the Nav component at the top and display notifications within it. When a user sets a bid or adds a new product, the Nav component notifies every other user.

Without any further ado, create a component folder containing all the pages. Ensure that each page renders an HTML element.

1cd src
2mkdir components
3cd components
4touch Home.js Products.js AddProduct.js BidProduct.js Nav.js

Next, Import all the files within the components folder into the App.js file and create a route for each page using React Router v6.

1//Pages import
2import Home from './components/Home';
3import AddProduct from './components/AddProduct';
4import BidProduct from './components/BidProduct';
5import Products from './components/Products';
6import Nav from './components/Nav';
7import socketIO from 'socket.io-client';
8import { Route, Routes, BrowserRouter as Router } from 'react-router-dom';
9
10const socket = socketIO.connect('http://localhost:4000');
11
12function App() {
13  return (
14    <Router>
15      <div>
16        {/* Nav is available at the top of all the pages as a navigation bar */}
17        <Nav socket={socket} />
18        <Routes>
19          <Route path="/" element={<Home />} />
20          <Route path="/products" element={<Products />} />
21          <Route
22            path="/products/add"
23            element={<AddProduct socket={socket} />}
24          />
25          {/* Uses dynamic routing */}
26          <Route
27            path="/products/bid/:name/:price"
28            element={<BidProduct socket={socket} />}
29          />
30        </Routes>
31      </div>
32    </Router>
33  );
34}
35
36export default App;

The code snippet declares the route for each page and passes the Socket.io library into the necessary components.

Navigate into the src/index.css and copy the code below. It contains all the CSS required for styling this project.

1/* --------General Stylesheet for the project ------*/
2@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
3* {
4  margin: 0;
5  padding: 0;
6  box-sizing: border-box;
7  font-family: 'Poppins', sans-serif;
8}
9body {
10  margin: 0;
11}
12
13/* --------Stylesheet for the Navigation component ------*/
14.navbar {
15  width: 100%;
16  height: 10vh;
17  background-color: #f0ebe3;
18  display: flex;
19  align-items: center;
20  justify-content: space-between;
21  padding: 20px;
22  margin-bottom: 30px;
23}
24.navbar .header {
25  width: 70%;
26}
27
28/* --------Stylesheet for the Home component ------*/
29.home__form {
30  width: 100%;
31  height: 80vh;
32  padding: 20px;
33  display: flex;
34  align-items: center;
35  justify-content: center;
36  flex-direction: column;
37}
38.home__input,
39.addProduct__form input,
40.bidProduct__form input {
41  width: 70%;
42  padding: 10px;
43  border-radius: 5px;
44  margin: 15px 0;
45  outline: none;
46  border: 1px solid #576f72;
47}
48.home__cta {
49  width: 200px;
50  padding: 10px;
51  font-size: 16px;
52  outline: none;
53  border: none;
54  cursor: pointer;
55  color: #fff;
56  background-color: rgb(67, 143, 67);
57}
58
59/* --------Stylesheet for the Products component ------*/
60.editIcon {
61  height: 20px;
62  cursor: pointer;
63}
64table {
65  width: 95%;
66  border: 1px solid #576f72;
67  margin: 0 auto;
68  border-collapse: collapse;
69}
70tr,
71td,
72th {
73  border: 1px solid #576f72;
74  text-align: center;
75  padding: 5px;
76}
77.table__container {
78  display: flex;
79  align-items: center;
80  flex-direction: column;
81}
82.products__cta {
83  width: 70%;
84  background-color: rgb(67, 143, 67);
85  padding: 15px;
86  color: #fff;
87  margin-bottom: 35px;
88  border-radius: 5px;
89  text-decoration: none;
90  text-align: center;
91}
92
93/* --------Stylesheet for the AddProducts & BidProducts component ------*/
94.addproduct__container,
95.bidproduct__container {
96  width: 100%;
97  display: flex;
98  flex-direction: column;
99  align-items: center;
100}
101.addproduct__container h2,
102.bidproduct__container h2 {
103  margin-bottom: 30px;
104}
105.addProduct__form,
106.bidProduct__form {
107  display: flex;
108  flex-direction: column;
109  width: 80%;
110  margin: 0 auto;
111}
112.addProduct__cta,
113.bidProduct__cta {
114  width: 200px;
115  padding: 10px;
116  font-size: 16px;
117  outline: none;
118  border: none;
119  color: #fff;
120  background-color: rgb(67, 143, 67);
121  cursor: pointer;
122}
123.bidProduct__name {
124  margin-bottom: 20px;
125}

Congratulations 💃🏻, we can start coding every part of the project.

Creating the Home page of the application

In this section, we’ll create the home page for the bidding system. The page will accept the username from the user and then save it to the local storage for identification throughout the application.

Update the Home.js file to render a form field that accepts a minimum of six letters as username.

1import React, { useState } from 'react';
2
3const Home = () => {
4  const [userName, setUserName] = useState('');
5
6  return (
7    <div>
8      <form className="home__form" onSubmit={handleSubmit}>
9        <label htmlFor="username">Enter your username</label>
10        <input
11          type="text"
12          name="username"
13          className="home__input"
14          value={userName}
15          onChange={(e) => setUserName(e.target.value)}
16          required
17          minLength={6}
18        />
19        <button className="home__cta">SIGN IN</button>
20      </form>
21    </div>
22  );
23};
24
25export default Home;

Create the handleSubmit function that stores the username in the local storage, then redirects the user to the Products page after submitting the form.

From the code snippet below, the useNavigate hook enables us to redirect users between pages.

1import React, { useState } from 'react';
2import { useNavigate } from 'react-router-dom';
3
4const Home = () => {
5  const [userName, setUserName] = useState('');
6  const navigate = useNavigate();
7
8  const handleSubmit = (e) => {
9    e.preventDefault();
10    localStorage.setItem('userName', userName);
11    navigate('/products');
12  };
13
14  return <div>.....</div>;
15};
16
17export default Home;

Creating the Products page

In this section, I’ll walk you through creating a simple layout that displays each product and the related information. The product details include the name, price, owner, and the last bidder.
A table layout containing each product on every row is the least complicated layout for this data structure.
So, let’s code it! 💪

Update the Products.js to display a table containing two products with four columns containing the name, price, last bidder, and the creator.

1import React from 'react';
2const Products = () => {
3  return (
4    <div>
5      <div className="table__container">
6        <table>
7          <thead>
8            <tr>
9              <th>Name</th>
10              <th>Price</th>
11              <th>Last Bidder</th>
12              <th>Creator</th>
13            </tr>
14          </thead>
15          {/* Data for display, we will later get it from the server */}
16          <tbody>
17            <tr>
18              <td>Tesla Model S</td>
19              <td>$30,000</td>
20              <td>@david_show</td>
21              <td>@elon_musk</td>
22            </tr>
23
24            <tr>
25              <td>Ferrari 2021</td>
26              <td>$50,000</td>
27              <td>@bryan_scofield</td>
28              <td>@david_asaolu</td>
29            </tr>
30          </tbody>
31        </table>
32      </div>
33    </div>
34  );
35};
36
37export default Products;

We’ve been able to display the items available for auction to the users. Next, we need to allow users to add a product and bid on each item. An easy way is to create a hyperlink that links to the Add Products page and an edit button for bidding on items.

Update the Products page to contain the edit button and a call to action for adding products.

1import React from 'react';
2import { Link } from 'react-router-dom';
3
4const Products = () => {
5  return (
6    <div>
7      <div className="table__container">
8        <Link to="/products/add" className="products__cta">
9          ADD PRODUCTS
10        </Link>
11
12        <table>
13          <thead>
14            <tr>
15              <th>Name</th>
16              <th>Price</th>
17              <th>Last Bidder</th>
18              <th>Creator</th>
19              <th>Edit</th>
20            </tr>
21          </thead>
22          {/* Data for display, we will later get it from the server */}
23          <tbody>
24            <tr>
25              <td>Tesla Model S</td>
26              <td>$30,000</td>
27              <td>@david_show</td>
28              <td>@elon_musk</td>
29              <td>
30                <button>Edit</button>
31              </td>
32            </tr>
33
34            <tr>
35              <td>Ferrari 2021</td>
36              <td>$50,000</td>
37              <td>@bryan_scofield</td>
38              <td>@david_asaolu</td>
39              <td>
40                <button>Edit</button>
41              </td>
42            </tr>
43          </tbody>
44        </table>
45      </div>
46    </div>
47  );
48};
49
50export default Products;

Creating the Add Product page

In this section, we’ll create the AddProduct page containing a form with two input fields for the name and price of the product up for auction and a submit button.

1import React, { useState } from 'react';
2import { useNavigate } from 'react-router-dom';
3
4const AddProduct = () => {
5  const [name, setName] = useState('');
6  const [price, setPrice] = useState(0);
7  const navigate = useNavigate();
8
9  const handleSubmit = (e) => {
10    e.preventDefault();
11    console.log({ name, price, owner: localStorage.getItem('userName') });
12    navigate('/products');
13  };
14
15  return (
16    <div>
17      <div className="addproduct__container">
18        <h2>Add a new product</h2>
19        <form className="addProduct__form" onSubmit={handleSubmit}>
20          <label htmlFor="name">Name of the product</label>
21          <input
22            type="text"
23            name="name"
24            value={name}
25            onChange={(e) => setName(e.target.value)}
26            required
27          />
28
29          <label htmlFor="price">Starting price</label>
30          <input
31            type="number"
32            name="price"
33            value={price}
34            onChange={(e) => setPrice(e.target.value)}
35            required
36          />
37
38          <button className="addProduct__cta">SEND</button>
39        </form>
40      </div>
41    </div>
42  );
43};
44
45export default AddProduct;
46

From the code above, the handleSubmit button collects the user’s input from the form and logs it to the console before redirecting to the Products page. The username saved to the local storage is also attached to the item as the product owner.

Creating the Bid page

The Bid page is quite similar to the AddProduct page. It contains a form with an input field for the bid price of the selected product and a call to action. After a user places a bid, it redirects them to the Product page.

1import React, { useState } from 'react';
2import { useNavigate } from 'react-router-dom';
3
4const BidProduct = () => {
5  const [userInput, setUserInput] = useState(0);
6  const navigate = useNavigate();
7
8  const handleSubmit = (e) => {
9    e.preventDefault();
10    navigate('/products');
11  };
12
13  return (
14    <div>
15      <div className="bidproduct__container">
16        <h2>Place a Bid</h2>
17        <form className="bidProduct__form" onSubmit={handleSubmit}>
18          <h3 className="bidProduct__name">Product Name</h3>
19
20          <label htmlFor="amount">Bidding Amount</label>
21          <input
22            type="number"
23            name="amount"
24            value={userInput}
25            onChange={(e) => setUserInput(e.target.value)}
26            required
27          />
28
29          <button className="bidProduct__cta">SEND</button>
30        </form>
31      </div>
32    </div>
33  );
34};
35
36export default BidProduct;

Creating the Nav component

The Nav component is at the top of every page (according to the App.js file). It represents the app’s notification center – where users view the notifications from Socket.io.

Update the Nav.js file to render a <nav> element as below. The h2 element represents the logo, and the notification container is on the right-hand side of the screen.

1import React from 'react';
2
3const Nav = () => {
4  return (
5    <nav className="navbar">
6      <div className="header">
7        <h2>Bid Items</h2>
8      </div>
9
10      <div>
11        <p style={{ color: 'red' }}>My notifications are here</p>
12      </div>
13    </nav>
14  );
15};
16
17export default Nav;

Congratulations, we’ve completed the first part of this series. In next week’s article in this series, I’ll walk you through sending messages between the React app and the Node.js server.

You can find the full source code here:
https://github.com/novuhq/blog/tree/main/bidding%20system%20using%20socketIO

Thank you for reading! 🥂