Qchat

Inspiration and What it does

With COVID-19 causing the world to go into isolation and self-quarantine, we decided to create an application that allows you to hang out and meet new people in the comfort and safety of your own home. We also decided that we want to try and help local restaurants in these stressful times, as many local businesses are struggling due to the effects of social distancing. We let you choose the restaurant and food you may want near you, and we’ll get it for you with GrubHub! This website, called Qchat, with the Q for Quarantine, lets us combat social distancing by letting us meet new people, while still allowing us to stay safe from COVID-19. You can have dinner with friends or even go on dates while still maintaining social distancing.

How we built it

Qchat is built using React, Javascript, HTML, CSS, BootStrap, Python, Flask, Selenium, and Firebase. We used React, Javascript, HTML, BootStrap, and CSS for the front-end development of the website, from the home, about, and contact us screen, to the swiping feature to find matches. We used Flask to query data to store the users’ name, contact information, gender and gender preference, and other information onto Firebase for storage. We also used Flask to combine the React, HTML, CSS, BootStrap, and Javascript code with the python selenium script that automated the GrubHub purchase of the user’s desired restaurant and order. The user is first asked to login, and after logging in, they can either input some information, or update their information if they are an existing user in the Firebase. After inputting their information, with the most notable information being their gender preference, they can now start swiping. We used a 3D style implementation of swiping, similar to a deck of cards, showing a person's picture as well as a bio. If there is a mutual swipe right, the two users are matched and can start to have a hangout/date. But first, they must enter their restaurant and order of choice and our selenium bot will autonomously make the purchase using GrubHub and send it to the user’s location. The selenium bot does this by sending the user the nearest five restaurants for the user to choose from. Now the user can meet some new people and have a delicious meal, all over video chat!

Challenges we ran into

We had trouble running Selenium to click certain buttons at first, which is why we ended up using GrubHub over other food delivery apps such as DoorDash or Ubereats, as GrubHub’s buttons worked the best with our program. We also had trouble with Flask not being able to update the css code continuously, as we eventually realized we had to clear certain browser caches in order to allow Flask to refresh the css correctly.

Accomplishments that I'm proud of

We are proud of the fact that our application had many parts and did not just have a few simple functionalities, and we were still able to finish everything on time, and learned a lot from new libraries and languages too!

What I learned

In this hackathon, we were able to learn how to correctly blend both front-end and back-end development, with us learning how Flask can be a middle-man combining both the React, CSS, Javascript, and HTML components, with the Firebase database and python selenium script, to give users the full experience. We also learned how to use selenium to navigate through websites autonomously, as it was our first time testing that out.

What's next for Qchat

The next steps for Qchat is being able to build a better bot for automating GrubHub purchases, as well as to implement some more machine learning algorithms in order to have a better idea of what types of people the user may be interested in depending on who they may have swiped right/left for. We would also want to add a chat server feature to the website, so you can chat before you get to talk to each other and also would want to touch up the website design and overall front-end even more.

Discord Usernames: xXOblivionHDXx#4696, yashdhaduti#9904