RoomWise

The Login Page
A map of the first floor of Riddell Library
A room being selected on the map
The Group Finding Page
The Group Finding Room with more Groups
The Room Finding Page
Filters being used on the Room Finding Page
Filters being used on the Room Finding Page
No Rooms being Found

Inspiration

Navigating campus has been hard for students ever since the in-person experience was interrupted by COVID-19. As students return to campus they are seeking out the best places to study. We found that classrooms search tools provided by institutions were lacking in two ways: First they don't contain information about what a student can expect to find in each room. Second they don't allow for students to utilize free space to study for shared classes. That is what we set out to create with RoomWise.

What it does

RoomWise allows students to see the spaces that can be used for studying on a map and set up regular meetings for study groups, partner assignments, or clubs. Students can sort rooms based on accessibility, noise level, floor, and capacity and view recurring study groups.

How we built it

We decided to build our site using React with a Flask back-end. We wanted to try and utilize the flexibility of React and pair that with the speed of Flask. We began by mocking up all our pages in Figma and gathering user data from some Google forms. We then began interpolating that data into the real site.

Challenges we ran into

Each member of our team took this as an opportunity to learn something new. As you could expect working with new languages, frameworks, and APIs and integrating them together posed many challenges, most of which we overcame. Our primary struggles came from not knowing the full capabilities of the tools we used and using inefficient methods before learning about best practices.

Things we learned

That the google maps API only refreshes data taken from KML files every few hours
There are four sets of location values google maps uses: latitude and longitude; world coordinates; pixel coordinates; and tile coordinates.
Nested react routing
How to create SQL databases with multiple tables
That you should commit regularly
How to prioritize features

Built With

Submitted to

CalgaryHacks 2023
- Winner Tier 2 - First Place

Created by

I worked on the google maps integration. We used the API to insert a custom styled map with a KML layer used to show the rooms in the library. It was my first time using the Google Maps API and JavaScript so I learned a lot!

Sunny Parmar
I contributed to this project by developing a SQL database, and a python/flask program to sort, interpret and add to the information contained in the database.

Marusia Luciuk
I was primarily focused on the front-end development using React and CSS. I got the opportunity to work with nested react-routers, which was a great experience.

Matthew Hrehirchuk
plastic disk enthusiast
I attempted to work on a Python Flask back-end, and learned a lot about databases and connecting to SQL in the process.

Jaunie Williams
I worked on setting up google maps API to work with with our React.js front end. I also advised on and created elements for more "high" level decisions such as our chosen tech stack, brand name, and logo.

7riumph Aramunde