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

Post a Comment

Popular posts from this blog

Taking on new technology

In my last week's blog, I talked about the two objectives I would take on during November. In the middle of working on the contributions, I decided to change my issue for the internal open source project. I'm hoping to continue with this issue for next pull request I have to submit for my course. As you know, the external open source project I chose to contribute to was vscode . In the beginning, when i saw this issue , i thought this would be an uncomplicated and straightforward issue to work on within a big open source project. Before i forked the clown, i took a good look at the documents they had to just get a sense of how to contribute to the project and do the simple tasks of running and testing. After cloning, i had an issue running the project, this is where i spent some good time reading the documentation again, but i was just having a hard time running the project. I managed to get it running after a few reads.  Thanks to another contributor i had a hint of where
Post a Comment
Read more

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#
Post a Comment
Read more