GSoC 2022: Proposal for "Send a track to another user as a personal recommendation"

Send a track to another user as a personal recommendation

Personal Information

Name: Chinmay Kunkikar

IRC nick: chinmay

Email address: chinmay.kunkikar@gmail.com

Time Zone: UTC+5:30

GitHub: github.com/chinmaykunkikar

PRs: #1957, all

Introduction

Today, users want to suggest a track that they find interesting to their friends and other circles. It is a way of users to connect with others whom they share similar interests or similar tastes in music they listen to. Users on other music platforms are familiar with such features and tend to use it in their routine lives. While ListenBrainz users can recommend a track to all of their followers, I think it also needs to have a feature where a user can personally recommend another user a track. And I want to solve this by adding a way for users to send tracks as personal recommendations to other users.

Project goals

Deliverables of this project are -

  1. An option in ListenCard component called “Recommend to a user”
  2. A “Recommend to a user” modal that has a list of followers along with a checkbox along with a search box to search users. The modal will also have a textarea to enter an optional description to let the user explain why they are recommending the track. Finally, two action buttons “Send recommendation”, and “Cancel” at the end of the modal.
  3. Update the receiver’s feed with a ListenCard of that track similar to how users currently recommend or pin a track. This feed event will have a delete button to delete the recommendation.
  4. Implementing send email notification to user (receiver). The “Recommend to a user” modal will have a checkbox labeled “Send email notification”. So that when checked, the action button “Send recommendation” will also perform the action of sending an email notification to the receiver.

Mockups

  1. Modify ListenCard to add “Recommend to a user” option in the context menu.

  2. Modal to select users along with a search box. The list will populate Followers + Following by default.
    It will have an optional message box to describe the recommendation.
    Lastly, It will have a checkbox to send notification via email.

  3. Multi select in action

  4. The user feed will look something like this when someone recommends them a track. (The delete button to delete the event is missing from the current mockup).

Timeline

Community Bonding

Getting acquainted with the codebase of ListenBrainz and understanding how to submit and get the code reviewed. Discussing problem statements in detail with the team like variable naming conventions, coding style, getting in touch with who will be working on the backend for APIs.

Week 1: Understand relevant parts of the ListenBrainz codebase where I will be working. Get familiar with the API I will be working on. Discuss UI conventions with mentors.

Week 2: Begin implementing the “Recommend track to a user” as a ListenControl component in the ListenCard component. I will also practice writing test cases for this code and understand the process of code review.

Week 3: Begin building the Recommend track modal. I will build the basic structure of the modal and test it for responsiveness on multiple screens. I will also be manually testing the API that will be used.

Week 4: Continue building the Recommend track modal. Write logic to populate the user list from API.

Week 5: Work on the description box of the modal. Check the functionality of the Send Recommendation button.

Week 6: Work on the user timeline (Feed) and delete activity button.

Week 7 - Week 8: Work on notify via email feature. This will also involve some discussion with mentors.

Week 9: Test and take feedback from the community and iterate on the designs and improvise on use cases. Improve UI.

Week 10 - Week 12: Discuss with mentors and write documentation for final submission of the project.

Other information

  • Do you plan to have a job or study during the summer in conjunction with Summer of Code?
    I left my job at the end of march, So I will be available for almost the entire duration of GSoC. I am currently in the application process for studying masters abroad in the fall of 2022.

  • About the computer I have available for working on your SoC project:
    I’ll be using my personal laptop for the SoC project. It’s Dell Inspiron 5567 and below are the key specifications of the machine -

    • Intel Core i5-7200U (Kaby Lake) CPU with 16GB memory.
    • ATI Radeon 445M Graphics.
    • OS - I have dual booted my machine with a combination of Fedora 35 + Windows 10.
  • When did you first start programming?
    During my college, I learnt Java and Android development and got involved in forums like XDA Developers. Through XDA, I got interested in the Android Open Source Project (AOSP) and I wanted to build a custom ROM for my Android device. I got into a team to build a custom ROM called MinimalOS. We built a community on Google+ with more than 2400 numbers in about 8 months. My love for open source software and the open source organizations started to grow at this point. While still in college, I got into web development using PHP as well as JavaScript. My interest in Web development made me learn React during my last semester in Masters, where I built my MSc project - A video on demand platform - using ReactJS. During the same period, I also interned as a ReactJS developer at SteinnLabs.

  • What type of music do you listen to?

  • What aspects of the project you’re applying for interest you the most?
    I am applying to the ListenBrainz project. I am using last.fm to scrobble my listening data for the last two years and I enjoy seeing reports on my data and keeping track of my listening habits over time. But last.fm is a freemium service. ListenBrainz is a potential replacement of last.fm for me. I have access to all of my data.

  • Have you ever used MusicBrainz to tag your files?
    Yes, quite exclusively. Picard is one of those tools that is always installed on my computer. I like to keep my offline music library clean with all the ID3 tags and I like to refresh and improve them every once in a while. Picard is the right tool for my needs and I have been using it for more than half a decade now.

  • Have you contributed to other Open Source projects? If so, which projects and can we see some of your code?
    Yes, I have contributed to other Open Source projects like CSRankings and OpenGApps. My contribution to those projects might not be enough for evaluation purposes. Instead, I will provide the link to my project - Vide - VoD platform. I have built a video on demand platform using AWS Amplify framework. I’ve used ReactJS for frontend and Amazon Web Services for the backend.

  • What sorts of programming projects have you done on your own time?
    I have worked on projects like -

    • I have worked on Breaking Bad Cards that uses the API from Breaking Bad API.
    • I found this interesting tool that generates transit maps like diagrams. To use it, it needs to have data of the transit lines of a city in a graph format. I wrote github.com/chinmaykunkikar/generate-graph-json to gather transit line data and generate the json graph file interactively. I was able to use my data to generate a transit diagram of Mumbai using the said tool.
  • How much time do you have available, and how would you plan to use it?
    I am currently not working. So I will be available full time for GSoC. I will be able to give around 30 hours per week for the program.

Edit 17-Apr-22: Update all mockups.
Edit 18-Apr-22: 1) Update Recommend Modal mockups. 2) Add link to PRs.

Hi! Thanks for the proposal. @mr_monkey can give feedback on the UI mockups. The proposal looks good to me. My only suggestion would to get familiar with the ListenBrainz frontend codebase if you already haven’t by working on some small UI task.

2 Likes

The mockups look quite good, pretty straightforward. :+1:

The user selection in the modal can probably be improved. There are some good looking multi-selects with search capabilities out there.

1 Like

Thank you for the feedback @lucifer. Yes I am getting myself familiarized with the code base and have recently worked on a small task ([LB-1086] ListenCountCard: Fix card message when visiting another user's page by chinmaykunkikar · Pull Request #1957 · metabrainz/listenbrainz-server · GitHub).

Thank you for the feedback and your suggestion @mr_monkey. I understand what you are saying about the user selection. It may get tedious to find users if the user list is long.
I suppose I can use react-select which is already being used for things like adding tracks to playlists.
Please check out the updated mockups :slight_smile:

1 Like

That looks a lot better @chinmaykunkikar , thanks !

Thank you so much @mr_monkey! Should I submit this one as the final proposal on the GSoC website?

cc: @lucifer

Yes :slight_smile:
There’s always the option to update it if you need to, but at least you will have a submission ready before the deadline

1 Like

Thanks :slight_smile: I have submitted my proposal to GSoC.

1 Like