Contributing to my first open-source project for Hacktoberfest 2024

Introduction

Hacktoberfest 11 has officially kicked off, and to complete the challenge, I need to get 4 pull requests merged into open-source projects. While scouring around for some good first issues and bugs that a beginner like me could tackle, I came across this JavaScript web-based game called ZTM Quest, maintained by ZTM Academy.

I personally love ZTM Academy as I've done a lot of their courses on Udemy. Some of the ones I've completed include Python, web development, machine learning, and ethical hacking. They also have a huge Discord community where you can get support, and I thought this would be a perfect start to my Hacktoberfest journey.

Getting started

The first thing I did was go to the open issues and look for some good first issues. I didn’t pick one immediately because I didn’t know how complex the project was at that point, but I was still browsing to get a brief idea of the types of issues that were available.

Next, I forked the repository, cloned my fork, and ran the project locally to see how it works. Once I got a basic understanding, I looked through the issues again and found one that caught my interest: Issue #36. I asked one of the maintainers to assign it to me, and they were happy to do so.

For the next two days or so, I didn’t make any progress since I was busy with work and college assignments, but eventually, I found time to dive in.

Implementing the feature assigned to me

The task was simple: ZTM Quest is a fun interface for people to explore the worlds of ZTM, and my task was to add an interaction to a computer in one of the rooms. When the character (controlled by the player) reaches the computer, it should open a popup iframe showing the ZTM Career Paths page.

I went back to my cloned repo, set the upstream to the original remote from ZTM, switched my branch to issue-36, and got ready to work on it.

The first roadblock

As soon as I started, I realized that in order for the player to reach the computer in the game, the path needed to be clear. Unfortunately, there was another character blocking the way, making it impossible to reach the computer! It was kind of funny because even if I added the feature, the player wouldn’t be able to access it due to the blocked path. The character in question was an NPC that tells jokes, and it was standing in front of the computer.

To proceed, I temporarily moved the spawn point of the NPC so I could work on the feature, but I also opened a new issue in the repository explaining the problem and asking the maintainer to assign it to me so I could fix it. The fix would be simple — I just needed to adjust the NPC's spawn coordinates. I opened the issue and worked on other stuff waiting for the maintainer’s reply. Here’s the issue I created: Issue #61.

Getting involved

Once that was sorted, I made sure to say “Hello” in the ZTM Discord community where everyone was chatting about Hacktoberfest. I told them it was my first time participating, and it was really nice to be there. One of the mentors there welcomed me, and that kind of inclusivity is what I love about open source. I’m hooked!

The second roadblock

Back to the original task — when I tried to implement the popup iframe feature, I ran into my first problem. The ZTM website (along with sites like Google) doesn’t allow embedding due to security restrictions (using headers like X-Frame-Options). I tested with other sites like Wikipedia, and it worked fine. After reading more about the issue on Stack Overflow, blogs, and asking ChatGPT, I confirmed there wasn’t much I could do about this restriction.

So, I left a comment on the issue explaining the problem to the maintainer.

The third roadblock

After a couple hours the maintainer responded by thanking me for spotting this bug and admitted that they had indeed blocked people from creating embeds of their website.

Now that the iframe was not an option, the maintainer asked me to display a dialogue box with a link whenever the character touched the computer in the room. This was fairly simple to implement since a dialogue box already existed in the codebase. I just had to import it, write some HTML, and insert that HTML into the pre-existing dialogue box. Once I was done, I ran the linting checks and fixed my files. However, I noticed that two files unrelated to my feature did not pass the checks. Despite this, I made the PR, and as expected, the CI pipeline failed because those unrelated files were not aligned with ZTM's code style configuration. I reached out to the maintainer to ask if he wanted me to fix it within my issue itself here or had another plan in mind. I also asked for advice in the community.

Shortly after submitting my issue, I received a response from the community, with one of the members mentioning that they were facing similar problems.

Finally, its merge time

Later, I got a response from the maintainer on my GitHub PR, who suggested that I fix the formatting changes in other files within the same PR. I followed the suggestion, made the necessary updates, and pushed the changes. The maintainer merged my PR, and closed the issue.

Here are the links to both:

What about the other issue

Earlier in this blog, I mentioned another issue I had opened regarding the character sprite blocking access to the PC, and how I temporarily changed the spawn position to work around it. Well, I apparently forgot to revert those temporary changes, and the PR I merged for the last issue included that change as well. I only realized this after the PR was merged, and the maintainer didn’t notice it either.

In my issue report for this problem, I added a comment explaining that I had unintentionally fixed the issue in PR #63. I asked the maintainer whether they wanted me to revert the changes or if the fix could stay as it is.

He said that I can keep the fix as is and closed that issue as well.

Conclusion

This was such a fun experience! Getting my first PR merged for this season's Hacktoberfest felt incredibly rewarding, and working with a community was a blast. Even though I didn’t implement something huge, the idea that I collaborated with strangers who were all so kind and inclusive made the whole experience special. I definitely want to continue being a part of the open-source culture. My PR is now under the 7-day review period for Hacktoberfest, and I can’t wait to contribute to more projects like this in the future.

Here is what the maintainer had to say for our work.

I’ll be blogging about the rest of my Hacktoberfest journey here, so stay tuned! 😁