Intro

When the quarantine started, many college seniors, as well as young adults were upset about losing the social aspect of their daily lives. They would not be able to go to the bars/clubs/outdoor outings that they have been looking forward to with friends and instead be bound to the inside of their homes. Staying safe and social distancing was vital in order to flatten the curve and ensure public safety, but we knew there was more that we could do to give people like ourselves the atmosphere they were looking for in a club or bar without leaving their homes.

What We Built

We built TheQuarantini.Club. A video chatting platform for your friends only where you can order virtual drinks in a club-like atmosphere and chat with friends while sipping on an Espresso Martini that your resident bartender just served you. These chatrooms have no time limit unlike Zoom and are private to your friends with a unique code. Host up to 8 friends in the room for a fun time socializing while keeping your distance!

Project Management

Before Trello, we used a Google Doc that was a central place for jotting down our thoughts on how to approach the project, what features we’d like to see, and how to plan it out for the hackathon. We then switched to a Trello board to monitor all features, bugs, testing, ideas, design, and more to keep a neat, organized project that ensured we wouldn’t be scattered all over the place while developing this project. After new features were added, or crucial bugs were fixed, we ran user testing sessions with friends to see how they were using our platform. We then iterated again and again.

Design

While development began, one team member was designing the overall layout of the web app, from graphics of the bartender and bar to the user flow, to how users would utilize the video chat room. Softwares such as Sketch and Character Animator were used to create animated character GIFs. Below are a few screenshots of what was contained in the Sketch file.

All of the assets found in the web application were drawn up in Sketch and exported for use in the web app. The bottom-most picture represents the application mockup for a social media kit where we published it to Product Hunt in one instance.

User Flow

The user flow was set up to ensure simplicity and efficiency in order to get to the user to their friends as fast as possible. One way we accomplished this is by not having signup or login, allowing users to keep private and their information off the site. Users would create temporary, local-to-room usernames that only the users in that room could see and once the session was completed, all traces of their tokens and usernames would be erased.

Users could quickly start rooms, or join rooms with a unique code. From there users were placed in a room with friends and the central location held the bar and bartender — where users could place a drink of their choice and be placed in a queue, just like a real-life bar or club scenario. Once users were done, they could either quit the window or click the log out to remove themselves from the video chat. The two images below represent the entire flow.

Stack

We started by following this tutorial to get a better idea of how to integrate the Twilio Programmable Video SDK into a react project: https://www.twilio.com/blog/video-chat-react-hooks

For the frontend of the project, we went with React.js. As for the backend, we didn't need to store any data so building our own database was not necessary. We created routes to make calls to the Twilio API using Node.js and Express.js.

We incorporated Socket.io to pass the drink information in real-time. All the users inside the rooms can see who placed what drink, and what the queue order is.

We also wanted to incorporate a way for users to be able to make tips that would benefit a COVID-19 relief fund. This was accomplished by using the Stripe API for payment processing.

Animations were quite easy to do by using react-spring animations. This library was perfect for making the app come to life.

The frontend is hosted on Netlify.com and the backend is hosted on Heroku.com

User Testing

As previously mentioned, user testing was vital in this in order to make sure everything was working properly. Many times bugs arose that we didn’t identify ourselves, but our users (friends) found from playing with the app. We noted those in Trello and immediately went to work figuring out the best method to get them squashed. We constantly used an iterative approach to finding, fixing, and redeploying for our users to test again.

Outcome

The outcome presented a full video chat application utilizing Twilio Video Programming SDK that allowed users to chat with their friends in the environment we originally proposed. We allowed users to order the drinks they wanted and be socializing with their friends in the atmosphere they so missed while being in the comfort of their own home.

Our last implemented feature was Tip for Covid Relief. Here we wanted to somehow give back and we added a button that allowed users to “tip their bartender” for a nice virtual drink that was made. All proceeds from these tips would go to a direct relief fund supporting the efforts in the fight against COVID-19. For this, we used Stripe as the payment platform.

Links:
Live Demo: https://www.thequarantini.club/
Source Code: https://github.com/ClubQuarentini