Seam Meme is an exceptionally special Miniapp because it represents the collaborative spirit and community building we hope will become common on Seam. Originally designed by the winners of the SCAD x Seam Design Challenge this September, Seam Meme was recently brought to life by an engineer in the Fractal Bootcamp. This Miniapp makes it easy for anyone to create custom memes using a selection of templates and drag-and-drop text. We also love that this collaborative effort has the potential to expand when the Seam community decides to build more features.

The Design Process

The talented students at SCAD created all these assets for the design challenge in one weekend! It was impressive to see what they were capable of doing, and the level of professionalism they brought to presenting their work and creating thorough flows.

How to use Seam Meme

1. Select your meme template from the wide variety of options provided

2. Add text and use the slider under the button to change the size

3. Drag your text to the desired location

4. Use the undo button to remove recently added text, or the trash can icon to reselect your template

5. Preview your creation, and post!

What we love: Seam Meme is an easy way to create memes about everything from current events to inside jokes. It’s also an exciting example of the teamwork between designers and engineers we love to see on Seam!

The Technical Implementation: All miniapp code is open source, and can be found in Pull Request #114 in the Seam miniapp repository. Seam user @danielgavidia remixed many existing elements in miniapps to create a meme editor. Some highlights from the implementation:

• It uses the imgflip API to automatically import trending meme templates.

• To make the text draggable, it imports the react-draggable library.

• Added a data loader util function that sends image to Firebase Storage (rather than uploading string to model), similar to the Magic Card app.

  • To upload images in miniapps on Seam, we’ve provided an upload emulator tool to make sure it’s easy to test the implementation!

As always, it’s easy to create your own miniapp for Seam — get started at docs.getseam.xyz.