Want to just see the final version? Go to leoniateachers.rubensoh.org.

The current teacher website portal is a simple webpage consisting of three links to three separate Google Sheets spreadsheets, one per school. This current approach is a poor experience for someone looking to find a teacher’s website quickly and easily.
The user must first navigate to the Leonia Schools main page, then to the first portal containing links to the three spreadsheets, then to Google Sheets (and wait for it to load), and then finally scroll around and find their teacher (scroll sideways if they are on mobile to find the website) and then click on the cell once and the link a second time to finally get to their website.

Creating a Search Tool

I wanted to create a tool that would improve upon the existing system. While supplementing the current spreadsheets, I wanted to make teacher websites more easily accessible. I also wanted the new solution to require no re-architecting of the current spreadsheet system.

I arrived at the conclusion that I would make an entirely client-side web application that depended on the Google Sheets document for data. This comes with a couple benefits:

  • The webpage / tool is very simple to get up and running, requiring only static files.
  • Maintainers of the teacher website Google Sheets documents would not have to learn any new systems.
  • Integration is seamless with the existing system.

To do this, my application pulls data from the Google Sheets documents every hour, updating the client-side list of search results. When the spreadsheet is updated, it takes at most 2 hours and in most cases 0 for the tool’s data to reflect the spreadsheets.

UI/UX

The purpose of the tool was simple, and I wanted it’s interface to be intuitive and easy to understand at a first glance. This is why I opted for such a clean and boring interface, with a simple search box with the prompt ‘TYPE YOUR TEACHERS NAME’.

While the use of popup modals for displaying website URLs may seem initially redundant and a waste of users time, it is done with the intention updating the application in the future to reflect other data provided in the spreadsheet as well.

Deployment

If you want to deploy your own copy of the tool, you are free to do so. It is licensed under the MIT license. Please view https://gitlab.com/rubensoh/leonia-teacherwebsite-launcher for more information regarding deployment of the tool.

Technology Stack

I decided on bootstrapping the app with the create-react-app tool, which uses webpack. The client-side version of the app has the React library and a couple other lightweight tools used for getting the data from Google Sheets and various React plugins.

My code is a little spaghetti, but it’s perfectly functional and as far as I can tell, glitch free.