Web app

Open-Gym Schedule Re-Design

Web app

Open-Gym Schedule Re-Design

Web app

Open-Gym Schedule Re-Design

The Overview

Open Gym goers at the University of Calgary! Are you tired of looking at the outdated UI of the current open gym schedule? Well look no further, the new intuitive re-design is here! I've personally used the old version lots and it's tedious going row by row looking through the table of schedules. It's embarrassing going to kinesiology only to realize you looked at the times wrong!

Visit the website here: 👉 UC Active Living Open Gym (uc-open-gym.ca) 👈

Please feel free to also check out our: Figma / Source Code / One-Pager.

The Solution

First the app uses a library called Cheerio to scrape the original schedule website. Once that is done, the scraped data is stored in our MongoDB Atlas instance as a cache. Now anytime someone accesses our website, we make an api call to our server to retrieve the cache! To make sure the data doesn't get stale, we also have a cron job that runs every 24 hours to scrape the original website again.

Features

Filter down to the sports you play with toggles that filter the schedule data
Day & week views that mimic the familliar calendar layout
A downloadable iCAL file with events for the day, week or month

Skills Applied:

• AWS • Vercel • HTML/CSS • JavaScript • REST API

The Result

We initially tried to use tRPC and Zod for our API definitions. This would have allowed for end-to-end type safety. But deploying became too difficult because our server is deployed on AWS, and our front-end is deployed on Vercel. We ultimately had to pivot to a REST API

Zustand is a great way to organize state management that allowed us to refactor numerous areas of our code. Initially, we were using the out of the box react hooks such as useState and useContext, which made the code base messy with lots of prop drilling. With Zustand, all of it was consolidated and more maintainable. Making changes moving forward will be way easier too!
We underestimated how hard it would be to deploy our server. We chose to use an EC2 Instance, which by default only allows HTTP traffic. However, Vercel enforces HTTPS as the protocol used for security reasons. This led to our team learning how to certify with SSL by first protecting our EC2 behind a load balancer, which then required a certificate from AWS Certificate Manager.

Moving Forward

If you're someone who goes to open gyms at UCalgary, please try out our website! We put a lot of effort and thought into the design, and we hope that reflects in the user experience. Also, if you have any ideas for improvements, don't hesitate to send me or any of the contributors an email!