Logo

Majority Judgment

A mobile ballot box

Core functionalities

  • Implements the majority judgment voting system
  • Results are secured by a password
  • Mobile first design

Technologies used

  • React
  • Redux / Redux Toolkit
  • CSS Modules
  • Netlify
  • Git

Code

Github

Live Demo

Site

Why build this project

A way to give majority judgment publicity

Not so many people know about the majority judgment voting system.

Building a tool using it was for me a way of understanding it. And moreover a way to let other people try and experiment with it.

A deep interest in the underlying subject

The question of voting systems and how decision and consensus can be reached in a group of heterogeneous individuals is something that I find fascinating.

So much so that my final project for cs50 was a python implementation of the majority judgment voting system with a terminal interface.

Wanting to use it on my phone

A terminal interface is definitely not ideal in terms of user experience.

I wanted to make a second version that I could use on my phone. And that anyone could use or test on their phone, tablet or computer whether it is a mac, pc and android platform.

A worthy algoritmic challenge

Getting a deep understanding of the tie-breacking rule of the majority judgment system is not trivial.

Hacking a reliable code version of it is even less so, no matter the langage you use (python or JavaScript).

The three main steps of the vote

First, set up the vote

screen capture of the mobile versionscreen capture of the desktop version

Second, each participant gives a mention to each proposition

screen capture of the mobile versionscreen capture of the desktop version

Third, check out the results!

screen capture of the mobile versionscreen capture of the desktop version

Problems and thought process

Thinking the whole UI/UX

Before I started writing my first line of code, I sat down with a piece of paper and wrote a schema of what the UX/UI should be.

I underestimated the complexity of this exercise, as I wanted to allow the user to confirm forms and/or to go back on certain steps.

Managing what to show and when

So I coded the UI logic and distributed it between components, top to bottom. I spent a lot of time thinking about the best way of doing it trougth the component's three either using Redux, useState() or props.

Building generic components

I builded generic components as much as I could for this project.

So, in the process of building this app, if I wanted to change or modify something, it always stayed relatively easy and straightforward to do so.

The design challenge

I constantly doubt my choices, change something, change back to how it was.

I learn a little bit more with every project but taking design decisions may still be the hardest part for me.

What I learned

  • How taking the time to plan at the very start of a project earns a lot of time down the road. I did it for this project but for the next one, I'll do it even more.

  • This project helped me solidify a lot my React/Redux knowledge

  • Plenty of great practice using ES6+ syntax

My other projects

Flags

"Flags" is a game that lets you improve your knowledge of the flags of all countries and have fun at the same time.

See Project Details

Passphrase Generator

You need a truly random passphrase generator? Here it is!

See Project Details
Logo