Host a tournament or join an existing one!

Host your own tournament with 4, 8, or 16 players, or join an already created tournament and go head to head with other players in a tourney-style competition.

Create your own meme caption!

You will be matched against another user in the tournament (PvP). Everyone will receive a randomly-generated meme to create a caption for. When all players have submitted their caption, voting will start.

Vote on other players' meme captions!

Everyone will be prompted to vote on other meme caption showdowns. The person with the most votes between the two moves onto the next round of player matches until there's only one player. If you lost a previous match, stay in the tournament to see more funny memes and vote for the winner! THERE CAN ONLY BE ONE!

Winner Winner Chicken Dinner!

The number of wins you've collected will be displayed in your profile dashboard and may place you on the leaderboard.

Look at your previous submissions and post your favorites!

In your profile, you will also find your history of memes you've submitted in every tournament you've been in. You can post the meme submissions you're proud of to the public feed for others to see and like.

View the competition and give them kudos!

Look through the public feed to view other meme submissions of proud players, and like their posts. There is an archive of all the posts you've liked, in case you need more inspiration for the next tournament you enter.

How this website works: Websocket, SockJS, STOMPJS

  1. 1

    A user logs into their account and joins a tournament as a player.

    When a user hosts a tournament, they are redirected to a tournament lobby page and will automatically be subscribed to a websocket stream as the host of the tournament. The host has the ability to set the amount of players that they want in the tournament, when the tournament starts, and when it ends. This websocket stream creates a new tournament object and connection that other players can join and subscribe to when they click the "join now" button on the home page.

  2. 2

    Websocket starts tournament and keeps connection between players.

    Once the allotted number of players have joined the tournament lobby, the host can then push the "start tournament" button, which sends a message to the websocket server to use its connection to direct all players to the start of the tournament and create a meme. Once all the players have submitted a caption to their meme, the stream will redirect all the players to the voting page to view other player memes to vote for their favorite. Websocket will then separate players based on the number of votes received, with the winners and losers being placed in their subsequent arrays.

  3. 3

    Websocket determines final winner!

    The persistent websocket connection will then launch the winners into another round of meme submissions and the losers will be sent to a waiting room until the other players have submitted their meme caption, where everyone will be voting for a winner. This cycle will continue until only one player is left! When the last round of voting has completed, the websocket connection will send a message to the backend server to save the tournament object which holds the id of the user who has won.

  4. 4

    Websocket connection ends and tournament information is saved onto server database.

    When the users have left the tournament, the websocket stream will end, and the meme submissions each user has created will be saved to the database. When the users who have participated in the tournament go into their profile view, they will find in their History tab all of their submitted memes, which they can decide to publish for all to see in the Feed view available to both visitors and users of the website. The winner will find another point added to their wins tally.

  5. 5

    The users can continue joining more tournaments, create more memes, and collect more wins!

    A websocket connection can be established at any time when the user decides to create a tournament. And then the cycle can continue from Step 1! Happy meme-making!(: