We had originally planned on creating a healthcare management app, but we attended a brainstorming session on the first day of the hackathon and were immediately inspired by the idea of "Tinder for board games." We liked the idea because it was light-hearted and a fun entertainment project to work on, and all of us would actively use the app if it existed. It is an idea that allows us to connect in real life, in this digitalized world.

What it does

The web app matches users with others in their area who have similar interests in board games, card games, RPGs - you name it - and allows them to connect. The users would be given options of others nearby who were interested in similar games, and facilitate their exchanging contact information in order to meet up.

How I built it

On the front end, we used React and a framework for React called MaterialUI. On the backend, we hosted an AWS server with a MySQL database, where we stored our user information such as username, password, name, interests, location and so on. We communicate from the front-end to the backend using JavaScripts that calls PHP files which communicates with our server and database. The idea was to match people through our queries; similar interests, locations, etc will be matched together and be returned to the website.

Challenges I ran into

We had never worked with React before so it was challenging to understand the intricacies of not only React but also MaterialUI, which we understood to be similar to Bootstrap for React. We decided to use MaterialUI, which was a relatively small framework, in order to better style and present our app. Unfortunately, it did not have helpful documentation on issues such as managing and serving form data.

On the back end, we ran into several server errors that we were unable to resolve such as Error 500: Internal Server Error. As a result, we are presenting and submitting our design and front-end here to display our ideas.

Accomplishments that I'm proud of

We are proud that we learned some new frameworks and became familiar with the syntax and styling of React applications. We all came across new languages and frameworks and are proud that we were able to make something with the new information. We're also proud of our teamwork and collaboration efforts, and how well we were able to work with strangers from around the world!

What I learned

We each learned new languages and frameworks, both from the internet and documentation and from one another. One of the main lessons we learned was a developer classic — that we should prioritize making sure our separate roles in the front- and back-end integrate well.

What's next for PlayMate

There are many improvements we would like to make, including on a basic level working out the server errors and posting data from React. Once this is worked out, we could make a much more sophisticated app, including location with GPS, social media integration, ID security checks, matching based off categories of games, multi-page support, a built-in chat using technology, etc.

Share this project: