During the first week of Hacktoberfest, it was very challenging for me to find an open-source projects where I could contribute to. After learning how to define better search criteria using GitHub keywords, I came to a project called React Budget App developed by benhalverson. The developer had posted a live version of the application where I spent my time and examined how the application worked. After playing with the application, I knew this was something I could help contribute too. After forking the project and getting the issue assigned to me, I spent a few days tackling the issue. I faced many bumps which I will explain about them further below but I managed to accomplish what the developer had requested in the end.
The IssueThe issue that was raised by the developer was that there was no User Interface to the application and it looked kinda dull. I took upon myself to start designing and implementing a better-looking feature UI to give the user a better experience with the application.
Challenging ProblemsOne of the problems I had was running the application at first. I was getting the following error:
Error: FIREBASE FATAL ERROR: Can't determine Firebase Database URL. Be sure to include databaseURL option when calling firebase.initializeApp().Using a bit of knowledge I had from working with firebase, I located the file and saw that there was some missing content of the function. My reaction was to visit the GitHub page and see the instructions for running the application. Within the README the following was posted,
API keys are required from firebase
After reading that I was a bit confused as to what it meant. Communicating with the main developer I found that I had to set up my own firebase server to get the application in a running state. Luckily this was an easy task for me and I was able to get everything working in a short time.
Afterward, I ask the developer of their thoughts on how it should look or what technology they would recommend using. The suggestion was to use Material Design. Working with material design was the biggest problem I had to face. With quite extensive research and reading documentation, I was able to develop a new user interface for one of the pages of the application. I decided to submit my design of the Login page for review, in case something was not okay with the project standards. After a review, the main developer had a concern with me using CDN instead of npm packages. So I had to address this as it was the style the developer wanted. But this made me encounter more bugs and in the end, I had to switch to using React Bootstrap and Bootstrap 4 to implement a new design. Created a new pull request and waiting upon approval from the main developer.
Our instructor taught us to tackle the issue in the smallest way. If I had designed and implemented a user interface for each page of the application, then there would have been a need for huge changes to my pull request. Knowing this, now I will be applying this rule to all pull requests to not create a mess for myself. I also had the opportunity to go through the code base and learn a bit more about TypeScript. Hopefully, in my third pull request for Hacktoberfest I can tackle an issue related to web technology.