🌀 memeWave2: Hackathon Project Story

🚀 Inspiration

The idea for memeWave2 was born from a simple truth: memes run the internet. They're how people connect, laugh, and even spread ideas at lightning speed. But not everyone is a Photoshop wizard or meme sage. I wanted to create something that gave anyone the ability to ride the meme wave—whether you're funny or just have funny friends.

To give it personality, I introduced Trashy, a mischievous raccoon mascot who embodies the chaotic spirit of internet meme culture. Trashy’s job? To help users channel viral energy with the click of a button.

🛠️ How We Built It

Tech Stack:

• Frontend: HTML, CSS, JavaScript (Vanilla)
• Backend/AI: OpenAI API for meme caption generation
• Image Handling: HTML5 Canvas for image overlay and meme rendering
• Hosting: GitHub Pages (for quick deployment and sharing)

Key Features:

• Users can upload any image or choose from a set of meme-ready templates.
• With a single click, AI generates a meme-worthy caption.
• Users can tweak the captions or regenerate until it feels just right.
• Built-in meme editor with drag-to-position text and font customization.
• Export final memes as PNG for easy sharing.

💡 What I Learned

• How to integrate AI into a playful, user-facing application
• Canvas rendering and dynamic font manipulation on images
• Efficient client-side image processing without a backend server
• How to manage user input sanitization when generating content with LLMs
• How a strong mascot like Trashy helps define brand tone and vibe

🧗 Challenges Faced

• Balancing Creativity vs Control: Giving users enough freedom while making the UI foolproof was tricky. Letting users drag text was fun, but handling edge cases (off-screen text, overlapping, font resizing) was challenging.
• AI Prompt Tuning: Crafting the right prompts for OpenAI to generate meme captions that were humorous, relevant, and safe took significant iteration.
• Time Constraints: With limited hours during the hackathon, I had to rapidly prototype and iterate—deciding which features were essential vs. nice-to-have.
• Cross-Browser Issues: Some rendering quirks appeared on different browsers—especially with Canvas and image compression—so a lot of testing went into making it work smoothly across platforms.

🧾 Final Thoughts

memeWave2 is more than a meme tool—it’s a creative sandbox powered by AI. Whether you’re memeing about your cat, your boss, or the existential dread of Mondays, memeWave2 makes it fast, funny, and accessible.

And Trashy approves. 🦝😎

Built With

• react
• tailwind
• typescript