Result

I was really suprised to see that our group had won runners-up. Alcohmeter was not entirely the final result we had envision, but due to the time restraints of a 24 hour hackathon, it was necessary to go for a simplified solution.

The final result can be found here: https://github.com/N-Tandiono/imagine-cup-australia-2020

Our 3 minute presentation submitted can be found: https://youtu.be/uN447bl4cIs

A deployed web application of Alcohmeter can be found here: https://n-tandiono.github.io/imagine-cup-australia-2020/

A demonstration of the web application can be found here: https://www.youtube.com/watch?v=37VuzsBsAVk&feature=youtu.be

The Final Solution

Intially, the more succint solution we had intended to build was a phone application which allowed the user to take a photo of drinks and determine through ML/AL the standard drinks within them. From this, then after generating a personal recommended standard drinks amount, add the standard drink amount into a virtual display which will indicate the effect of the drink on the individual. The user can then decide for themselves if they would, or wouldn’t drink the beverage. The display is dynamic and would change overtime, decreasing as it would think the alcohol leaves the user’s system.

Alternatively, due to the complexities of ML/AL and computer vision in a 24 hour hackathon, the alternative would have been to scan the barcode, have the standard drink placed into a library and continue from there.

Despite this, we ended up going for a web application solution with manuel inputs for the prototpye development as a POC of the amazing idea we had thought about.

The 24 hours

We had firstly tried to create a mobile phone application that a person could have downloaded from the app store. This would have been the most ideal solution as it is elegant, easy to use and convenient.

A member of the group had suggested to use Android Studio which I had never programmed in before. It seemed like it would mean coding mainly in Java or Kotlin which I had never used before. He was quite adamant that it would be very drag and drop, which he had done before. Despite this, it would technically only mean that the UI/UX design would be easy. The dynamic features such as progress bar, computer vision and analysis would be no easy feat. Despite this, I was willing to be adaptable and along with the other team member, we were very happy to try learn the techonolgy.

After 4 hours of trying and getting no where, the member who had suggested to use Android Studio had to get off for the night which was unfortunate. Meanwhile, Archibold and I continued to learn Android Studio and had a fun time doing so together. After another 3 hours of trying it had seemed quite clear that we were not able to finish off the computer vision concept and we both made the decision to swap to a React application. It was also at the time that I realised that Archibold was a great drawer! So we started having the idea of incorporating some of his amazing cartoon-like images into the React application as a way to make a comical and yet engaging product.

So I began in the first 10 minutes doing the standard, make a new repository (Since the previous one created by the other member was all capitalised and React apps need all lowercase letters in the repo name) and create-react-app. Then firstly began with the progress bar which was made through bootstrap. A few things to remember about bootstrap progress bars: It works like ratios after the values sum to 100. This means that if red is on the left [key 0] with value 0 and green [key 1] has value 1, the entire bar will still mainly be empty. Despite this, if the red has value 100 and green has value 1. The green will still appear on the bar. This means that as a colour change values on the progress bar, we would also need to adjust the value of the other colours.

The images accompanied the progress bar which were created by Archibold:

Alternatively, we also had these images which we did not end up having a place to put:

We both powered throughout the night and were able to complete the application by the morning at around 10 am 😃. By this stage, the presentation workshop was beginning where we tried to learn how we should be presenting our work and our other team member had joined us again. For rest of the day till 4 pm we documented the work and made presentations to submit.

I also did my first React app deployment onto github pages which was suprisingly very easy.

Things to Learn

One of these days I would like to learn some sort of mobile application development tool. I have heard that Flutter is a superior tool over Android Studio which follows similar concepts to React.

Additionally, I should make sure I talk about more about the SDLC process throughout the presentation and documentation. This means also talking about the acceptance criteria, user stories and validation which would have added extra layers of depth and understanding throughout the documentation.

Also I think a moral of the story is also not to be unrealistic in the planning and design of scope. It is important to know that the presentation is just as important and requires a lot of planning and reflection back into the SDLC.

Final Reflections

It was a great experience for a first Hackathon. I met a new amazing person and created great things together within such a short period of time. I have already planned and scheduled to particpate in another Hackathon soon and I hope it will also be a great experience. I had never made a React application ever before and had only done the basics of a simple counter and button interactions with it so I had undoubtedly tested my abilities to the limits. A big thank you to everyone who organised the event and judges who presented inspiring projects they had done themselves.