My First Hacktoberfest Contribution!!!

#hacktoberfest #opensource #webdev #javascript

Hacktoberfest

Today is Oct 1, 2024, which marks the beginning of Hacktoberfest. Hacktoberfest is a month-long celebration of open-source projects, their maintainers, and the entire community of contributors.

My First Contribution

Background

Since Hacktoberfest was going to start soon, I decided that this time I would also dedicate my time to giving back to the open-source community by making meaningful contributions, so I set out to research open-source projects that matched my skills and experience.

First-Issue

While I was going through the list of projects that had several issues with the label hacktoberfest, I saw this repository which is similar to a dashboard for displaying F1 statistics, the project was called F1Hub.

The issue that I found fascinating was that the third-party API the codebase was utilizing to fetch the F1 Data was deprecated and they had to migrate to a new one. I quickly went through the codebase, saw the tech stack that was being used, summarised what all had to be done, and then asked the maintainer of the repository to assign me this issue, a much more detailed description of the issue can be found here.

Codebase Setup

It was pretty straightforward to set up the codebase as the maintainer had a descriptive README.md and CONTRIBUTING.md file which contained all the steps to get the codebase running locally. The tech -stack that this codebase utilized was mainly centered around Angular and JavaScript

(Fun Fact, I never had previous experience using Angular before this project xD)

Research

Since I never had prior experience with Angular, my idea of going about researching it was to first see what functions/code blocks I have to make changes to fix the issue, find the documentation regarding the Angular functions being utilized over there, and then move on and make changes.

I found that I had to only understand the usage of 2 methods/properties and 1 single concept of angular, which are

Concept
MVC - Model, Views and Controller

Angular follows the MVC design architecture, wherein the Models contain all the data and the business logic, the controller is responsible for governing the interaction between a view and model and the view represents the data to the frontend, view is the interface to which the end-user interacts.

Method and Properties

controller - these are used to control and provide the data to the views in Angular
$scope - this function provides access to the data provided by the controller to the views in Angular

Process of fixing the issue

The intuition here was to replace the value in the baseUrl method of the $scope property with the new API that the dashboard is going to utilize, correct the routes from the baseUrl, and to also make sure that the new data is parsed and formatted correctly for the view

This seems pretty easy, right?

Turns out it wasn't, well to be honest, I encountered a major issue while I was making the change, the new API was not accepting requests from different origins, in simpler terms, I encountered a CORS error

My first idea was to go online and search about the same issue within Angular, I found some really great posts on Reddit and StackOverflow, but they weren't able to solve my issue.

What I did then was go on to the repository for the new API, which was Jolpica, and find out if somebody else had filed an issue for the same thing

Fortunately, I discovered another user who had encountered a similar issue while using this API in their project. They had filed an issue on the API's repository, which was resolved and closed two weeks ago.

I went onto their repository, found the solution that they utilized ,and finally took inspiration from that and made changes to F1Hub

First Pull Request

After I was done making to the codebase, I reviewed the changes, make sure nothing had regressed and the changes were done as per the requirement of the maintainer. After meeting all the requirements, I made a PR on the main repository, describing what all changes I had made and what new URLs were being utilized, you can find the PR over here

Conclusion

This Hacktoberfest experience highlights the rewarding nature of open-source contributions. Despite facing challenges with unfamiliar technology (Angular) and unexpected issues (CORS error), persistence and resourcefulness led to a successful contribution. The process demonstrated the importance of community support in open-source development, as the solution was found through another user's similar experience.