Updated MyBCIT Website

My First Hackathon Project

Old Login Page

New Login Page

Old Home Page

New Mobile Home Page (Upper)

New Mobile Home Page (Lower)

Old Campus Life Page

New Campus Life Page

New Mobile Campus Life Page

Old Student Resources Page

New Student Resources Page

New Mobile Student Resources Page (Upper)

New Mobile Student Resources Page (Middle)

On December 3rd, I attended my first Hackathon. It was organized by BCIT and ran from 9:00 AM on January 3rd, to 2 pm on January 4th. We were put into randomly assigned groups of 5 students and given a theme to produce a solution for. The theme was "As a BCIT Student I want _____, so that ______". 

My teams solution was "As a BCIT Student I want a more useful and mobile ready MyBCIT homepage, so that I can access the site on my phone and have access to more useful information." 

The MyBCIT website is one of the 3 sites we use as students, but it's the main site we use to get our course schedules, pay our tuition, and email our professors, among many other tasks. Unfortunately, it's not mobile ready, the course schedule is about 4 links deep from the home page, the search doesn't work (it takes you to another search engine where you have to re-enter the search terms again), and the campus map isn't very useful. We sought to produce a vision of what this website could be. 

One of our goals was to integrate a useful course calendar onto the main page. We wanted it to show the current days schedule on mobile, and a week on any larger screen size. As we did not know how to link to the built-in calendar or student course data, we used Google Calendar to simulate what we envisioned. 

The second main goal was to integrate a campus map onto the Campus Life page. BCIT has a clunky but useful campus map here. We tried embed it using an iFrame, but the permissions on the page wouldn't allow us to, so we just put a placeholder pdf map. 

The final goal was to style the pages like the rest of the BCIT website (grey, blue, white, and black), and make it fit neatly on a mobile screen, which we accomplished. 

There were some areas of the original website that we didn't have the time or knowledge to rework (like the groups, email, and help sections), but we felt that our main goal was accomplished. The site even has a working login page (for a fake student). 

To build the site we used HTML, CSS, Bootstrap, PHP, and a bit of jQuery. We didn't face any major challenges, just a few hiccups like getting the login to work, and getting the calendar to resize depending on the screen size. In the end, we were happy with what we produced. 

Feel free to take a look at the project here: 

team7csthackathon2018.azurewebsites.net

The username is A01234567 and the password is 1234567