Voting web page with Notion

Dec 6, 2023 - 6 min read

In October of this year 2023, I found myself with the opportunity to create the website for the Resis Awards event at my university's residences. It seemed like a good opportunity to learn and develop my professional skills. We started discussing the project in early October, but for various reasons, we ended up starting it in the last week of October.

Initially, I had planned to create a website 100% with code from scratch, but due to time constraints, I realized it would be very complicated. Analyzing various options on how we could get the website ready, I came up with the idea of using Notion. I had previously had my personal portfolio on Notion because it seemed like a quick and easy way to build a portfolio that I could share with others.

Afterwards, I started programming this website where you are reading this blog, but the fact is that for the speed at which I was able to create that, I was convinced that we could do the same here. I thought that Frontend wouldn't be so complicated since we would only be displaying general information about the event. The challenge was the voting aspect, as we wanted to have 2 rounds of voting for this event. In the first round, multiple candidates could be proposed based on different categories, and in the second round, the top 3 candidates would be chosen.

A very useful feature of Notion is the ability to have Databases. So I thought, “Surely there is already a form service that allows me to connect it to a Notion database to store the results”. And sure enough, I started researching several options for services to accomplish this task.

The first one I tried was Commotion. At first, I thought it had what I wanted, but then I started noticing several issues. For the voting part, to propose the finalists, we had to leave the options open but only have the residents as options. Additionally, the data had to be consistent in order to count the votes, among other things, we had to include all the residents in all the categories.

This was a problem because there was no way for me to have a database with all the names and IDs of the residents and use them as options in a question. So after researching for several days, I took the initiative to manually enter all the names. It wasn't the most effective option, but the voting had to proceed.

Then I found that there were several issues with Commotion, which I don't remember now, but I simply couldn't achieve what I wanted with this service. So I looked for another one and ended up using Forms App. What I liked about Forms App is that it allowed me to eliminate the possibility of a person voting twice, and it was as simple as copying and pasting the names of the residents to create individual options for the multiple-choice categories automatically.

What we didn't anticipate was that several pages on our university network are blocked for security reasons. Sometimes, some pages are blocked for no reason, so we have to request them to be unblocked. We didn't have the time to make the request and accept the changes, so we decided to set up voting stations in the building where students could go and vote.

The voting was carried out, and then I started working on the final voting round. I must mention that I built the website using SUPER, a service that allows you to create more customized websites using Notion pages as a base. When it came to the final voting round, we planned to display the images of the finalists to make it easier for the residents to vote. The problem was that this could be done with Forms App, but after the website was blocked by the university and several people decided not to vote due to the inconvenience of going to the voting station, we decided to look for another service.

That's when I discovered TALLY, a free service (the previous two were paid :/) that also allows you to connect a Notion database to the form. What I liked about TALLY was how easy it was to set up the form, as it follows the same concept as Notion of using a / to insert new blocks. In addition, it has a much better interface design and user experience. I created the form and connected it to my Notion database. I created a page where we could see the progress of each category and individually created charts for each category using ChartBase, which is the best service I have found for creating charts from databases, although it is a paid service.

Everything was going great with the voting. The voting would close at 10pm on the last day. One hour after the voting was closed, the event organizer told me that the voting data was visible. Confused, I started to figure out how this was possible, until I found the answer. It turns out that, when creating the website, I had created a blank page where, according to me, we would show the voting progress to the public. I didn't put anything there, but the link appeared in the header. When I set up the page where the voting results could be viewed, I forgot that this page was public, and I posted everything there.

Quickly, I took down the page and deleted it from Notion. The data had leaked, but it didn't cause any major issues. The next day, the event organizer asked me if I could put the page back up so that someone from the university could see it. I re-posted the page, making sure that the previous error wouldn't happen again, and everything went smoothly for a while.

Until I received a message from the organizer while I was at the gym, telling me that the data was visible again. This time, I didn't know why this was happening. I thought, “But I didn't make that page public this time”. Then I realized, “Of course, in the end, I posted the page again, and the database is within that page, so if you have the URL and you refresh it, you can see the content again”. I quickly solved it, and everything was fine.

The moral of the story is, if you ever want to do something similar, make sure your database is separate from your website to avoid leaks like the one that occurred.

I hope you learned something from this post. Thank you very much for reading :)