Chat Hero

Logo

Inspiration

During the multiple COVID lockdowns last year, our team and many other people experienced a severe lack of human interaction. Doing our best to socially distance while having some fun we decided to play online board games but ran into problems trying to figure out how to communicate while playing. Certain solutions required a lot of setup and were overly complicated so we decided to streamline the process by creating Chat Hero!

What it does

Chat Hero is a chrome extension that allows users to join virtual rooms with friends or strangers where you can interact with one another by text while playing online board games. The purpose of this implementation is to allow for easy communication and interaction on any website so you can play games together or hang out while watching a movie.

How we built it

Chat Hero has two main components, The extension/web component as well as the database component; both components are an integral aspect in the function of the app. The extension uses HTML5 and CSS3 to create an appealing and simple user interface that anyone can use. The database component features a MySQL database along with a couple of Php files so that the web app can converse with the backend database.

We started with the web component and created a visually appealing and easy to use user interface with HTML and CSS. WE then used the Php code to fetch and upload data to our database to add the chat function to our app.

Challenges we ran into

We ran into A LOT of challenges while making this app. Given the fact that our team was not too familiar with SQL and databases we found it very hard to get our database set up and running. We began using CockroachDB however after hours of trying we kept getting issue while trying to run our database and so we resulted in some alternate options. The database software that ended up working for us was MySQL.

Another issue we ran into was how to link a chrome extension with different html and Php files that we were working on. Although our team has had previous experience with web development none of us had any experience with chrome extensions so this was a very challenging task to figure out. However after a lot of research, team work and error messages, we figured out how to implement a chrome extension for our project

Accomplishments that we're proud of

We're really proud of learning HTML, PHP and utilizing MySQL. These are skills we have never learned before and using them to make our first ever chrome extension, in our first hackathon, is a memory we will cherish forever.

What we learned

The main thing we learning during this project was that you should never stop trying to solve your problems no matter how hard it is. There were many times that we all wanted to give up after we would fail over and over again. There were times when it seemed that none of the code we tried would ever work. However we kept a positive attitude and encouraged each other to keep going and at the end of it all it was extremely worth it. On top of that we also learned and got familiar with many web development interfaces which is a huge skill to have in the field of computer science

What's next for Chat Hero

We hope to continue developing the Chat Hero project. Our vision for the immediate future is to allow users to share what's on their screens and further down the line add games you can play together right from Chat Hero!