Hacktoberfest Week 2: Diving Deeper into Code Contributions

Greetings, everyone! How’s Hacktoberfest going for you this year? Personally, I’m really enjoying it so far. We’ve now entered the second week of October, which means it’s time for my second pull request (PR) out of the four needed to complete the challenge. This week, I decided to push myself a bit further by contributing to a project’s codebase rather than focusing solely on documentation, as I did in Week 1.

Recap of Week 1

In my first PR of Hacktoberfest, I worked on improving project documentation. As a beginner, I wanted to ease into the process with smaller, manageable tasks. However, for this second week, I decided to take on something more technical: contributing to the GitExplorer project.

Project Overview: GitExplorer

GitExplorer is a web application that simplifies the discovery and exploration of top GitHub repositories. It allows users to filter repositories based on programming languages, topics, and other sorting criteria. While the UI is still under development, the project offers a valuable learning opportunity for contributors, especially beginners. Many of the issues in the repository are tagged as "good first issue," making it a great place to start.

For my contribution, I chose to implement a navigation feature that enhances user experience when browsing repositories.

Identifying the Problem

Issue
The project initially had a button for navigating to the next page of repositories, but it lacked a full pagination system. Users couldn't easily navigate back and forth between pages or jump to a specific page, which posed usability issues. I noticed this limitation and requested the project maintainer to assign the issue to me.

During my time working on the project, one aspect that stood out (and not in a good way) was the way the codebase was structured. The project had all the logic written into a single script.js file, which could become difficult to maintain as the project grows. While I didn't want to make major changes in this PR—since it focused only on the pagination buttons—I plan to suggest refactoring the code structure in a future issue.

Actually, before that there is another developer who created a button that navigate to the next page, but it's not good for User experience when they want to navigate back and forth, as well as specific page. Due to this reason, I commented to ask maintainer assign this issue for me.
As the time when I was working on this project, there is one thing that I didn't like about it. It is the way the maintainer structure his code base as he was writing every logic into only 1 script.js file. However, I don't want to have a lot of fix in this issue because it only ask for pagination buttons. I will create a new issue requesting to re-structure the code base later.

New Feature: Enhanced Pagination

My PR
The existing functionality had only one button to navigate between pages, with 10 repositories displayed per page. My goal was to implement a more user-friendly pagination system with "Previous," "Next," and numbered page buttons. This would allow users to jump directly to the page they're interested in, making the navigation experience smoother.

Implementation

GitHub API Constraints:

While implementing the pagination, I encountered a limitation with GitHub's API, which restricts results to 1,000 items. If a search yields more than 1,000 repositories, attempting to navigate beyond this limit results in an error, returning undefined data. Given the design displays 10 repositories per page, I capped the number of pages at 100 to avoid hitting this issue.

Code Changes:

• I introduced a new <div> section in script.js for pagination. This allowed me to add some CSS styles to improve the button aesthetics and user experience.

• The core logic for pagination was encapsulated in two new functions:

  • createButton()
  • renderPagination() These functions dynamically generated the pagination buttons based on the available pages and applied styles to disable the current page button, preventing users from accidentally re-clicking it. I also added hover effects to the buttons for a more polished look.

CSS Improvements:

For the pagination design, I made sure that the current page button is disabled and styled differently to indicate its state. Other page buttons received hover effects to enhance interactivity and improve user experience.

Conclusion

That wraps up my contribution for Week 2 of Hacktoberfest. I’m now on the lookout for another repository to contribute to next week. Ideally, I’d like to find a project that’s a bit more challenging, so I can continue to push myself and improve my skills progressively.

Thanks for reading, and I look forward to sharing more about my Hacktoberfest journey!