# Project Summary
Many people listen to music alone during the pandemic, but we strongly believe that interacting with other music lovers could properly enrich their music experience.

We created a platform that only focuses on music, which provides a variety of ways to help users express their feelings and understand others.

SongSurge is divided into two independent parts (share & search) so that both users with different purposes can immerse themselves in the emotional resonance with others.
# Instruction
Entering the platform users will face the log in page. Users can click sign up to sign up for new account.


After signing up the account information will be added to the server, and the users will be able to log in. Then a feed of SongSurgeShare will appear containing the posts other users had uploaded. This feed is the same for all users. On the right, users can check the hashtags and the moods, which allows users to filter their feed to contain only songs from those hashtag.


Users can share their own songs clicking the "Write a Post" button above the trending hashtags and moods. SongSurge asks for a link of the song to share, and after adding the link screen below appears.


Users can write anything about the song, including what they like about it or any episodes related to the song. Below are the hashtags, background color, and the mood users can freely add or choose. A preview of the post is shown at the right. Clicking the "Write Post" button the post is added on the feed, as in the image below.


Users can also post questions asking for a song that matches the explanation, and other users can comment recommending the song the post-writer seems to seek for. Hashtags and moods can be used to filter out the atmosphere of the song.


Users will also be able to add comments to each of the posts. In the comments, users can use emojis, pictures, and gifs to express more on their own ideas about the post or the song itself.

SongSurgeSearch - which can be switched clicking the word "Search" placed at the upper right - is implemented in a similar manner.

# URL
Prototype: https://songsurgehci.herokuapp.com/
Git Repository: https://github.com/daminho/song_surge
# Libraries and Framework
- joeattardi/emoji-button
- react-images-uploading
- react-bootstrap
- giphy/js-fetch-api
# Individual Reflections
### Yoonjeong Park (20180265)
I took part implementing the opening page (of entering the name to continue) and the optional section (write post/question, trending today, moody) while working on the project. Overall, it was about the first time implementing the UI of an application, it took some time for me to participate; I want to take this opportunity to say sorry for the long time it took. Similarly, it was a great opportunity for me to learn new skills on designing a user interface. To be more specific, I have learned the use of react and the implementation on CSS.

### Fathony Achmad (20180825)
In this project, I am working on the design implementation of the comment section. Creating a User Interface for commenting on other user post of song_surge. I mostly face difficulties on using some external libraries (emoji and gif) as their documentations are a bit confusing. Overall, I learned how I can create a user interface for a web application (as it is my first time to do so).

### Zihan Lin (20214941)
At this stage, I was responsible for the design and implementation of the user sharing page (post_content), and helped with making the "moody part" as well as the project report.
The difficulties I encountered include: converting the time users share music into a prescribed and beautiful format, adjusting the layout of each component of the page, and allowing users to customize the background color of their sharing page according to their mood.
One useful skill I learned is to use the function toDateString to convert the date part of the Date object into a readable string, and then use the split function to construct a string that is convenient for manipulation, and finally use the slice and join functions to process the string to get the desired format.

### Dang Minh Hoang (20200822)

I did the wireframe of the prototype UI, writing post/question pages, merged parts of code from teammates and designed the database with firebase.
The difficulty I faced is the different in teammates' coding convention, so it was hard for me to merge them together. I needed to adjust code multiple times whenever I merge one new part from teammate. Also, it takes me several nights to implement my part.

In fact, what I have learned from the hi-fi prototype was not related to the technical skill but the management and leading skills. While merging code, I saw that my teammate work result was under my expectation and missing some information about the code. I feel that was my fault because I did not prepare well to introduce to my team and also did not guide teamates clearly about the requirement so that it took me more time to merge the code and re-implement something.