Recently our IT Team at JUSDA decided to participate in the GS1 2020 Hackathon. This is the first time any of us have ever done a hackathon and we ended up taking first prize! GS1 is the standards organization that defines the UPC barcode labels that you see on most consumer products. They also defined the Serial Shipping Container Code (SSCC) standard which is commonly used for pallet labeling in the logistics industry. Although I’ve worked with these standards on many projects in the past, I never really took the time to deeply dive into all the GS1 standards and how they fit together. A large number of documents and videos were provided in the hackathon and it was actually a great learning experience for me and my team members.
To design our solution, we started with a brainstorming session about how to build something that leveraged our expertise while at the same time offering a novel perspective on the hackathon challenge. We decided on building a real-time map visualization showing supply and demand during a crisis. I put together a quick JSON model on Google Cloud Firestore and a couple of my team members developed some pretty complex Python code to randomly generate supply events and demand signals. These resulted in JSON documents which were posted to Google Cloud Functions that updated the Cloud Firestore database. I then developed a simple VueJS front end with a few data grids, a chart and a Mapbox visualization. All the visualizations used the Firestore real-time feature so that they instantly changed whenever a new supply event or demand signal was generated from Python.
This was a virtual hackathon so we had to present our solution in the form of a 5 minute video. I put together a PowerPoint that explained how we framed the problem and why our technology solution could help. Then I narrated over video of the different features of the web app. Condensing our message into 5 minutes was a challenge. I ended up recording pieces of the presentation and then doing some editing with Camtasia.
We encountered several obstacles while developing our solution. We originally had a much larger scope and had to pair that down several times given we only had about a week to get everything functional. Originally I planned to use DeckGL to render the map layers. This would have allowed us to make a more visually appealing map. However there were far too many technical problems getting DeckGl, Mapbox, and Firestore to work together in VueJS. I’m sure it’s possible but I just didn’t have the time to get it done. We ended up using Mapbox layers instead to show simple bubbles on the map showing product surplus and shortages.
In the end I was very happy with the solution we delivered and it was an added bonus that we took first prize in the competition. I’m glad we participated and I can now cross “winning a hackathon” off my bucket list!
For more information about our hackathon solution, read my full article over on the JUSDA blog