GSoC 2023: UI/UX improvements to Fresh Releases page

Personal Info

Name: Satyam Sagar
IRC nick: satyamrs00
Github: satyamrs00 (Satyam Sagar) · GitHub
Time Zone: UTC+05:30

UI/UX improvements to Fresh Releases page

Project Overview

I understand that this project aims to implement this figma design to Fresh Releases website. A good UI is very necessary for a webpage, because it is the interface between the user and the cool data that we are showing here. I propose to take up this project and build the best UI I can.


Releases Card
First, I will update the releases card, adding the hover features, adding conditional render of filter-able attributes


Then, the layout of the page, this involves using flexbox for side panels, grid system for cards, media queries for responsive design, hamburger menu for mobile devices

Then, implementing actual data from api, filtering and sorting functionalities with default filters as given, All and For You tabs.
I have read the docs and have a fair understanding of the ListenBrainz API.

Lastly, the slider, animations and finishing touches


Community bonding period
I will use this period to, well, bond with the community and also to practice TypeScript as I’m new to that. Don’t get me wrong, I am well experienced with JavaScript so it will be easy for me. I will also discuss the libraries I want to use with my mentor.

Week 1
I will complete the releases card during the first week
Week 2
I would like to devote 2nd week for the desktop layout
Week 3
This week will be devoted for mobile responsiveness.
Week 4&5
I will use this week for implementing API calls, filtering and sorting logic.
Week 6&7
I will implement the scroll bar, animations to mobile hamburger menu, side bar in mobile view
Week 8
I will test the page manually and add finishing touches.
Stretch Goal
I will discuss the final product with my mentor and do some changes, if required.

More about me

My name is Satyam Sagar. I am a second year student at Indian Institute of Information Technology(IIIT), Bhopal, India.

Do you have Github, Twitter or any other public profiles you think we might find interesting?
github, portfolio

Tell us about the computer(s) you have available for working on your SoC project!
I have a HP 14" ryzen 5500u with 8 gigs of ram.

When did you first start programming?
I first started proper programming in the december of 2021 with C language.
I learnt some HTML & CSS during 2019 as well.

What type of music do you listen to? (Please list a series of MBIDs as examples.)
I mostly listen to pop music. MBIDs of some songs I like :

What aspects of the project you’re applying for (e.g., MusicBrainz, AcousticBrainz, etc.) interest you the most?
The api is the most interesting part for me. It provides a great way for people to use the data in their own projects.

Have you ever used MusicBrainz to tag your files?
Yes, I have connected my spotify account to track my music activity.

Have you contributed to other Open Source projects? If so, which projects and can we see some of your code?
I have contributed to a few small open source projects during and after hacktoberfest 2022.
I have some frontend projects (among others) listed on my github profile including skills like react, redux, advanced js.

If you have not contributed to open source projects, do you have other code we can look at?
You can take a look at drum, or image-editor, these are not full fledged product, just a small demo of my practical skills.
You can take a look at this project that is supposed to implement this figma design.
Also, You can take a look at the source code of my porfolio website.

What sorts of programming projects have you done on your own time?
I have done several frontend projects using react, my portfolio website, and some full stack projects with django (mvt architecture).
I am currently an intern (frontend) at GreyFeathers, I have worked on several of their projects with react and its libraries.

How much time do you have available, and how would you plan to use it?
I plan to devote 40 hours per week for the entire duration.

1 Like


Thank you for your proposal. However, the proposal is very thin on details – it mostly contains images that you didn’t create and there isn’t much else in the proposal. We should make a better effort to show us how you’re going to do what you plan to do.

And given that this is a UX project where our team member has done the design work, we will need to you to implement one small portion of the design in an a proper PR so we can see how you work.