Virtual coffee chats are one of the most powerful networking tools out there, especially during these times of remote work and limited socialization. Although platforms like LinkedIn exist, they are solely professional, achievement-oriented and their target audience lie just beyond young adults.

Coffee Hours is a youth-friendly website used for facilitating virtual coffee chats with current students, faculty members and alumni from universities across Canada. This is a platform for students where genuine interest to learn about others and their experiences is cultivated, rather than being consumed by the culture of networking for the "sake of getting a job or into the most popular university program".

What it does

  • Fully functional authentication system with error messages for incorrect credentials
  • Has a database of vetted mentors that have experiences from various Canadian universities and are at different stages of their education/careers. The individual profiles of these “mentors” display a casual picture, name, and filter tags that each mentor identifies with, such as “University Professor,” “Photography” or “Women in STEM.” After checking out their profiles and reading their stories, you can directly book a coffee chat with them! (functional)
  • Mentors for every university can be filtered according to the various tags
  • You can visit the Community Hub after your coffee chat to impart some of your key takeaways to other mentors/mentees. When you’re done, you can scroll through the other comments and see what others have learned! (functional)

How we built it

  • Figma for high-fidelity mockups
  • React.js for the frontend
  • Firebase for the backend

Accessibility Elements

  • The website is keyboard friendly to accommodate for some devices that are used to assist people but are only capable of navigating through the site with a keyboard (using tab and such)
  • Contrast sensitivity was considered when choosing the colour palette for Coffee Hours to ensure a user doesn’t mind the colours too straining or hard to use the site. (tried to ensure that all colour pairings reflect the Web Content Accessibility Guidelines of >7 on the construct checker)
  • Detailed alt text available for images used
  • Created urls for the different pages with high readability standards in mind

Challenges we ran into

  • Not setting alarms!
  • Some of us were not familiar with the technology used (eg. React, Figma) so progress didn’t go as smoothly as we had originally hoped
  • completing everything on time: we were quite ambitious in terms of wanting our project to be well thought-out and complete, so it took a lot of time and effort to build all of the components and put everything together in the span of only 36 hours

Accomplishments that we're proud of

  • Implementing most of the functionality we wanted! (reaching our goal felt amazing!)
  • Working with new people with different skillsets to create both a high-fidelity mockups and a functional prototype, as well as a completed pitch/video on time
  • Focusing both on learning new skills and creating a competitive project
  • Finding new ways to make our projects more accessible

What we learned

coding is hard D:

Rachel: first hackathon! (suggestions: create my first hackathon project learning to go through the entire ideation phase, business model brainstorming and pitch + video editing creation in 36 hours!)

Binal: Dabbled with front-end and created wireframes for a web project for the first time. Working with a new team is so fun and a great learning experience - also I need sleep !

Emily: I helped with design which is something I don’t have much experience with, and it was fun to follow along and see the process! I also haven’t worked on a React project in a little while, so it was fun to revisit it and build Coffee Hours with the team :)

Fariha: Working with firebase for the first time! I was unsure about whether I’d even be able to figure out how to use firebase and make a full blown app using it in such a short timespan - but looks like it all worked out in the end and I’m super happy about everything I’ve learned!

Worked with new people in different programs/years but coincidentally go to the same university (will be getting coffee together soon ;))

What's next for Coffee Hours

Future steps for Coffee Hours would aim to increase user satisfaction, accessibility, and security.

  • To increase personability, mentors will be able to upload video introductions to their profiles, paired with a feature that automatically creates a video transcript for accessibility.
  • Email and institutional verification for users would add an extra layer of security for all members involved.
  • Add relevant descriptor tags and filters to access the content you’re looking for easily and pare down your search
  • Launching Coffee Hours officially. The early B2C stages would be sustained upon ad revenue and launched in a smaller environment, such as a university or a program. By outreaching towards student ambassadors and council groups, we can encourage current students to sign up and create a mentor profile. As we expand, Coffee Hours can employ a B2B model, billing institutions for their students’ usage of the site, allowing us to provide financial incentive for mentors.

Built With

+ 12 more
Share this project: