GSOC 2023: UI/UX improvements to our Fresh Releases page

MetaBrainz GSoC applications
,
1

Personal Information

Name: Jivtesh Singh

IRC nick: jivte

Email: pahuls017@gmail.com

Github: jivteshsingh

Time Zone: UTC+05:30

UI/UX improvements to our Fresh Releases page

Project Overview

In today’s world, users want to get in touch with the new fresh music that is being released and to stay updated about it. ListenBrainz users need not to worry as the fresh releases section keep them updated about the fresh music releasing around them aligning with their music taste as well as the overall new releases in the world. I want to take this fresh releases experience to next stage by implementing the new UI/UX improvements to fresh releases page and improve ListenBrainz’s experience as a whole.

My PRs: Check Out

My Commits: Check Out

Implementation

1. Implement the new design of the main fresh releases page.

This includes modifying the code in FreshReleases, ReleaseCard, ReleaseFilters and ReleaseTimeline components.

image

The slider on drag feature will be implemented in this way which includes refactoring the code in ReleaseTimeline component and in particular the rc-slider library used component.

For Mentors to better understand how I code I have already implemented the slider in a separate PR.

Apart from these while contributing at ListenBrainz I have also implemented these two features which will help the mentors to better access my skills.

  1. Playlist: search for user component
  2. Interface to manually add a listen

image

2. Implement the mobile responsive design of the fresh releases page.

image

We have decided to implement the toggles in this way on mobile web.

image

3. Implement the toggle display effect on releases.

The image icon on the top right corner is used to add an image to musicbrainz release.
The toggle feature will help to filter the releases and display information related to the release on releaseCard itself.

  1. Default settings with all releases selected.

image

  1. Default settings with releases for you selected.

image

  1. Custom settings and combinations.

image

4. Implement the hovering effect to have a overall nice experience on the page.

The play button will play the release on BrainzPlayer.
The hourglass icon while hovering indicates that the release is yet to be released.

  1. On hover effect on releases with cover art.

image

  1. On hover effect on releases without cover art.

image

  1. On hover effect on releases with a future release date with cover art.

image

  1. On hover effect on releases with a future release date without cover art.

image

5. Implement the single fresh releases page

Currently when we click on a fresh release it directs us to the musicbrainz page but it would be good if we have a detailed release page in listenbrainz itself. So we plan to implement a detailed single release page too.

We planned to add more genres/tags and link all the features in listencard like personally recommend, pin this track, open in musicbrainz and others to link the functionality in a better way.

  1. Release with multiple tracks.

image

  1. Release with single track.

image

Timeline

Here is the detailed overview of how I plan to spend the time on this project idea.

Pre-Community Bonding(April)

In this period I plan to work on implementing the add album feature in manually adding listens section and improve the overall feature for our users and fixing any bugs related to that.

Community Bonding Period(May-June)

I would plan to work on the pending work like the add album feature and discuss any improvements or features that can be added in the project and improve the overall UI for this project.

Week 1-2

In this period me and my mentors will discuss any further UI changes that needs to be implemented and start implementing the initial UI of the new listenbrainz fresh releases page which includes the UI changes like implementing the new release card component and hovering effects and other basic UI changes.

Week 3-5

In this period I plan to implement all the UI/UX changes on the main fresh releases pages which includes implementing the toggling filtering, the slider and filtering based on date and relevance score and fix any bugs related to that. This will finish up the main fresh releases page for web devices.

Week 6

In this period I plan to implement the responsive design of the fresh releases pages and fix any bugs and related to that.

Week 7-9

In this period I plan to implement the Detailed Fresh Release page and implement all the features related to this page and fix any remaining bugs if they are present.

Week 10

In this period I plan to add additional features which were discussed in the starting of the project with my mentors and implement them properly.

Week 11-12

In this period I plan to write documentation for this feature and finish up any pending work if it is there. Fix some bugs if they are present and brush some minute details for this project.

Stretch Goals

I plan to implement an Fresh release Artist page for ListenBrainz which currently opens up in MusicBrainz upon clicking the artist name.

Detailed Information About Yourself

My name is Jivtesh Singh. I am a second year student pursuing Bachelors in engineering in IT from University Institute of Engineering and Technology, Panjab University, Chandigarh, India. I love to listen music and try and discover new music tastes like folk music or hip-hop music.

Tell us about the computer(s) you have available for working on your SoC project!

I have got Acer Aspire 7 with 8 GB RAM AND NVIDIA GeForce GTX 1650.

When did you first start programming?

I started programming with javascript and web development last year.

What type of music do you listen to? (Please list a series of MBIDs as examples.)

I mostly listen to Punjabi music artists like Tarsem Jassar, Arjan Dhillon, Sidhu Moose Wala.

Below are the MBIDs of my most liked songs.

40863a10-5d47-4f00-83a6-41de97eeb99a
552fda69-3090-4ad0-902f-0e8daf718fa1
db48b9a0-86e1-47e0-bb1a-4bc0354a3a71
1f7fabdc-1ba2-4092-bf87-db0d3d716b14

What aspects of the project you’re applying for the interest you the most?

I love Web Development and listening to music, so discovering new and fresh music and listening them excites me a lot.

Have you contributed to other Open Source projects? If so, which projects and can we see some of your code?

ListenBrainz is the only Open Source Project where I have contributed to, as an Open Source Developer.

What sorts of programming projects have you done on your own time?

I mostly do Web Development and most of my projects are web development based. I also have keen interest in blockchain and NLP.

How much time do you have available, and how would you plan to use it?

I will be providing 40 to 45 hours per week for this project. In the timeline I provided, I have accounted for possible delays due to examinations and other college related activities.

3 Likes