Profile and Explore Section in Android App
Contact Details
| Github | rishuriya |
|---|---|
| IRC Username | rishav_a2z |
| Profession Profiles | Profile, Linkedin, |
| Country | India |
| Time Zone | IST(UTC +5:30) |
| Expected working hours | 38 hours/week |
| Preferred Method of Contact & Details | Email: rishavprof@gmail.com |
Code Contributions
Project Proposal
The objective of this project is to develop a comprehensive profile page for the Listen-Brainz Mobile application that allows users to view their listening history, musical preferences, and connections with other users in the ListenBrainz community. The profile page will display the user’s recent listens, tastes, and playlists, and provide a centralized location for users to keep track of their musical activity.
In addition to developing the features of the profile page, the project will involve designing and developing the user-friendly interface of the “Explore” page to display YIM, recommended music, and similar users. Users will also have the ability to follow other users from their Profile pages and Explore pages. The profile page will display the total number of followers and following.
The development process will include the implementation of personalized recommendations, efficient data retrieval, and seamless integration with ListenBrainz’s existing infrastructure. The project aims to make the Listen-Brainz Mobile application more accessible and intuitive for users while contributing to the growth and development of the open-source community.
Deliverables
- Incorporation of a “Profile” page for the user:
- A user-friendly interface for the profile page.
- A fully functional profile page that displays similar genres, and playlists.
- The ability to follow other users from their profile pages and display the total number of followers and following.
- Personalized recommendations based on the user’s listening history and preferences.
- Incorporation of “Explore” section in the app to show:
- User’s listening activity in a year
- Similar users
- Recently played tracks
- Introduction of Community Connection with a dynamic user search feature.
- Additional Support:
- Adding a “Re-order” feature in Queue.
- Refurbishing the “Share” feature to share songs on social media platforms.
Goals & Objectives
Problem Overview:
Many audiophiles want to flaunt their taste in music. More importantly, it helps you to get found. Users can’t just follow other users based on username. If the user wants to follow someone else’s taste in music, there should be a page for their activity, which helps the user decide whether the persons taste matches the users taste or not.
In that regard, the “Profile” page gives us the following benefits:
- Higher interactions in the app.
- More organized data for users.
- User-created playlists
- Total songs listened to (Listenbrainz + Spotify + Youtube Music)
- Recently played songs
- Helpful to incorporate the feature of follow and following as it will help the user to find other users and also to get found
Solution:
Creation of a profile page that displays information about the user such as their favorite music genre, the total number of songs listened to, public playlists created by the user, recommendations and similar songs, total followers and following, with the help of ListenBrainz APIs. As of now, the ListenBrainz server can not store images as profile pictures for which the API can be used to keep the username’s initials as the profile picture. The link to the API.
Implementation
On the profile page, two types of playlists will be shown: personal playlists and collaborative playlists. When a user views their profile, all playlists will be displayed, but for other users, only public playlists will be shown. On the long press of a playlist, a dialog box will appear with options such as duplicate, edit, and delete. When the user selects the edit option, a box will appear allowing them to edit the name, description, visibility, and type of the playlist. The playlist can be deleted using the delete option, and a copy can be made using the duplicate option.
In the recently played section, each music card will have various options, including love, hate, pin, share, and review. Users will be able to use these options after connecting their accounts with ListenBrainz APIs. Users will also be able to see which of their friends/followers have interacted with the same tracks.
In the taste section, the playlist will be replaced by taste. There will be three types of taste: loved, hated, and pinned. By default, users will be able to see their loved tastes, but they can choose to view other types by clicking on the pill button. Users will be able to change their loved and hated tastes by clicking on the icon on the lower card, and for additional options, they can long press the card.
On the top of the profile page, the album art for the most recently pinned track will be displayed. The background will be a gradient from the edge of the image to either white or black, depending on the selected dark or light mode.
For the UI development test-driven approach will be followed, so we will write a test along with components that will be developed
Fig 1 shows how the UI will look after it is developed, and figma design is here
Fig 1: Mockup for Profile
Problem Overview:
The ListenBrainz mobile app currently lacks a dedicated space for users to explore the history of the music they listened to in a year, their taste in music, and the ability to connect with other music enthusiasts beyond their immediate network. This limits a user’s ability to discover new music and interact with others who share similar music preferences.
Moreover, users do not wish to simply follow any other user based on their username; a way to explore and evaluate other users’ inclination in musical genres is preferred before following them. This is where the “Explore” page comes in handy, as it provides a curated selection of recommended content, including similar genres, similar users, and a Year in the Music section.
Solution:
Creation of a centralized page for users to explore musical choices, similar users, and Years in Music using APIs provided by the ListenBrainz Server. For starting on the page it is necessary to create an Explore button at the bottom of the navigation bar, after which the horizontal button for YIM and horizontal scroll for a similar user can be assembled in the UI. It is better to have vertical Infinite Scrolling for recommended songs.
Implementation:
The proposed flow for the Android app involves the following steps:
- First create a navigation Button in the button navigation bar.
- Create the UI for the explore page.
- In the Explore page we use the APIs as listed in the image. For recommendation API, we only get mbid and with help of the API of MusicBrainz, we get the track and artists’ names.
- Access loved and hated songs using the API from the ListenBrainz - server.
- Access the YIM, similar users using the year-in-music and similar-users API respectively.
After we collect all the data we will integrate it with the page.
Problem Overview:
If users have a profile page, and they need to search for other users of that we need to implement a search feature in the search bar. With the help of that, users and their music will be found.
Solution:
To solve this problem, you can implement the following steps:
- We can implement a search bar in the App top bar.
- Using ListenBrainz API, Users can search for another user
- on clicking the user we got the username with this, open profile page and got all information using the API of the user.
Implementation:
- Getting real-time API results on changes in the value of the search bar.
override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
// make API call with the search query
searchUsers(s.toString())
}
private fun searchUsers(searchTerm: String) {
val url = HttpUrl.Builder()
.scheme("https")
.host("api.listenbrainz.org")
.addPathSegment("1")
.addPathSegment("search")
.addPathSegment("users")
.addQueryParameter("search_term", searchTerm)
.build()
val request = Request.Builder()
.url(url)
.build()
val client = OkHttpClient()
client.newCall(request).enqueue(object : Callback {
override fun onResponse(call: Call, response: Response) {
val responseBody = response.body?.string()
// do something with the response data
}
override fun onFailure(call: Call, e: IOException) {
println("API call failed: ${e.message}")
}
})
}
From the above we get the User names list which user is searching. Using Recycle View we can show that result with a user name and image on left, The image will be the initials of the username.
- Change in Queue: Right now the queue system is rigid, users are only able to remove the song from the list. By using a draggable modifier I can implement a feature that releases the card and accordingly change the queue. I already added a feature to add, and remove the song from the queue. For changing the order of the queue we need to use a draggable modifier and change the index of items together.
- Share songs on social media: Users can flaunt the song they are listening to on their social media with this feature. This also helps in advertising the ListenBrainz app. We can achieve this using the intent and share the song with help of the URI/URL of the song.
Timeline
| Every Week |
Status Updates: - Discuss the status of the project with my mentors and the community members and get their suggestions and make sure everything is going well from all aspects. |
|---|---|
| Pre-Community bonding period | |
| 7 Apr - 3 May |
- Implement the Additional Features. - Add the feature to change the queue. - Incorporate a feature to share songs. - Create the Model and APIs for the favorite artists in ListenBrainz-Server |
| Community bonding period | |
| 4 May- 28 May |
- Get to know more about the community by exploring project documentation, forums, and online events. - Interact with Mentors and other community members, This can help establish relationships and build trust with the community and get to know about their coding standards. - Fix or implement a feature to get to know more about the codebase - Research and gather requirements for the profile page - Create a Figma design for the profile page - Get feedback and review on the Figma design - Get feedback and review on the Figma design of remote Player |
| Official coding period begins | |
|
29 May- 18 June (Week 1 - Week 3) |
- Implement the static version of the profile page - Write the unit tests and UI tests for the profile page of playlists and user details card sections - My mids will be in 1st week of coding period which affects the working hour. |
|
19 June - 2 July (Week 4- Week 5) |
- Write all the test for the recently played and taste section component - Integrate all components with dynamic data - Implement the feature of the playlists and taste to show according to the pill button, and to make all options of the dialog box work. - Implement the ability to follow/unfollow other users. |
|
3 July - 9 July (Week 6) |
- Finish the pending work (if any) - Refactor code as necessary |
|
(Week 7 - Week 8) |
- Implement the static version of the explore page - Write the unit tests and UI tests for the recommended and similar user components. |
| First evaluation period(10 July - 14 July) | |
|
24 July -30 July (Week 9) |
- Make all the API calls, and collect the data. - Add the dynamic data to the component. |
|
31 July - 06 August (Week 10) |
- Implement the search option for the user. - Finish the pending work (If any) |
|
07 August - 13 August (Week 9) |
- Get the UI of Profile, Explore page, and Local remote player reviewed, make changes (if recommended) |
|
14 August - 20 August (Week 12) |
- To Complete the Pending Work (If any) - Test all the implemented feature and fix bugs (if any) - Refactor code as necessary |
|
21 August - 28 August (Week 13) |
- Work on the blog submission. - Get it reviewed |
| Final Evaluation Period |
Future Goals
The Future goals for the project will be:-
- Implement the stats page with the profile page.
- Show top listened to artists, songs, and albums of the week
- Graphs, and heat maps, to show data and compare it with the previous month, weekly, and country-wise.
Detailed Information About Yourself
My name is Rishav Kumar and I am a student from Bihar, one of the states in the eastern part of India. Currently, I am pursuing a Bachelor’s degree in Technology in Electrical and Electronic Engineering from Amrita Vishwa Vidyapeetham, Amritapuri, located in the state of Kerala in the southern part of India.
Apart from my academic pursuits, I am also a member of the amFOSS community, a renowned open-source student community at Amrita Vishwa Vidyapeetham. amFOSS is known for promoting the spirit of open-source software and fostering a culture of collaboration and innovation among students. As a member of amFOSS, I get to work on exciting projects, participate in hackathons and coding competitions, and attend workshops and talks on emerging technologies.
Tell us about the computer(s) you have available for working on your SoC project!
I have got HP pavilion 14, intel core i5 11th gen, 8GB ram with 16GB swap memory. I am currently working on Manjaro-Linux.
When did you first start programming?
I started programming in class 9 with basic C programming and later learned Java and Python till class 12. After that, during the lockdown period, I started with software development. I have the basic knowledge of HTML from class 8 and also won a prize for making a static website for my school. In lockdown, I learned PHP and applied it to a school website whose link is provided below. After joining amFOSS, I learned a lot of stuff over the past 1.5 years due to club projects and client projects. I was introduced to Django, React, and Flutter which enabled me to contribute to the club’s CMS mobile app which has a huge code base and has been maintained since 2018.
What type of music do you listen to? (Please list a series of MBIDs as examples.)
I mostly listen to old Bollywood songs of artists like Lata Mangeshkar, Mukesh, and Kishore Kumar, and my current favorite is Ankhiyon ke jharokhon se
What aspects of the project you’re applying for that interest you the most?
I am highly passionate about Android Development. As a member of the open-source community amFOSS and an advocate of free and open data, my interests are aligned with Metabrainz to make music free and accessible. The ListenBrainz is an opportunity for me to contribute to this purpose.
Have you contributed to other Open Source projects? If so, which projects, and can we see some of your code?
I contributed to the Wikimedia Foundation and created a new project for them and maintain it. The project is a statistical tool for Wikimedia that scraps the raw data from the dataset, filters, and generates data every month using a cron job according to need as the data is not accurate due to security reasons. For this project, I worked with one of my colleagues from my community. The project has the tech stack of Django as the backend, and RestApi and React as the frontend.
- The Repo of the Project
- Deployment [Server deployed on toolforge, for front-end we are in talks to get 2nd server]
What sorts of programming projects have you done on your own time?
When I started development, I started web development with PHP
- I worked on a school website which is still in use. It is made with the tech stack of PHP.
- The repo of the School website
- I also made a social media website that has features to post images, and blogs and make friends online(follow each other).
- This is the Repo of social media platform,
After that, I dive into the realm of mobile development Flutter.
- I made a fully functional app that solves the problem of courier handling in the college and the courier department can use it to reduce the loss of packages. The repo of mail delivery app, This app has an inbuilt feature to notify the student based on their roll no that their parcel is collected by the courier department and generate a ticket on the student side by which he will be able to collect the parcel by showing it to mail department.
- We hosted a mega event for Hacktoberfest and also a workshop on open source. For that huge event, I came up with a solution to keep track of the attendance of attendees. In this, we have all the data of attendees in the Django backend, with the help of data we made the dynamic QR code using React and sent an email as the pass to all attendees. The app enables us to verify the QR code and keep track of all attendees in each event based on the time. The repo of Attendance Tracker
- I also worked with India`s Best Hacking Team, BI0S. I made a flutter app for them as a question for their CTF. The repo is here
After that, I dived into the projects of web development based on React and Django
- Along with 2 other team members, I made a webpage for one of the departments of our college CIR whose main focus is to ease the work of students in getting leave applications and permission to go for an internship. The site is hosted on this and the repo is here.
- I worked with Amrita Hospitals at Faridabad to create a system to manage and maintain their inventory. It automatically raises tickets for the maintenance of items after a specific period and assigns the ticket to a specific department. Apart from that, with the help of an app made by the APIs of this system, it provides accessibility to patients, and their families to complain about any non-working component just by scanning the specific QR code in the room, which they can keep track of the status of the complaint. The System is in the Testing phase by the hospital and the project is not open source, so I can’t provide the code for that.
I also participated in a few hackathons. One of them was the NASA space challenge. For that, I worked with my team to create a web application tool for scientific image editing. We have the dataset of JUNO cam which we need to refactor and get scientific data and also clear the image. For that, we worked with PyQt for the front end, and using the openCV package we did the image processing. The repo of the project is this.
How much time are you available, and how would you plan to use it?
I will commit to providing 35-40 hours of work per week. I have made a detailed timeline of how I am going to utilize this time efficiently.
Some points to note:
- First week of the coding period i.e 29 May to 2nd June, I have my mid-semester exams, which will decrease the working hour to 18 - 20 hours that week.
- My End Semester exam will start on the 12th of July and ends on the 26th of July which reduce the working work to 18 - 20 hour/per week.
