ShelterCare Admin Portal

Introduction

This project started from a Hack-a-thon that a few of my friends and I attended in April of 2019. We were tasked with making an application that could be used cross platform on both computers and android phones. Given that android phones and computers would always be connected to the internet, my team and I decided that it would be best to create a web application. Our MVP was little more than a web page that could take in data and then place it into a google spreadsheet, so that entries could be viewed in real time by multiple ShelterCare admins. We used a combination of HTML, CSS, and JavaScript to drive it, and upon adding an entry the spreadsheet would generate and send an email alerting the relevant people that an entry had been added. Once we had shown ShelterCare the MVP that we had designed, they were eager for us to create a full fledged product that they could use in their day-to-day tasking. We agreed to come back and finish the product over the summer as we were all preoccupied with college, and would not be able to take on the responsibility until after Spring term was over.

Responsibilities

Admin Portal

The web page evolved into an admin portal that could change categories and select-ables inside of the android application and had items that were stored in the Firebase database. I headed, and designed the web page, and all of its functional parts using react in order to achieve dynamic tables that could be edited, queried, and viewed in real time. We ended up having multiple tables that had query-able items, and these items could be added or removed using only one click. Once any of these changes were enacted, they were immediately propagated up to the Firebase non-relational database and as these changes were instant, they would also have instant changes on the android application. Once the web page itself was formatted to the liking of the ShelterCare admins, we decided that we should also work in authentication, the obvious choice was using google auth, as all of the employees of ShelterCare were given a company gmail. So I designed the login page, and the drivers to get from the login page, to then check if the email was an admin, and then load the actual admin page. The last step was to make an admin guide, even though the admin portal was easy enough to use, we decided it would be best to have a short user guide, as we wanted to have something formal that new admins could read in order to get acquainted with the admin portal web site.

Spreadsheet

The automation of the spreadsheet started as being very basic, merely using google scripts to resize columns when a new row was added. I found that I was also able to timestamp entries when they were added, or moved. Next I worked on being able to automate the process of being able to archive when certain tasked had been marked as complete. Then I could check if the issues themselves were resolved and move them to an archive so that they main spreadsheet didn’t get overcrowded with entries that were no longer relevant. Using timers and triggers I was able to get the spreadsheet to move entries to an archive, once a day at the end of the work day, and was able to have the spreadsheet reformat itself whenever an entry was added to ensure maximum visibility of all the items within the spreadsheet.

Technologies Used

• React.js
  • This is the backbone of the Admin portal, all of the working parts of this website are a combination of React, its many libraries, and JSX.
• CSS/Bootstrap
  • We didn’t want to waste a lot of time on the styling of the web pages, as the ShelterCare people assured us that they were looking for a functional product, and not necessarily a beautiful one, but with Bootstrap we were able to give them something that was indeed functional first, but also had a modern look to it.
• HTML5
  • This is the backbone of any website, and was used as such. While we mainly used JSX within this project, it is really just HTML that is used by react to create elements.
• Firebase
  • Firebase is what we decided to use for the domain hosting of the website, and the storage of data for use inside the web pages.