Creating an upvote system with React and Socket.io 🥳 🔝

Read Time:13 Minute, 3 Second

What is this article about?

Upvotes became a great way to understand what your visitors want. You can take websites like ProductHunt, and public roadmaps like Gleap, Upvoty, Prodcamp, have the ability to let user share their thoughts (in votes).
Even Reddit, one of the most popular social media lets people upvote or downvote your posts. We are going to build something similar with images!

Creating an upvote system with React and Socket.io 🥳 🔝

In this article, you’ll learn how to create an upvoting application that allows users to upload images using Websockets and upvote their favorite photos. You’ll also learn how to send emails via EmailJS to notify users when their images gain a vote.

Transformers

Why Socket.io (Websockets)?

Websockets allows us to use bi-directional communication with the server. It means that if we put in an upvote, we can inform the other user about the new upvote without refreshing the page or using long-polling.

Socket.io is a popular JavaScript library that allows us to create real-time, bi-directional communication between software applications and a Node.js server. It is optimised to process a large volume of data with minimal delay and provides better functionalities, such as fallback to HTTP long-polling or automatic reconnection.

Novu – the first open-source notification infrastructure

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 in Facebook – Websockets), Emails, SMSs and so on.

Novu

I would be super happy if you could give us a star! And let me also know in the comments ❤️
https://github.com/novuhq/novu

How to create a real-time connection with React and Socket.io

Here we’ll set up the project environment for the image upvoting application. You will 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.

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Install Socket.io client API, React Toastify, and React Router. React Router is a JavaScript library that enables us to navigate between pages in a React application, and React Toastify is used to display colourful notifications to the users.

Enter fullscreen mode Exit fullscreen mode

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.

Enter fullscreen mode Exit fullscreen mode

Add the Socket.io client API to the React app as below:

Enter fullscreen mode Exit fullscreen mode

Navigate into the server folder and create a package.json file.

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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.

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

Enter fullscreen mode Exit fullscreen mode

Set up a 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.

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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.

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Building the user interface

Here, we’ll create the user interface for the upvoting application to enable users to sign in, upload images, and upvote any picture of their choice.
There are two rules required when building the upvoting application:

  • users can only vote once.
  • users can not upvote their own images.

Later in the tutorial, I will guide you on how you can build such a efficient upvoting system.

Navigate into the client/src folder and create a components folder containing the Login.js, Register.js, Photos.js, UploadPhoto.js, MyPhotos, and SharePhoto.js files.

Enter fullscreen mode Exit fullscreen mode

From the code snippet above:

  • The Login component is the application’s home page. It prompts users to sign in to the application.
  • The Register component enables new users to create an account before they can sign in to the application.
  • The Photos component is the home page displayed to the users after authentication. Users can view all the available images on this page and upvote them.
  • The UploadPhoto is only visible to authenticated users and allows users to upload images to the list of photos on the web application.
  • The MyPhoto page allows users to view only their uploaded images and share their profile links with friends.
  • The SharePhoto component is a dynamic route that shows all the images uploaded by a user.

Update the App.js file to render the newly created components on different routes via React Router as below:

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

The Login page

Copy the code below into the Login component. The application accepts the username and password from the user.

Enter fullscreen mode Exit fullscreen mode

Register Page

The Register page

Copy the code below into the Register.js file to accepts the user’s email, username and password.

Enter fullscreen mode Exit fullscreen mode

Register Page

The Photos component

This component is divided into two sub-components which are the navigation and the main container containing the available images.

Photo Component

Copy the code below into the Photos.js file.

Enter fullscreen mode Exit fullscreen mode

Create the Nav and PhotoContainer sub-components.

Enter fullscreen mode Exit fullscreen mode

Copy the code below into the Nav.js file.

Enter fullscreen mode Exit fullscreen mode

Update the PhotoContainer.js file as below: