Efren Palacios

View Website / View GitHub Source

Case Study: TEPPEN Card Maker

I was approached by the Reddit community of the game over at r/TEPPEN if I could provide a web app that could let the user create their customized card to share ideas.

Issues:

As there are many ways to generate images, most methods are done with server hosting, post/get methods to generate the image, and overall a very slow approach. This will defer anyone from using the tool if it took time to see the results.

Solution:

With the power of DOM manipulations with Canvas + Vue.js and a little library called Fabric.js we can create a web app that can allow the user to edit the card in real-time.

Using the combination of all the technology, we can update the image in real-time with no need to send the information to a server to see the changes, you even have the power to paste a picture from your clipboard! To save on any cost of storing images or generating temporary ones the app allows the user to save the image locally to their computer or open into a new tab to store it into the clipboard to showcase it.

Showcase:

Since the game itself explains the cards within the app, I also developed a page to showcase the card you have customized so the community can understand it better.

The same features of the previous app apply here as well.  Thanks to this app the community has had an easy method to express their creativity without learning much about any photo editing software.