While looking for more issues to work on, I came across this cool project - space-voyager. I'm very interested in this project but there wasn't any open issue. Therefore, I decided to file one and contribute to it.

This time, since I was filing an issue on my own, I read the contributing guide carefully and found that the project has an issue template. I followed the template closely to make sure that all issues were described in details

The issue

I did walkthrough of the website and carefully note down any parts that needed fixing. I found a mistake which was probably due to copying and pasting content. When users search for satellites and no results are found, the error message would show

We don't know about the planet you searched for.

I also found some other styling issues on smaller screen sizes. Each of them is a minor fix so I put all under one single issue.

The fix

The issue related to copy/paste was in the error component. Instead of just hard coding the error message with the updated content, I decided to pass in the argument so that it's relevant to the error.

<p className="error__wrapper__text">
   OOps!We dont know about the {type} you searched for
</p>

By doing this, the error message can be dynamically rendered and reused in different components.

Other issues were related to styling for smaller devices. I used the browser inspector to try out different screen sizes and identified some breakpoints to work on. With each breakpoint, I had to fix the animation of the planet so that when it's moving, it won't hide other components. I also added some text alignments so that buttons would look neat.

Issue-2 link: https://github.com/space-voyager-21/space-voyager/issues/44
PR-2 link: https://github.com/space-voyager-21/space-voyager/pull/45