TagIt-Meme battle Royale

TagIt: Create, Share, Tag Your Memes! A real-time multiplayer game where friends battle to create the funniest memes. Join rooms, edit templates, vote for favorites, and crown meme champions!

Comment 2

TagIt - Meme Battle Royale 🎮

Inspiration

Inspired by Minecraft Hypixel's "Build Battle", TagIt transforms the creative competition concept into a meme-making battleground. Just as players in Build Battle showcase their building creativity, TagIt players compete with their meme-making skills. We leveraged Amazon Q's developer assistance and AWS services to create a modern, real-time meme competition platform.

What It Does

TagIt is a real-time multiplayer meme creation battle where:

  • Players join game rooms (similar to Build Battle lobbies).
  • Each room gets a template image to meme-ify.
  • Players use our meme editor to add creative text.
  • Everyone votes on the best memes.
  • A leaderboard shows the meme champions.
  • Real-time updates keep the game exciting.

How We Built It

Our tech stack leverages AWS services and modern web technologies:

Frontend

  • React.js for dynamic UI.
  • Fabric.js for meme editing.
  • Material UI for sleek design.
  • WebSocket for real-time updates.
  • AWS S3 for meme storage.

Backend

  • Spring Boot for robust server.
  • WebSocket (STOMP) for real-time communication.
  • Dynamo DB for data persistence. -Imgflip api for meme template

AWS Services

-Amazon DynamoDB for persistance storage

  • Amazon S3 for image storage.
  • Amazon Q for development assistance.

Challenges We Ran Into

  • Implementing real-time meme submission and voting.
  • Managing S3 image cleanup after games.
  • Handling multiple concurrent game rooms.
  • Ensuring smooth WebSocket connections.
  • Creating a responsive meme editor.

Accomplishments That We're Proud Of

  • Built an engaging multiplayer meme game.
  • Successfully integrated AWS services.
  • Created an intuitive meme editor.
  • Implemented real-time game mechanics.
  • Developed a mobile-responsive design.

What We Learned

  • AWS service integration.
  • WebSocket implementation.
  • Real-time state management.
  • Image processing and storage.
  • Multiplayer game architecture.
  • Amazon Q's capabilities in development.

What's Next for TagIt

Future enhancements include:

  • Custom meme templates upload.
  • Tournament mode.
  • Private game rooms.
  • More text styling options.
  • Meme template categories.
  • Mobile app version.
  • Integration with more AWS services.
Share this project:

Updates