What it does

When users enter the website, they first choose between a list of different emotions or moods, depending on how they feel at a given moment. We looked to inspiration from the most widely recognized emotions in psychological academia, with a few fun ones thrown in as well. On the first page, users can also select if they would like to listen to music, with choices being calming lo-fi trap music, soothing raindrops, or simple silence while they scroll. This option links to an outside youtube video, allowing users to have the choice to do so. From there, we use reddit's API to pull images, gifs, and videos to show to the user, all depending on which mood they select. The app focuses the user’s attention on one image at a time, and includes an auto-scroll feature that the user can toggle on or off. Lastly, we have a list of available mental health resources that can be viewed at any time by clicking the “i” icon.

How we built it

We built this first by using Python to get reddit's API information, looking at the submission URLs. From there, we used flask to transfer the information from the backend to the frontend. We used vanilla HTML, CSS, Javascript and “Splide” JS library.

Challenges we ran into

One of the big challenges we ran into was figuring out and learning a new framework, flask, issues with correctly displaying information and having one image to focus on, difficulties with autoplaying sounds based on different browsers, formatting for different device sizes, as well as working with different browsers.

Accomplishments that we're proud of

We were able to implement almost all of the functionality we wanted - the website is simple, aesthetically pleasing, and allows the user to relax with funny memes. From speaking to others, we’ve seen a lot of interest from people actually wanting to use the app for its intended purpose, and unanimously people have agreed that it’s a good way to relax.

What we learned

We learned how to use Flask, how to set up a linode server, more practice in prototyping with Figma, and that Firefox and Chrome are superior browsers, as they do not allow for sound to automatically play on a website. We also learned how to design pages using html, css, and javascript.

What's next for Mood Memes

We aim to implement a broader featureset in the future that improves the experience further. One is to have a like-dislike system, similar to Pandora, in that when a user likes a meme, they would be more likely to see similar memes in the future, and vice versa for disliking. We also would love to further integrate the music player so that it can play in the background no matter which browser the user is using the web app from.

Share this project:

Updates