Tack

Looking for a group to study with? Tack helps you find and meet classmates in your campus.

Comment

Inspiration

Meeting new people and making friends can be challenging in university, and with this Covid pandemic, students may be so accustomed to isolation that even when this pandemic is resolved, students may find themselves not wanting to be socially active. Because of this, we wanted to build an application where it will make it easier for students to find study groups in campus and as a result form close bonds, which is what people really need. We created Tack as a tool to create a better studying experience in school through easier access to social interaction.

What it does

Tack is a web application that helps students to meet new classmates and friends to study with in their university/college. Currently, it displays a map of the Waterloo University campus and allows users to add a marker to the map of where they are studying at, what course they are studying and how many seats are available for studying. Other students can browse through the map, see if they are studying the same course as another person, and if they are interested, they can go to that location and have a study session with another classmate/classmates!

How I built it

We first designed the website with Figma and for the frontend we used React. We implemented the leaflet js API for displaying the map and the map-related functionalities. For the backend, we used Node Express and MySQL to keep track of user accounts.

Challenges I ran into

We had some trouble integrating the leaflet js API and displaying the map but we managed to figure out the problem and it now works how we visioned it too! Although some of us had experience using React, it was still a little bit challenging to build this application with React. We also wanted to integrate the cockroach database but decided we had little time to learn and implement it. We instead used MySQL to keep track of user information

Accomplishments that I'm proud of

  • Integrating React and Leaflet js together.
  • Integrating React and Node Express
  • Implementing the add/remove marker functionalities.

What I learned

  • Designing on Figma
  • Using the React framework
  • Implementing the Leaflet js library

What's next for Tack

Implementing more features such as filter by course, adding friends (distinction by coloured markers), supporting many more campuses (UofT, McMaster, Queens, etc). A messaging system.

Share this project:

Updates