my happy place

Inspiration

With the rise of technology and social media, we’ve seen that with young adults and teenagers, confidence is inversely proportional. For those on Social Media, the atmosphere is not healthy, it seems often competitive and superficial, leading those to resort to losing their own “sense of self” through external validation. The title “my happy place” is not at all misleading, our website offers users from all backgrounds a safe place, a place to be vulnerable, which is completely hard to do online. With the privacy of “my happy place”, a user subconsciously strays away from the desire of external validation, from uploading a picture of a “dish that fills up with warmth” to “a song that never fails to move you to its rhythm”. “my happy place” continuously offers a break from social media toxicity.

What it does

When entering “my happy place”, the user is prompted with a login screen, where they can either create an account or sign in, and once the user has entered their happy place, they are able to listen to a curated happy playlist while deciding to either make or view a memory. With the option of “making a memory”, they essentially choose to upload to the “my happy place” database that will be shown to only them. The “making a memory” option includes the ability to choose a prompt and explain the significance of the question and being able to store it in the database. If the user chooses the “viewing a memory” option, they then can see the images and captions they have uploaded in affiliation to their account.

How we built

Constructed purely from HTML, CSS, JS and jQuery (along with the help from resources like Bootstrap), this webpage currently operates utilizing five different HTML files, two CSS files and two JS files (one of which mainly served as a playground for experimenting with Twilio). The files were collaboratively created by all four members of the team utilizing Microsoft’s VSCode extension, Live Share (which greatly helped us through the course of the hackathon).

Challenges we ran into

We ran into some issues with attempting to incorporate outside APIs and resources like Twilio, React and GraphQL (mainly because we were all fairly inexperienced with utilizing them). In a future rendition, we like to imagine that we would have been able to incorporate the ability for the user to share happy memories with loved ones utilizing an online resource like Twilio. Along with this, we struggled with perfecting the functionality of our login page along with our “making memories” page, both of which involved a good amount of trial and error over the past 24 hours.

Accomplishments that we're proud of

We’re really proud of being able to create a user login for the site. We originally ran into a lot of issues with implementing a way to authorize users this way, but we eventually managed to pivot from React and GraphQL and use Firebase and Javascript to come up with a desired outcome.

What we learned

This was the first hackathon for all of our team members, so it was a substantial learning experience for all of us. For many of us, this was our first experience actually applying our coding skills to something as applicable as a web application, and learning some of the intricacies of HTML and CSS. Implementing Javascript and Firebase with our code in order to allow the user to interact with the site through logging in and adding files in text was also a great learning experience.

What's next for my happy place

The next steps that would be taken for my happy place are:

Incorporating a resource like Twilio so that users can share memories with their loved ones
Adding a way for more prompts to be accessed and randomized in appearance to the user
Adding a way for the user’s “viewing memories” to be randomized in order/appearance
Highlighting memories made on a certain day (similar to “this is how you were feeling about topic a year ago…”, etc.)
Adding more versatility to the Spotify embedded link
Allowing the user to upload their own happy playlist or successfully creating a personalized playlist for each logged user