Calgary Compass

Homepage

Inspiration

As Calgarians who are passionate about our city's vibrant culture and rich heritage, we embarked on creating Calgary Compass with a singular mission: to make exploring Calgary effortless and enjoyable for both locals and tourists alike. Inspired by our own experiences navigating the city's diverse attractions, we sought to provide a seamless platform where users can easily discover hidden gems and iconic landmarks, and create personalized itineraries tailored to their interests.

What it does

Calgary Compass serves as a comprehensive guide for users to delve into Calgary's rich tapestry of attractions. By selecting tags corresponding to their interests, such as Public Art or Historic Resources, users can explore detailed activity listings and view each location on an integrated map. Users can then add those activities to an itinerary, customizing it to their needs. After the user is finished making their itinerary, they have the option to save it to their profile, where they can view it as needed.

How we built it

We built the project using React and Typescript as our main web framework and used the City of Calgary's Open Data Portal to retrieve recreation data. Additionally, we used Material-UI for the front end, MongoDB Atlas for the back end, and React-Google-Maps to integrate a map of Calgary.

Challenges we ran into

The initial challenges we encountered involved collecting data and determining which data was relevant and could be accurately integrated into our code. Our second challenge was managing the storage of data and ensuring it was displayed correctly on the "Create Itinerary" page. The third hurdle was linking the map to the place selected by the user. Finally, we faced the task of displaying the most recent itinerary created by the user.

Accomplishments that we're proud of

We are proud to have developed an interactive itinerary that enables users to add places from categories such as "Public Art," "Historic Resources," and "Park Sites." After choosing a category, users can browse through various locations and add them to their itinerary. Additionally, we created an interactive map to display the location of the selected place.

What we learned

While working on this project, we had to utilize unfamiliar libraries and languages, including MaterialUI, React-Google-Maps, MomentJS, and gather data from the City of Calgary Recreation. This required us to quickly learn how to navigate documentation and adapt to new syntax. The project was largely new to us, which meant we had to adopt a growth mindset, understanding that failure is an opportunity for learning. With sufficient effort, we believed we could reach the finish line.