-
-
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.
Log in or sign up for Devpost to join the conversation.