In our last year of high school, COVID-19 has already taken away our prom, our graduation, and now, it is threatening our transition into university. With no way to attend freshman orientations or visit the campus in person, we decided to create TOUni. If students can’t visit the school of their dreams in-person, then we’ll bring it to them. We’ll give them the full immersive experience, complete with authentic student input - everything from the best parking spots to the worst fast-food restaurants in the area. Despite universities’ promise to deliver webinars and Youtube 360* videos, what we really need is a platform to build a student community and experience the campus for ourselves.

What it does

TOUni is a web-based application that allows students to virtually tour Canadian universities and experience student life when it is physically not possible. In this way, we’ll bring you TO Uni, and university TO U. After finding your university from our homepage, you’ll see the campus map decorated with multi-coloured pins. From residences to club meetings, these markers are contributed and reviewed by students to guide you throughout your tour. With both street and satellite views, you can easily find all your classes or just a quiet library study spot. You can read about experiences from all perspectives and chat with current and prospective students, alumni and professors through a comment panel. Most importantly, you can mark locations and post comments - after all, student interaction is what it’s all about.

How we built it

Within the past 24 hours, our team coded an easy-to-navigate website using front-end technologies including HTML, CSS and Javascript. On the back end, we took full advantage of the Google Cloud Platform and the powerful tools it offers. Using the Google Maps API, we displayed the campus maps of major Canadian universities, with markers overlayed to point out the most important “attractions”. For a truly immersive experience, we also incorporated Google Street View in combination with a self-designed side panel of comments. All this data (and more) was stored using the Firebase Realtime Database.

Through the power of teamwork, love and motivation we were able to assemble all of our and create this wonderful website for all students throughout the country.

Challenges we ran into

One challenge we faced regarding our project was the comment panel. We had to create buttons that would increase a counter, had drop-down menus, or had a pop-up interface. We were unfamiliar with all of these concepts and had to turn towards external research, such as online lessons. Because of our solid fundamentals in HTML, CSS, and Javascript, we were quickly able to learn how to code these buttons and proceeded with our project.

Having never used Firebase for a web project before, it took several Youtube tutorials and rereading the documentation to get the hang of it. Luckily, it was intuitive to use, and our progress soared as we eventually got the hang of it.

Based on diverse skill sets on our team, we planned to delegate tasks accordingly. It was an overall successful approach, but we learned it was often troublesome when it came to putting the parts back together. When integrating the UI with the Javascript code connected to Firebase, it was a tedious process of debugging and searching up errors on StackOverflow.

Accomplishments that we're proud of

As this is our first hackathon, we’re extremely proud of the progress we made within this short period of time. Some features that we’re proud of are:

  • Home Screen Here you can search up a campus of any Canadian university. After selecting the university of your choice, you are brought to a map of the campus. The final result of the home screen yielded the same aesthetic we were hoping for, along with a custom made logo that pairs nicely with the rest of the design of the home screen.

  • Campus Map A full view of the selected campus is provided so the user can get a general idea of the size and also see the highlights of activities around it. It was really difficult to scale the maps properly and fit it right beside the comment section. However, through perseverance, we were able to obtain our desired result of having the university map right beside the comment section.

  • Markers By clicking on a marker, you are able to see everyone’s general review of it, fun activities that run there and small quirks of the building. Markers are colour coded in order to filter between other markers. The markers were custom made, and help visually enhance the final prototype. Although this was not too difficult to do, it did take us quite a bit of time to achieve.

  • Comment Section Every comment can be upvoted or downvoted. The total amount of votes determines its popularity and reliability. This ensures that users can read the most accurate and relatable experiences. It was difficult implementing the arrows to get a total number of votes. We were able to solve the problem collaboratively!

  • Adding Markers In case there are special fun locations students want to point out, they are free to add any additional markers pinpointing a specific location. It was quite difficult to insert these markers as different errors would occur each time we refreshed the page. Solving this problem was quite the accomplishment as it was extremely mind and time-consuming.

What we learned

We learned that teamwork and collaboration are the most powerful tools in accomplishing anything. Without any one of our teammates, we would not have been able to accomplish what we have within these few hours. These skills were the driving force behind our accomplishments. We also learned how to manage our time more effectively and efficiently due to the short time restraint. When we fell behind we learned to continue motivating each other and persevere through the challenges.

Because of the time restraint, there was no possibility that we could have finished every idea we had for this project. Thus, we learned the importance of establishing priorities, as these would be aspects of our project that will be completed, and these aspects will highlight the overall function and importance of our project.

In addition, through these challenges, as previously mentioned, we were able to deepen our understanding of HTML, CSS, and Javascript. We also learned the basics of Firebase and Google Maps API. Both of which we had never used prior to this hackathon.

What's next for TOUni

We would like to implement some further features including a rating and comment systems for specific university programs and restaurants near the university, as well as creating a notification system that keeps track of any upcoming events and the locations that it will take place. Enhancing the UI/UX design on the website would allow for a more immersive and authentic experience. We would also love to expand the number of universities available on our website and hopefully become a worldwide site. It would also be a wonderful addition to include user sign in accounts for when they comment or give ratings to personalize the experience.

Share this project: