DEV Community

mismathh
mismathh

Posted on

4th Pull Request in Hacktoberfest23

For my 4th pull request for Hacktoberfest23, I decided to head back to a previous project that I had worked on during this month, Starwar Archive. This project is a React application that pulls character information from SWAPI and displays key information for each character as a list.

The Issue

I found an open issue that I was interested in working on which was to add starships details, but the description was missing. I requested for more information from the owner under the issue. My previous issue that I worked on in this project was to create a description page that would be able to list out detailed information about a character. Like my previous issue, I proposed to create a new page to describe each starship. I did not receive a reply and I was a bit hesitant to start without a reply, but I decided to make my proposed changes and submit a PR and ask the owner if the changes were adequate.

Process

Since I have already forked the repository for an earlier issue, I just needed to create a new branch for this new issue that I planned to work on.

Implementing Changes

Since the only place that displays the name of a starship is within the person description page, I decided to attach a link to the starship name to redirect users to the starship description page. The starship name will be highlighted once the user hovers over the starship name to signify that it's a link.
Person Description Page

What was also interesting to see was that in order to implement my changes for this issue, I needed to improve my changes I made to the API fetch method from my previous issue. If the information of a person can be found from within a separate endpoint of SWAPI, it would just provide the URL instead of the information.
Sample fetch from SWAPI

And so in my earlier implementation, I decided to just send the URL to the fetch call to receive the data.
Old implementation of Starship API fetch

For the Starship page, I needed the id of the starship which is found at the end of the URL, and so I decided to edit the fetch call so that it also just requires the id to make everything consistent.

New implementation of Starship API fetch

The final result looks like this:
Starship Description Page

After sending a friendly reminder to the owner, my PR was approved and my contributions were merged.

Learning Outcomes

Overall, I enjoyed working on this issue and further improving a project that I had previously worked on. It was interesting to see that my initial implementation of certain features needed to be improved on in order to implement a new feature. It reminds me that the structure you build your code in may be ideal for the current situation at hand, but it may not be so for future features, and creating a code structure that makes it easy for future features to be implemented will improve the efficiency and maintainability of your project.

Top comments (0)