Skip to main content

Material Design Troubles?

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 Issue

The 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 Problems

One 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.

Lessons Learned

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.

Comments

Popular posts from this blog

Final Contributions

As the final weeks of our semester approaches, i submit my last two pr. During these months i have learned many things and had fun doing it. Working with Github and Git was the best learning experience i had throughout the months. I also had the opportunity of researching and experimenting with open source technologies. Overall everything i learned from this course i will for sure use, for instance, using git at the workplace or use of open-source technology for other projects. I took the time this week to review the requested changes made to one of my pull request that i had made to vscode. I managed to close two changes but i have one more change request to make before i could ask them to review it again.  Last week my plan was to learn more about Lighthouse and implement it into our course project. After a few days of working on this issue , i came to a conclusion of using the following code as my solution: " lighthouse-index " : " lighthouse http://localho

Rhymus Application

The last day of Hacktoberfest is here and I submit my last pull request. It has been a great exposure to the open-source community. Before starting hacktoberfest I set two goals: Git - How to use git C# & TypeScript - Learn new languages Working with multiple projects, I managed to get a hang of using git. Unfourtonalty I didn't have the chance to give C# & TypeScript. My plan is to focus on this goal for the next month as we dive into working with big open source projects. rhymus This week I had the opportunity to work on rhymus .  the bug was to display the score to the player once the game was over. At first, the developer wanted the score to be displayed in a pop-up. I tried using javascript alert() method on but it didn't look very user-friendly, so I decided to come up with a design and suggest it to him. I decided to add the scoreboard on the card once the game was over and would be removed for a new game. Afterwards, I made the pull request and

Here i come Hacktoberfest

An amazing opportunity has appeared for me, giving me the chance to get involved in the open-source community. Its  Hacktoberfest  in a few days and I'm super excited to get my hands wet with some code! Hackertoberfest is an event hosted by Digital Ocean every October to get people involved and contribute to open source projects. As a beginner in the realm of open source, I will be participating in this event to reach the two goals I have set for myself. Click here for more information about Hacktoberfest Goals Git The first goal is learning more about how to use git. If you have been reading my previous blogs, I'm new to using Git and I have been learning the basics for over the past few weeks. But I feel like there's still more to learn and experience with Git. Participating in this event will help me utilizes that and help me become proficient in it.  C# & TypeScript The second goal is to learn a new programming language. My focus will be on C#