The rise of social medai and image sharing sites have led to the development of an "Internet Meme Culture". The impact of these images upon everyday life and conversation have steadily grown. These viral images have provided an outlet for many online to express themselves and promote discussion of a myriad of different topics, ranging from politics to cute animals. Our team wanted to harness the influence of this powerful cultural phenomenon and utilize it to test the compatibility of two individuals on a deeper, and more memeingful scale.
What it does
We attended LA Hacks having taking inspiration from the likes of Kahoot! and The Test and we wanted to find the compatibility of individuals based on their meme preferences. Our application uses sockets.io to live connect users. When two users are connected to the server at once, they are notified and asked if they are ready. Once both users click on the ready button, the game starts.
The game displays various memes and asks users to rate them using our reaction system. Users are given a time limit of 10 seconds to rate a meme before the next one is displayed. Our matching algorithm takes into account the amount of time for the user to react as well as the similarity of responses between the two users. Our algorithm will then produce a percentage; the higher this percentage is, the more meme compatible the two users are. We also have included preventative measures in our compatibility algorithm to ensure that the users actually take time to read and react to the meme and that they do not cheat.
How we built it
After hours of idea planning, we decided to just start making a website. A few members began creating a basic image gallery using HTML, CSS, and Bootstrap. One of us then began to focus on web scraping and another one of us began to work on image enlargement. The remainder of the team worked on a reaction system.
We ended up scrapping image enlargement because our project moved from a meme gallery to a meme compatibility test. In an effort to try to get web scraping working, we moved much of our code from HTML to Handlebars.js. Unfortunately, we could still not get web scraping working and instead decided to just create an array of links to memes. After the team decided to switch from making a meme image gallery to a meme compatibility test, we also reworked a significant amount of the UI.
We then spent the latter half of the hackathon focused on implementing game logic and ensuring that our users are able to connect using sockets.io. We also spent a lot of time polishing our UI and making it look presentable.
Challenges we ran into
One of the biggest issues we ran into was that it was not initially clear what the project was going to be. We spent a lot of time brainstorming but after making no progress on ideas, we decided to proceed with coding because we needed to get something done. We moved from making an Instagram / Imgur like page for meme content to creating a meme game. Unfortunately, we invested plenty of time and resources towards making the former and scrapped plenty of previous work such as image enlargement and sorting.
We struggled significantly between getting server-side and client-side scripting to work together. One of the ideas we initially tried to employ was web scraping meme websites for a constant supply of new content. While we managed to get web scraping working, it was difficult to deploy the pictures onto our actual website. This was largely an issue of timing since our scraper had to wait a certain amount of time in order to scrape dynamic content. Overall, timing ended up being an issue with several other things in our project as well. We had to make sure that the users' games began at the exact same time and that if one user finished first, they would be sent to a waiting screen until the other user finished.
Accomplishments that we're proud of
- First finished hackathon project for some members of the team
- Stylish user interface
- Multiplayer actually works (some of us could not get it working during our last hackathon)
- Learned a lot about web development
What we learned
- CSS animation
- HTML DOM
- There are so many problems working between server-side and client-side
- Sleeping on the ground sucks