Last week, I shared my plan for release 0.4. Now, let’s take you guys on a ride of my progress so far.
The issue I chose was https://github.com/IanWalston/qasong/issues/157. I asked the main contributor to assign the issue to me and got a quick reply of an encouraging YES.
In this issue, my main task was improving the “queue” page when there is no queue.
Setting up the project
To set up, I followed their README.md. It was straight forward. I cloned the project, did npm install for backend and frontend, ran their backend and frontend at the same time with npm run dev . Everything went smoothly. At the end, I had their project running in my localhost.
Preparation Stage — Appearance
Before I start coding, I went to the queue page to look how it looks like when there is no queue.
Huh! There is actually nothing at all except a plain 2 words text! We have a lot to do 😟
Preparation Stage — Studying their code
I looked at the QueueSection.js file where my whole coding will be done. I see for ‘no queue’ section they used Typography component and many more components in other section too which led me into realization that they are using material-ui. Hence, I started reading about material-ui to be familiar with it. Let me tell you it is so cool and so easy to use!! Why and how I have not known about it before?! I guess I was living in a stone age 😑
Go deep into the task
One of the task they mentioned in the issue is:
a placeholder object that resembles what the queue would look like if it had song in it
Basically, I have to show the viewers the structure of queue when it had song in it, not the actual queue. As I saw they used material-ui, I started looking there if there is any component which can allow me to do so. And YES, they have ONE! It is called SKELETON:
Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
How cool is it!? Now I know I can use skeleton to build the structure. Next task is to read more about skeleton, the available options and what component they use when building the queue when it has song into it.
This is where I stopped and I think I have a clear idea what I have to do now. I am done with my research and familiar with their code. Now, time to code and will show you guys the final result in my next blog!💃
