Making a simple web app blindfolded, and with both arms tied…

Over the last weekend, I was looking to brush up my web-dev skills (what little I had learned on the side). I decided to make a simple web app for my residents to use (I am a Resident Advisor).

Objective: Display tips, event news, free food notifications provided regularly by RAs and faculty to residents on a website.

Front-end: A simple site with a big red button that would display “tips” one at a time.

Back-end: Umm…

I was using GitHub pages to host my app. And GitHub pages do not let any one mess with back-end voodoo. The solution? Google Sheets!

It was the perfect back-end. I created a Google Form linked to my sheet and gave it to other RAs and faculty members. That way they wouldn’t have to see the labyrinthine array of cells. Plus, the form would help eliminate user error from directly working on the spreadsheet. And another big plus: I could add data validation features and data processing functions in sheets so everything would be in pristine condition.

Then I used this awesome library: Tabletop.js to pull in my spreadsheet data. The rest was just using JavaScript to display the information however I pleased.

Simple. As. That.

You can see it in action here.