Making a Meme Maker for Moms

Today marks the end of my first ‘project week’ in Flatiron School’s full time software engineering program. Over the last seven days, my cohort and I created our first web apps to show off our nascent front-end development skills and begin building portfolios.

A major component of this project was the selection and use of public APIs to create a dynamic web app. Armed with this requirement and an intention to make something unique for Mother’s Day (which is on May 9th by the way), I created a meme maker to help moms motivate their loveable, lazy kids. Try it here.

My app uses a free API called LoremFlickr to generate random images (with creative commons licenses) from Flickr. Images are pulled from collections tagged with the text in the Image Category form. The form defaults to ‘animal’ (who doesn’t love animal pics?) but can be changed by the user at any time.

The caption text, which can be toggled from white to black and vice versa, does not reset when a new image is produced, enabling users to apply the same text to as many photos as they would like without having to retype each time.

After trying several photo APIs, I settled on LoremFlickr because it had no download limits and was 100% free. Unfortunately for me, it’s sort of an “API-lite.” Any browser call to a specific URL returns a picture, circumventing the need to use the fetch function to ‘GET’ data. Thus, I added another API, called boredapi, to meet the project requirement of using fetch. I used this API to generate random activity ideas.

While I had a total blast building this app, I ran into the following challenges:

• Challenge 1: While this API is super easy to use and doesn’t have usage limits, image category tags are inconsistent and sometimes incorrect, which can yield strange, unexpected images. Before releasing this app into the wild, I would find a better API or use a drop down box to limit the search terms to a few categories that return appropriate images.

• Challenge 2: Shortly after using text overlays on the images, I realized that users would not be able to save the image with text using the browser’s “save image as” function. That functionality was important to several user stories as well as the stretch goal of saving images to a local server. I worked feverishly for days learning to use canvas and massaging the Javascript…but hey, did someone say fever?
• Challenge 3: Following my second COVID-19 shot, I was laid up for two days. By the time I crawled back into the office chair on Friday, my timeline for project completion was significantly reduced. After realizing that I would have to either develop layered canvas elements or use a hack with form elements over canvas (and subsequently lose the text color toggle functionality) I abandoned my work with canvas. I was left with no choice but to require visitors to use screen capture to save their memes. This also put the kibosh on my stretch goal of saving the memes to a local server. While I could have just pushed some random data to a local server, it wouldn’t have added anything useful to the product so I opted to spend that time working on visual elements. If I make this app available online, I will consider going back to canvas so that users can more easily save their memes.

• Challenge 4: Up until last week, I felt pretty good with HTML and CSS. However, getting the elements positioned on the page was surprisingly time-intensive and I realized I have a ways to go before I reach HTML Hyperion status. I never got to add those pastel flower images I found online. That will surely disappoint flower-loving moms across the nation but what’s a lazy kid to do?

All in all making this app was a lot of fun. In addition to learning something about canvas, I also came to appreciate the importance of drawing up a wireframe and really fleshing out functionality before diving into the code. Keeping organized by writing down decisions and milestones will also be a good practice for me going forward.

Thanks for reading! Please feel free to leave any recommendations or comments. Phase Two, see you tomorrow.