Where to Eat

An application written for Campus Dining at Northern Illinois University that helps students discover open dining locations and menus

Northern Illinois University
2016
· View App

The Challenge

Campus Dining Services at Northern Illinois University has over a dozen dining locations across campus. These locations have different hours, menus, and accept different methods of payment. They had a static page that they needed to update whenever hours changed or they were having a special event. Students had to go to each individual venue page to see its hours and figure out if it was open. And because it was updated manually, it was often not correct.

I was then asked to begin making updates to these pages. You would not believe how often regular hours for these venues changed. I needed to automate this somehow.

The old website displaying on-campus dining venues

I knew early on that I wanted a new page that could be updated easily without my help, and an easy-to-update page would lead to it also being a page that was always correct. I expanded the scope from just on-campus dining locations to also include off-campus dining locations where students could use their NIU Huskie Bucks debit account. Then I could call the page “Where to Eat” and solve a similar problem in another department’s website where they list off-campus food vendors partnered with the university.

Their current page also suffered from the problem where you have to click through to each detail view to see content, and the detail that students would see only included a link to the location’s website and whether or not they delivered. Students would have to go somewhere else to find hours or an address — two things I think many people want to know before they decide if they want to eat somewhere.

The old website displaying off-campus restaurants

Goals and Requirements

My goals for this project were to create an app where:

  • It clearly says which locations are open right now
  • It puts on-campus and off-campus locations in one place for added value
  • It lists what items each venue offers
  • It works great on mobile

And my requirements:

  • Make the best use of the existing theme on the NIU website
  • Must be easy for a non-technical person in the Dining department to update
  • No server-side logic or administrative interface possible

Where to Eat became an AngularJS application that gets its venue data from a static JSON file, gets on-campus hours from the university’s calendar system, and gets off-campus hours from the Google Places API.

The static JSON file allowed a less technical person to update the app with new venues (just need to understand JSON), while meeting my requirement for a solution that didn’t require server-side logic.

{
    “name”: “New Hall Dining”,
    “description”: “All You Care to Eat Breakfast…”,
    “url”: “/dining/where-to-eat/new-hall/index.shtml”,
    “moreHoursUrl”: “…”,
    “delivers”:false,
    “location”: {
        “building”: “New Hall Community Center”,
        “url”: “https://goo.gl/maps/xXRRXmxqzMu"
    },
    “category”:{
        “onCampus”: true,
        “offCampus”: false
    },
    “calendar”: {
        “eventType”: “Dining: New Hall”,
        “placeName”: “New Residence Hall - Community Center”,
        “roomName”: “New Hall Dining”
    },
    “features”: [
        “residentMeals”,
        “offCampusStudentMeals”,
        “facultyStaffMeals”,
        “flexDollars”,
        “huskieBucks”,
        “creditDebitCards”
    ],
    “costs”:[
        {
            “heading”: “All You Care to Eat Prices”,
            “items”:[
                {
                    “heading”: “Breakfast”,
                    “subheading”: “Monday - Saturday”,
                    “price”: “$5.95”
                },
                …
            ]
        }
    ],
    “contact”:{
        “phone”: “815-753-7650”,
        “link”: {
            “title”: “Leave Feedback”,
            “url”: “/dining/about/contact”
        }
    }
}

Retrieving venue hours from the university calendar allowed me to offload the chore of updating this page with new hours to a person in the Dining department. Since the calendar already did things like recurring events and RSS feeds very well, I didn't have to reimplement that logic on my end. Also, because of university procedures, it was much less trivial to grant access make calendar events than it was to allow someone to edit the website.

I used the Google Places API to look up hours for off-campus restaurants so that I could offload the responsibility of maintaining that information onto the business owners themselves. It also added value to the page by making it one place to see which off-campus locations were open, especially at night when most on-campus venues are closed.

Adding Menus

In addition to adding venue hours to the website, I was involved in implementing a new system Dining purchased that allows them to show nutritional information for meals. The system needed to be customized to match the style of the NIU website. I created a small AngularJS application that is really just a tabbed interface for switching between iframes, but it uses element names that make sense to someone who is familiar with that new nutrition system.


<menus>
    <menu title="Daily Menu" unit-id="dog-pound-deli-daily-menu">
        <meal name="Breakfast" default-selected-times="00:00-09:00"></meal>
        <meal name="Lunch and Dinner" default-selected-times="09:00-23:59"></meal>
    </menu>
    <menu title="Beverages" unit-id="dog-pound-deli-beverages"></menu>
    <menu title="Salad Bar" unit-id="dog-pound-deli-salad-bar"></menu>
    <menu title="Bagels, Cereals, Waffles" unit-id="dog-pound-deli-bagels-cereals-waffles"></menu>
</menus>
        

<menus>
    <menu title="Daily Menu" unit-id="dog-pound-deli-daily-menu">
        <meal name="Breakfast" default-selected-times="00:00-09:00"></meal>
        <meal name="Lunch and Dinner" default-selected-times="09:00-23:59"></meal>
    </menu>
    <menu title="Beverages" unit-id="dog-pound-deli-beverages"></menu>
    <menu title="Salad Bar" unit-id="dog-pound-deli-salad-bar"></menu>
    <menu title="Bagels, Cereals, Waffles" unit-id="dog-pound-deli-bagels-cereals-waffles"></menu>
</menus>

Beyond Just Where to Eat

The app ended up being flexible enough that with minimal tweaking I was able to use it for two other purposes at the university: showing Campus Recreation facility hours, and displaying on-campus computer labs with real-time lab availability. Using this app for computer labs replaced a process where Division of IT would previously upload PDFs of class schedules for each lab location, which made it difficult to see at-a-glance which labs were currently open.