Inspiration

The water cooler. The hallmark of casual coversation. The perfect place to meet someone new, connect with a friendly coworker, and take a much-needed break your the work day.

University students all around the world have been scrambling to prepare for online fall semesters due to the COVID-19 pandemic. Learning at home is challenging, with less collaboration, more distractions, less accountability, and a lack of daily structure. However, as incoming freshmen, we are most concerned about the logsitics of developing the strong peer groups required to overcome the academic challenge of first year. Though communications technology exists, interactions with complete strangers are awkward to initiate, especially virtually. So how might we replicate the environment where one can take a break from their daily grind and friendships can flourish?

Watercooler aims to do just that. By creating an environment where online students can engage in random and casual conversation ‘at the water cooler’ between work sessions, Watercooler will enable students to help each other succeed academically and socially during their online semesters.

What it does

Watercooler is a web application hosted on firebase. Upon loading you are greeted with home page that explains more about Watercooler and how to use it. This page acts as our external marketing, and attempts to appeal to university students (especially those in first year) by stating its value proposition with three simple phrases: BUILDING COMMUNITY, PRODUCTIVITY, and ACADEMIC SUPPORT. In greater detail, it appeals to students by talking about some major pain points, or things that they may be concerned about entering first year (mental health, focusing from home, and making new friends are all at the top of the list). From the landing page, you can download the chrome extension and visit our project on devpost, as well as signup, login to our portal, and learn more about our team members. In order to get started it is important that you have an account. show signing up new person Once you have done that, we send a code to your professional email to verify. Then you can simply login show a diff login than the one just made since a new account can’t have hours done already, and it takes you to the Office Dashboard. From here there’s many things you can do, but the first thing you need to do is download our chrome extension. This extension tracks your productivity, and controls how often you are allowed to access the water cooler and interact with other students.. Once you download the extension, simply load it on the chrome extension store and viola, you’re all set up! Every time you start a new session, a timer starts to keep track of your work. If you get distracted and visit websites such as netflix, youtube, etc., the extension detects it and pauses your timer since you are not making good use of your time. Upon leaving that website, your timer will automatically continue. Once you finish your one hour of working, you will be taken to a page where you can award yourself to a Watercooler break. This is where our program matches you with someone from your school and gives you the opportunity to talk to them for 15 minutes as your way to socialize, and network, all while staying productive. If you enjoy talking to the person you are connected with, you can add them as a friend and find them in your friends list later. Once your Watercooler break of 15 minutes has ended, you can return to Office Dashboard and look at your friendlist. Here you can find anyone that you connected with in the past, and added as a friend. You can also see their status on the app, whether they are taking a break, working or busy on a call. If you find someone who is free, you can click on their profile and request to call them and further build your relationship. You can also return to the office dashboard to see your statistics. In this section you can see your hours worked this week and the week prior as well as some community stats such as ranking and where your friends are. That is a fairly comprehensive overview of Watercooler’s current features, but You can find out more about us the creators of Watercooler on the ‘Meet the Team’ page where we talked about our contributions as well as our linkedins.

How we built it

Our web application uses Firebase, Google Charts API, Javascript, jQuery, HTML/CSS, Socket.io, Express, and Node.js to allow people to casually connect from their homes. We created a Firebase RealTime Database in order to keep track of each user’s information, while also setting up both Firebase Authentication and Firebase Hosting in order to keep all our user information together, authenticate our users and their emails, and to successfully host our website. Socket.io, Express, and Node.js are used with an API called WebRTC (Web Real-time Connection) in order for us to be able to host video conferencing through our platform in the future as opposed to randomly generated Google Meet codes.

Challenges we ran into

  • Integrating Firebase
  • Using both CSS Grid and Flexbox in the same document caused some weird formatting
  • Connecting the chrome extension to the firebase

Accomplishments that we're proud of

Hima - I have been working with frontend programming for 2-3 months now but I had never really taken the step to explore server-side programming or backend programming. Through the course of the hackathon I was able to learn how to use Node.js, Socket.io, Express.js, and Firebase. I learned more in these few days than in the past few months. I’m happy with the substantial work that I was able to do.

Joss - this is the first website I’ve built, and I learned more than I ever thought I could in one weekend! I learned how to use CSS grid, flexbox, how to integrate tons of html stuff, learned how to use figma for design and drawing icons and stuff.

Preesha - I am proud of the fact that I was able to learn so much from Hima about firebase, but mainly about my first chrome extension. I've never made one before and the extension is amazing. I am also proud of the quality of the websites I was able to make. Although I've made websites before, they have never been visually appealing but the ones for Watercooler and I am so glad I mastered that skill in this hackathon.

What we learned

Hima - I learned the importance of perseverance and youtube tutorials. Due to the fact that I was working with technologies that I had never used, I was bound to be faced with frustration. I learned that there’s always something out there that will help me. Things like Firebase are extremely well documented so I made sure to make good use of my resources.

Joss - I learned so much about web dev and that I become a better coder when I listen to Nicki Minaj and Cardi B! I used tons of technologies I hadn't used before, and finally became confident that I can teach myself anything using youtube.

Preesha - I learned the usage and development process of a chrome extension as well as how hard it is to create and integrate databases. I furthermore sharpened my design skills which will definitely help me in the future.

What's next for Watercooler

Notifications = So the user knows when they are on a non-productive site when they are done their timer when they receive a call

Pretty = Even though it looks really good, there are many design aspects that could have been better and we will be working on bettering the UI

Authentication = authenticate new users using their work/school email with a certain code, to avoid stranger danger. friends feature

Share this project:

Updates