Friend Hop
JavaScript(ES6)ReactFigma
A social media space where you can share what you're listening to, add friends, send messages. Friend Hop is an alternative way to keep you connected with your friends while logging your "theme songs of the week".
Create preset, customizable status updates that are just as cute as they are informational. Friend Hop is the old-school social media space for top dogs in music-sharing nostalgia!
Welcome to the Friend Hop Demo Reel!
Keep browsing through this project's catalog, there's a lot built into this web app!
Our about page
Friend Hop is similar to myspace, but spotify, but also twitter.
We used an external package we found on GitHub to support soundcloud embedded links on our page, in a format that would fit our UX design.
With more implementation, the amount of data, not just song links, can be shared, globally across the website, with any user.
Hi Magenta, first time here?
Our login/sign up, records the name of the user and represents it on their own individual page.
From here, Magenta can go on soundcloud, copy a shared sound file and paste it here to share with the website and it's users all over. Globally.
Custom expression!
Users can designate their own personal status for anyone else to view, which comes with their own depicted animations.
I.e. Feeling "angelic" shows our base avatar here with a pair of wings, a smile and a halo.
A way for users to feel more in control of what rudimentary controls Friend Hop can currently offer.
Besties!
Every user can add a bestie to their top 5.
Here you can see our stock-added users,
and view their pages, and much more!
An another user's page!
On Loraine's page, we can view all of the songs she is currently vibing out too, or maybe her top five of the week.
On Loraine's name plate, we also have the option to message her, or to remove her from our besties list.
We've capped the bestie list at 5, which said lists are only viewable to the host user themselves.
Another great feature is that you can add a song from Loraine's page to your page, if you so wished.
There are also failsafes in place so a user wouldn't be able to double add the same song, etc. Spam-prevention!
Search Results
A user, any user, globally being the main key word here, can look up any name, any song, any artist.
The search is set up this way with these given params, like twitter, so people can connect and grow not only their own music collection, but potentially connect with others who bond over similar type music.
And finally, our user's inbox
Once a user has been added to someone's bestie list, they are free to send them a message.
It is not spam-proof yet but, it's a feature in progress :)
For the shits and giggles
Instead of adding a dark mode/light mode toggle, we've added a based mode/SFW mode which toggles between base avatar graphics and a stock office with michael cera customizable status's for a user.
The change of the toggle reflects on external users, as in, Magenta in SFW (Michael Cera Mode) would be seen globally by other users on the website.