Hacktoberfest - PR #4

    The final Pull Request for Hacktoberfest is here and I decided to look for an issue that is about front-end creations, just like my previous Pull Request. I found a repository named Artistify, which was suggested by a fellow student Jasper Mui for he had worked on that same repository for his final Pull Request.

    Artistify is a web app that can pull music videos from youtube and allow the users to create their own list of songs and play them in the queue order. The Issue requested for buttons on the queue cards to allow change for the position in the queue of hovered queue cards, moving the current card up or down the queued list. This feature was needed in case the already implemented drag and drop function fails to function, it is a good alternate option to move queue cards.

    To get started with the new feature, first I had to gain a general sense of how the web app manages queue lists in the front-end. I was able to get a good idea of how to move the cards using the already implemented codes since there was already a drag and drop function that involves moving the positions of the queue cards. But before all that, I will have to create buttons for the functions using material UI and CSS.

    I went through a couple of different ideas before deciding on what the buttons will look like. Initially, I planned to create the buttons so that it will appear on the side of the queue card to maximize the viewing experience. As much as I personally liked this design, that plan was quickly scratched after realizing that buttons outside the Box element margin will not be displayed. (this design was created by MS paint, not CSS)

 The second design was to have buttons inside the card and on both sides, the buttons inside the card will have a low opacity to allow the user to still see the card visuals. Initially, this would be a good idea. But due to the existing remove button, the buttons will intersect with each other, therefore I decided that I rather not change something that I didn't get full permissions to.

    The final design was decided after I got permission from one of the project's organizers to change the size of the layout so I could have more space to place my buttons. The final design was made after increasing the size of the card layout, it was placed along with the part under the video thumbnail, where the video titles are located. To create the buttons, I used the IconButton component from material UI that allows icons to become buttons. I removed the icon outer color so that it only shows the arrow and not the circle border around the arrows, and then sat the background color of the component to a darker shade of the title section.

    When the button is pressed, it will determine if the selected queue card is either at the end or front of the queue. If they are not moving to an invalid position, the function will execute to move the card up or down the queue.

    Before the implementation of the buttons, when a queue card was hovered over by a mouse, only a button to remove the current card will be displayed.

    After everything is done, the new queue cards will have buttons to allow the options of moving the current card up or down the queue order.

I learned tons of things in front-end design and had a better understanding of what works and what doesn't under certain types of limitations and work with what I got.

Hacktoberfest Experience

    Hacktoberfest was a great experience for me, it was the first time that I have engaged in community-related projects. Throughout the month, I have browsed through countless amounts of repositories on Github with the filtered search. I saw that while there is such an abundance of selections to choose from, I could only pick on the few ones that I can understand and those that are within my skill range. I felt inexperienced, but ultimately it inspired me to one day be knowledgeable enough to work on any issue that I come across.

    

    I also saw that most repository owners are enthusiastic about their project and are generally optimistic and patient with possible solutions for their issues because we are beginners. I've also learned different ways that people structure their projects and how they organize their codes.

    My favorite repository to work on during this month was my final pull request. I got to spend a huge time creating the best UI I could think of through trials and errors to conclude on the final design to go with. It was fun to pour time and effort in order to end with something that you are satisfied with.