logo

Pemira Himakom: Voting App with Token Encyrption Approach

Home

I must say, Pemira 2023 was a rather fascinating web app project in my college years as a CS student. For some context, Pemira (which stands for Pemilihan Raya in Indonesian) is an annual election event for the new head of our student organization at a major level called Himakom. I was a member of OmahTI, a subsidiary organization of Himakom that focuses on technical skills, while the former focuses on human resources. At the beginning of the OmahTI cabinet, I was given the liberty by the OmahTI CEO to choose which project I would work on, and I ultimately chose this project, simply because the voting app isn't just some CRUD app. Thus, around November 2023, I was finally assigned to be the IT Head of Pemira 2023, with Dilya Salsabilla as my lead.

Requirements

The requirements were straightforward: develop a web-based voting system to display the candidate profiles and summarize the voting results. Furthermore, as I work on designing the app's interface (UI/UX), I need to ensure that it aligns with the event's theme of a fairytale garden. This is an interesting aspect of the project that I am looking forward to. The primary aim was to ensure the smooth functioning of the voting system, which heavily relied on the efficiency of the Pemira 2023 personnel in managing the on-site activities.

The voting mechanism that we agreed upon was quite simple. At D-Day, the staff will rotate to each classroom and call each student to take a vote on the staff's laptops. Last year, the approach was to give each student a unique printed token. The student needs to use their token to access the app and vote. I found that this flow is unnecessarily ineffective, lacks anonymity, and ultimately can't keep track of essential data to be analyzed later on (class, year, gender, etc.). It became clear that we need a new approach.

New approach

From this point, I proposed a new approach. Instead of using an arbitrary token for logging in, the voter will input their student ID (which they know). This ID will be used to query a predefined database, listing all voters and their respective data (such as class, year, gender, etc.). If the query returns a result, and that student is "enabled" to vote, the web app will allow the voter to vote. This query data will be stripped out into some essential ones, and then encrypted to a unique token. When a voter votes for a candidate, this token will be inserted into the voter table, which later on, could be safely decrypted and used for the final votes analytics. This way, the anonymity of the voters is guaranteed, the flow is seamless on the user side, and the voter's data can be extracted dynamically. The proposed solution was ultimately accepted, and we proceeded to the development phase.

Flow

Token Encryption Flow

Development

About the tech stack, I decided to capitalize on a simplistic approach. Specifically, I have chosen NextJS and Tailwind for the front-end, owing to familiarity with my team members, and Firebase Firestore for the back-end service. For the UI/UX Design, we mainly followed Pemira's design guidelines created by the design team and utilized the Tailwind design system for rapid prototyping and later development accuracy.

In such a generous timeframe given by the Pemira team, I was able to coordinate a smooth development process. There are no particular things I'd like to highlight, since the underlying data flow is just another form of CRUD to Firebase Firestore, from an NextJS Client. In remarks, I haven't done any proper testing due to our team's inexperience, which indeed could improve the overall code quality.

Unfortunately, due to some internal conflicts that are isolated from our technical concerns here, the Pemira 2023 is canceled. But, a month later, the project's source code is reused by my colleague in an identical election event but in the Statistics major; ultimately proving the feasibility and effectivity of my token encyrption approach.


*The design and source code of this project is managed by Himakom, but feel free to further contact me to access the respective repository.

Info

Category

Voting App, Web App

Timeline

October 2023 - November 2023

Client

Himakom

Techstack

NextJS, Firebase, Tailwind

Start a project?

logo