We didn't want to hand off a convoluted system that would require the careful touch of  DBA or dedicated developer, so we decided to snap together a few pre-built solutions, connected by some Javascript, HTML, and CSS.

We implemented the data-entry side as a Google Form. I spent some time investigating the possibility of styling an embedded Google Form, such that it matches the styling of Legal At at Work's site. Unfortunately, that seemed to be impossible without losing some features of the Form itself, like input validation. We decided to simply have a link to the form, and not allocate any more time to trying to embed it.

The data was stored in a Google Sheet. There was a Master Sheet, a copy of the data that the organization sent us, and there was a "Form Responses" sheet. We could then grab the data out of the form, and display it neatly in different ways on the page.

The first thing we did was to give an option to sort the data. From the data we had, we placed a dropdown that allowed the user to sort by school district. From there, a table was populated with the relevant data in an easy-to-see format.

We finished this portion with time to spare. I suggested that we add some charts or visualizations of the data. We found chartsjs, a free, easy way for us to plug charts in to our project. I iterated over different versions of the charting, and asked my friend to help me set the data up. Our team lead was really helpful.

Our final product, right as time was up, had the chart that would display one data point for any given selected school. We were able to demo a cohesive, almost-finished product that we were proud of!

Next steps

The biggest next-step we discussed was to add more ways to visualize the data. One is definitely to show more of the data points for any school. Another would be to have a comparison chart, to compare one or more data points between different schools or districts. There are tons of ways we could slice and dice the data and present it.

How I prepared

I went into the hackathon with a friend. Something we did that I found really helpful was that we met up the day before to make sure we were familiar with each other's skillsets, and that we had a group of the same tools we thought we might need before actually going into the hackathon. This was also helpful when I needed to ask for help. I was the most junior on my team, but because my friend and I had compared our skills, I knew what they could help me with the most effectively. We also made sure to both have the same sets of tools installed. I had never used Node.js, for example, so just in case, they suggested I install that with the npm.

Final Thoughts