Personal Information
Name: Shelly Suthar
IRC nick: shelly
Email address: shellysuthar@gmail.com
Time Zone: UTC+5:30
GitHub: github.com/Shelly011s
PRs: all
Introduction
The Fresh Releases page is meant to be a music discovery tool. It enables all users to browse new releases, and users who have submitted listens to ListenBrainz can have a personalised page that displays Fresh Releases relevant to their past listening history. This project aims at improving the current UI/UX of fresh releases page.Updating the UI is vital for improving user experience. By implementing a more intuitive and user-friendly design, users can navigate through the product or service with ease, resulting in greater satisfaction.
Project goals
Deliverables of this project are -
- Redesigned Release Card component that now supports conditional display of properties like artists, release dates, and more.
- Implement a new sidebar that allows the user to filter fresh releases based on range of time, display and various tags associated with the release.
- Improve the Release Timeline Component in accordance with the Figma designs, which also support a new tooltip design.
- Make the design responsive for mobile devices as well.
Stretch Goals
- Currently the API endpoints do not include genre tags to be displayed on the release card so improving that by fetching the tags under metadata if present.
Implementation
The implementation refer to the figma designs as provided.
- Release Card Component displays all information about the release.
a. Show a play button on hover.Currently it does not support playing the releases.
b. Integrating brainzPlayer to allow the user to listen to their new release by clicking on the play button.
c.Allowing users to add a cover art in an absence of cover art.
d. Display a hourglass icon for a future release on hover
2.Implement a new sidebar. I would like to discuss the use of react-switch library for implementing the toggles.
3.Upgrade the release timeline scrollbar. Refer to this PR for the thumb scroll implementation.
4.Implement responsive designs by using media-query in respective less files.
Timeline
Community Bonding
Become familiar with ListenBrainz’s codebase, collaborating with the team to discuss important details such as variable naming conventions, UI conventions, coding style, and API’s. It’s also essential to understand the specific areas of the ListenBrainz codebase where I’ll be working. Lastly, consulting the mentors for finalising the libraries to be used.
Week 1: Begin implementing the UI changes in the fresh Release page and modify the way data is displayed by the Release Card components.
Week 2: Modify the release grid to display date and relevance along with the Release cards. Also implement the “Sort By” select option.
Week 3: Moving on to implementing the side bar for filtering the releases. By this week I will implement the Display filter section.
Week 4: Continue building sidebar and implement the Types section of the sidebar.
Week 5: Finally implementing the Range and Include/Exclude tags section of the sidebar.Check the functionality of the entire sidebar.
Week 6: Work on timeline scrollbar and display its tooltip on drag.
Week 7 - Week 8: Work on making the design responsive for mobile.Fix bugs. Start implementing test cases for react components.
Week 9: Iterate on designs and improve on use cases after testing and receiving feedback from the community. Adding tests and snapshots.
Week 10: Continue adding tests for the newly build components.Fixing the remaining bugs if any.
Week 11 - Week 12: Implement any final changes as discussed with the mentors.Start writing documentation for the project and submit the code for final evaluation.
Other information
Detailed Information About Yourself
My name is Shelly Suthar and I am final year student pursuing Bachelor’s of Engineering from Gujarat Technological University,India. I started learning web development in second year of college and I am currently learning machine learning and AI. To work more efficiently on this project I also went through the previous contributions of Fresh Releases page.
Tell us about the computer(s) you have available for working on your SoC project!
I work with Dell Latitude E7490, Intel-i7(8th Gen) and 16 GB of RAM.
When did you first start programming?
I first started coding with C programming in my first year of college.
What type of music do you listen to? (Please list a series of MBIDs as examples.)
My music taste ranges from R&B/soul music from artists like anuv jain, keshi to pop/hip-hop music like ariana grande and kendrick lamar.
What aspects of the project you’re applying for the interest you the most?
I love listening to music while I’m coding my way through web development and working on this project is a perfect excuse to do so 
I enjoyed interacting with the MetaBrainz community and mentioned on IRC that I would like to work on implementing redesign of other pages of ListenBrainz as well.
Have you contributed to other Open Source projects? If so, which projects and can we see some of your code?
I have made few small contributions to open source projects under Girlscript Summer of Code and Hacktoberfest.
PR #47
PR #4359
What sorts of programming projects have you done on your own time?
I have mostly build projects using ReactJS,Redux for frontend and nodejs or flask for backend. Recently, after getting inspired from listenbrainz, I started working on Remix-Playlist which creates playlist based on common songs between two users. I also worked on chair shop which displays chairs in 3D and wall-of-words which is a react based blogging website.
How much time do you have available, and how would you plan to use it?
Keeping in mind that this is a project with flexible hours I will be providing 30 to 35 hours per week to the project. There may be slight fluctuations in performance due to college exams and other activities.