Inspiration

Our inspiration came from a need for some laughs in unprecedented times like these. Memes have always been there to make us smile, and so just like how wikipedia organizes the history of more formal items, memopedia does the same for memes! Our product is for families to learn and to laugh at the same time!

What it does

When you click our link (https://meme-o-pedia.glitch.me/), you are immediately shown the timeline of memes, dating all the way back to 1920! The 12 most iconic memes are shown through images and gifs. We even created a web app to go with the last one, called the fairy comment generator, but more on that later. The fun part of our page is the memeify button, which essentially transforms our page into its own meme, equipped with fun fonts, colors, and backgrounds! The fairy generator page is based off of a popular tiktok trend, and is sure to make anyone laugh with its sarcastic, but still lighthearted remarks! Finally, the playlist page features a personalized quiz to gauge what era of “meme-music” each user would enjoy the most!

How we built it

everything coded and submitted for this project was made this weekend. no coding was done before the hackathon Our team worked on Glitch to collaborate to make this website using HTML/CSS and JavaScript. We used jQuery to facilitate the changing pages, as well as a bit of css animation! By starting off with a simple HTML flexbox, our team was able to build it into the entire web app!

Challenges we ran into

We mainly ran into challenges relating to JavaScript because it was our first time using the language. In the past we’ve only used HTML and CSS, so this was definitely a new and learning-filled adventure! We were able to create a quiz as well as randomize the fairy comments through javascript, as well as make the memeify button work!

Accomplishments that we're proud of

We are very proud of the end result, because we believe we focused a lot on design and ensuring the user has a great experience! Designed for laughs and positivity, we are elated that all the buttons, generators, and quizzes worked out as planned!

What we learned

Throughout this entire project, our team has not only learned the history behind each iconic image/video, but also have pushed ourselves in regards to our coding skills. The fairy comment generator was one of the more challenging aspects of the website which required a sophisticated back-end framework. And building this framework taught us about how dynamic websites can transform with substantial JS.

What's next for Meme-o-pedia!

In the future, our team would like to incorporate more features onto the website which allow users to access a larger variety of memes across all different languages. Memes are more than just funny images - they define our culture worldwide, and so providing a page that is accessible to all languages and features content from across the globe is really important for meme-opedia. From a technological aspect, our team is eager to branch off into different realms of coding by utilizing complex CSS animations, and detailed JavaScript to enhance UI and ultimately make the website more dynamic. And most importantly, we are excited to build a mobile-app version of meme-opedia to make this educational product available on all devices! As for the “memeify” option, we would like to build more onto that part of the website as well.

Share this project:

Updates