An Online Voting System designed to revolutionize the way citizens participate in elections. This project eliminates the hassles of paper-based voting by providing a secure, automated, and streamlined voting platform. The system is built using cutting-edge technologies like HTML, CSS, TypeScript, Angular, Java (Spring Boot), and MySQL.
✨ Key Features
- Secure Authentication: Ensures only verified users can cast votes.
- User-Friendly Interface: Built for accessibility and ease of use.
- Robust Admin Management: Simplifies party and voter management.
- Real-time Voting Status: Displays voting status for registered users.
- Responsive Design: Optimized for desktop and mobile browsers.
🔧 Tech Stack
- Frontend: HTML, CSS, TypeScript, Angular
- Backend: Java, Spring Boot
- Database: MySQL
- Tools: Eclipse IDE, VS Code, Node.js
Prerequisites:
- Install Node.js and npm: Download and install the latest version from the official Node.js website (https://nodejs.org/). This also includes npm, the Node Package Manager.
- Install MySQL: Download and install MySQL Community Server from the official MySQL website (https://dev.mysql.com/downloads/).
- Install Eclipse IDE: Download and install the Eclipse IDE for Java Developers from the Eclipse website (https://www.eclipse.org/).
Steps:
1. Backend (Spring Boot):
-
Set up the database:
- Open the MySQL command-line client.
- Create a new database:
CREATE DATABASE db521;
-
Import the Spring Boot Project into Eclipse:
- In Eclipse, go to File > Import > Existing Maven Projects.
- Browse to the directory where your Spring Boot project is located and select the
pom.xml
file.spring.datasource.url=jdbc:mysql://localhost:3306/db521 spring.datasource.username=your-username spring.datasource.password=your-password
- Update your-name with your database username and password.
-
Run the Spring Boot Application:
- Right-click on the
Application
class in thecom.spring
package. - Select Run As > Spring Boot App.
- Right-click on the
2. Frontend (Angular):
-
Open the Angular project in VS Code: Open the terminal within VS Code and navigate to the root directory of your Angular project.
-
Install angular:
npm install -g @angular/cli
-
Install dependencies:
npm install
-
Start the development server:
ng serve
-
Access the application: Open your web browser and navigate to
http://localhost:4200/
(or the port specified in the terminal output).
🏠 Home Page
The landing page introduces the importance of voting with a focus on the system's features and security.
🎛️ Admin Dashboard
The admin has access to a dashboard displaying the total number of users, parties, and voters. Additionally, the admin can manage voters and parties.
Features:
- View and manage voter details.
- Add new political parties with their logos and constituencies.
- Monitor voting activity in real-time.
📋 List of Voters
The admin can view the list of registered voters, along with their personal details, account status, and actions like Update or Delete voter accounts.
🖼️ Screenshots
📚 Learnings
This project demonstrates:
- Building a full-stack application with Angular and Spring Boot.
- Securely managing user data and authentication.
- Database design and integration with MySQL.
- Implementing key software engineering principles.
Hand-coded with ❤️ using Java, Spring Boot, Angular, Typescript, MySql