Build & Deploy Realtime Voting App with Javascript, Node Js & Socket.io
Voting is an essential part of decision-making and gathering opinions from a group of people. In today’s world, real-time voting has become more popular with the use of modern technology. In this article, we will discuss how to build and deploy a real-time voting app using Javascript, Node Js, and Socket.io.
Prerequisites
Before we start building the app, make sure you have Node.js installed on your system. You can download it from the official Node.js website and follow the installation instructions.
Setting up the project
First, create a new directory for your project and navigate to it in your terminal. Then, initialize a new Node.js project by running the following command:
npm init -y
Installing dependencies
Next, install the required packages for the project using npm. Run the following command to install Express, Socket.io, and nodemon:
npm install express socket.io nodemon
Creating the server
Create a new file named server.js in the project directory and add the following code to it:
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
server.listen(3000, () => {
console.log('Server is running on port 3000');
});
Creating the frontend
Create a new file named index.html in the project directory and add the following code to it:
<!DOCTYPE html>
<html>
<head>
<title>Realtime Voting App</title>
</head>
<body>
<h1>Realtime Voting App</h1>
<div id="votes"></div>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
socket.on('vote', (vote) => {
document.getElementById('votes').innerText = `${vote} votes`;
});
</script>
</body>
</html>
Creating the client
Create a new file named client.js in the project directory and add the following code to it:
const io = require('socket.io-client');
const socket = io('http://localhost:3000');
let votes = 0;
socket.on('connect', () => {
console.log('Connected to server');
});
document.addEventListener('click', () => {
votes++;
socket.emit('vote', votes);
});
Running the app
To run the app, start the server by running the following command in your terminal:
nodemon server.js
Then, open your web browser and navigate to http://localhost:3000 to see the real-time voting app in action.
Congratulations! You have successfully built and deployed a real-time voting app using Javascript, Node Js, and Socket.io.
He is the messiah
Thank you, bro, for this useful tutorial.
Suggest me some good courses to learn full stack either individually or complete course