MemeBattle

Welcome Screen
New users can sign up and start playing
Returning users can login and resume playing
This is the Home screen, where users can choose what to do next
The player battle screen
The player is searching for gifs, we are getting the results from the GiphySearch API
Battle results before showing the winner
The final battle results
The user can play another game, or return to home page
Profile Screen - where the player can see their winning memes and win count
One of our mockups in Figma (expectations vs reality)

Meme Battle (Online)

Battle the computer or your friends to see who can win with the Best Meme! Get out there and collect those memes!

Description

Nico Stranquist @nstranquist Branson Fox @bransonf Conor Kolmer @kolmercm

Together we are glad to be a part of this Open Hacks event and we think we have created something you as the user, will enjoy. MemeBattle (Online) is a mobile app for iOS and Android users who are looking to collect all the memes! They will be prompted to create a username and password and from there, they can join a game or view their previous collection of winning memes. Once a game is joined, one player will be named the judge and the others will be given a collection of memes to search from. Once all the memes have been sent in the judge will pick the winner who will have the winning card added to his “collection”.

Technologies Used

React-Native
Redux
Figma
MongoDB
Node/Express
Google Cloud Platform Compute Engine
Giphy API
Python/JavaScript
Websockets (Socket.io)

To Run On Your Computer:

git clone
cd server
yarn install && yarn start-server
cd ../client
yarn install && yarn android

Reflections

We all challenged ourselves this weekend. @bransonf had never written an API with Node/Express, or ever used React Native. @nstranquist had never used websockets before. @kolmercm had never used Figma, and this was his first hackathon! We all struggled with websockets and learning new technologies. Setting up new environments was particularly hard to do remotely, but we overcame these challenges.

We all learned some really cool tools this weekend as well. The best of which is definitely VS Code LiveShare. We all helped @kolmercm set up his dev environment remotely. We remotely collaborated on the same React-Native code in realtime from Midnight to 5AM!

Overall, we just created something really fun. Once everything was working, we found ourselves playing round after round. We truly built something that we would use ourselves.

Built With

Submitted to

OpenHacks
- Winner Best use of MongoDB Atlas (valued at $99)

Created by

I created most of the react native app, and used my programming knowledge to help debug errors as they came up. This was my first virtual hackathon and I think our team and open hacks both did a great job.

Nico Stranquist
I helped work on the design aspect of the project. It was my first time using Figma, which took a second to learn, but it is a great and handy tool for all designers.

Conor Kolmer
I worked on the backend. This was my first time using Node, Express and Websockets. It was a great experience and I learned a lot about working remotely.

Branson Fox