Souper Bowl of Caring was started in 1990 by a group of high school students looking to do some good on Super Bowl Sunday. Over the years they contacted more groups in their area - mainly churches and schools - encouraging them to participate as well. This grew, eventually going national in 2002. None of the money was sent back to the headquarters, they just asked that each group called in with how much they raised so they could nave a national total.
When I was brought on board in 2005, Souper Bowl of Caring was manning a phone bank of about 150 volunteers each Super Bowl Sunday to record all of the totals. Data-driven websites were just starting to become more popular, and they hoped to create a web-experience that would allow participants to update their own totals through the website. This would also create data that was able to be aggregated and graphed, helping the communications staff better reach out nationally.
The website circa 2004
What started as a simple page with our phone number has grown to a robust web portal. Users log in can interact with the site a number of ways depending on their user type. Participants can report their totals, update their contact information, or post photos. Staff members can use tools to search participation data or generate data reports. The youth board can communicate with one another via message boards. The development staff can even search donation history via QuickBooks. Events can be posted on the calendar, news articles written, and donations can be made online.
The website circa 2017
All of this is written from scratch utilizing the CakePHP web framework. It's running on a single Debian machine running Apache, stored in a MySQL database. As new technologies have emerged I was able to introduce them into the workflow. The CSS is written in SASS based on the Bootstrap SASS build. High-priority forms - like the form allowing Participants to report their totals or where employees log their hours worked - have been developed in React to be single-page applications. Libraries like jQuery are used sparringly. This is all housed in a git repository for easier deployment, safter data-backup, and maintaining testing branches.
I've also developed a number of open-source plugins to make developing faster for the site. Plugins like Uploadable
make adding and resizing images easier, FormData
for quick CRUD bootstrapping, and CakeAssets
for combining and minimizing JS and CSS assets.