How to Build Voting System React Node.js – Secure Real-Time

Want to know how to build voting system React Node.js? This tutorial guides you through creating a college election web app with Node.js, React, Socket.IO, JWT authentication, and MySQL. It’s ideal for BCA students, full‑stack developers, and anyone who wants a robust, real‑time voting solution.

1. Why Build a Voting System?

College elections often rely on paper ballots or third-party services. Building your own system:

• Lets you control security and features
• Provides hands-on full-stack experience
• Teaches real-world concepts: roles, authentication, live updates

2. Tech Stack Overview

• Frontend: React.js (with TypeScript or plain JS), Tailwind CSS or Bootstrap
• Backend: Node.js + Express
• Database: MySQL (via Sequelize ORM or raw SQL)
• Authentication: JWT (JSON Web Token)
• Real-time: Socket.IO for live vote updates
• Charts: Chart.js or ApexCharts for result visualization

3. Database Structure

users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100) UNIQUE,
  password VARCHAR(255),
  role ENUM('student','admin'),
  isApproved BOOLEAN DEFAULT FALSE
);

candidates (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  position VARCHAR(100),
  photo VARCHAR(255)
);

votes (
  id INT AUTO_INCREMENT PRIMARY KEY,
  userId INT,
  candidateId INT,
  FOREIGN KEY (userId) REFERENCES users(id),
  FOREIGN KEY (candidateId) REFERENCES candidates(id)
);
    

4. Backend Setup (Node.js + Express)

4.1 Initial Setup

Run:

npm init -y
npm install express mysql2 sequelize jsonwebtoken bcryptjs socket.io

4.2 Routes Overview

• POST /api/auth/register → Register student
• POST /api/auth/login → Login user (returns JWT)
• PUT /api/users/:id/approve → Admin approves student
• GET /api/candidates → List of candidates
• POST /api/vote → Submit vote

4.3 Middleware

• JWT verification middleware
• Role-based access (admin/student)
• isApproved check for students

5. Frontend Setup (React)

5.1 Pages & Components

• Register / Login component
• Dashboard student view: list candidates with radio buttons
• Admin dashboard: approve users, add/delete candidates

5.2 API Integration

• Use Axios for REST API calls
• Store JWT in localStorage or React Context
• Hook into Socket.IO for live results

6. Real-Time Vote Updates (Socket.IO)

When a vote is submitted, the backend emits a message like:

io.emit('voteUpdate', { candidateId, newCount });

The React frontend listens to it and updates Chart.js or a live tally component instantly.

7. Security & JWT Authentication

• Hash student passwords using bcryptjs
• Validate all inputs and sanitize SQL queries
• Expire JWT after a set duration (e.g. 1‑2h)
• Protect admin routes with role check

8. Deployment Instructions

• Backend: Deploy via Render, DigitalOcean, or Heroku
• Frontend: Host on Vercel or Netlify
• Database: Managed MySQL or PlanetScale
• Enable HTTPS and environment variables (JWT secret, DB creds)

9. Frequently Asked Questions

🔹 Can students vote more than once?

No — backend logic enforces one vote per user per position.

🔹 Do all 5 admins have to approve each student?

Yes — student accounts remain inactive until every admin sets isApproved = true.

🔹 Can I extend this to multiple election cycles?

Absolutely — just add an elections table and tie votes/candidates to each event.

10. Conclusion & Next Steps

This guide shows how to build voting system React Node.js with modern tools and security. Your next moves:

• Design wireframes for UI improvements
• Implement countdown timer and auto close voting
• Publish code on GitHub and write README
• Add source‑code download or PDF guide for users

Looking for related tutorials? Check JWT Authentication Node.js React or Realtime App with Socket.IO. For more BCA project ideas, visit Final Year Project Ideas.

Need support or code access? Reach me at bishal@bishalghale.com.np.

Published by Bishal Ghale | Full-Stack Developer, Nepal 🇳🇵