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

Whiteboard Application: Built with Open Source Projects

I just took my first steps into the open source world and it was amazing. As my first project, I built a note taking application with the help of some open source projects and Github. I’m going to admit, I was a bit scared at first because I hadn’t touched web development in months so I was I rusty in Javascript and other web technologies. Thanks to my instructor, I was able to set-up everything on Github with ease and execute git commands that I had forgotten. All in all it was a good experience and was nice to get back into coding after a long break from it. Whiteboard Application The point of this application is to allow users to takes notes on a webpage. There are also features such as saving what you have written on the whiteboard or clearing the whiteboard all at once. The application was built using the following open source projects: ·          Filer ·          PaperCSS ·          Hotkeys FilerJS Browser Filersystem library allowed us to read and write
Post a Comment
Read more

Time to Leave Application

Wow! The third week of Hacktoberfest is coming to an end and it has been an experience for me so far. Before hacktoberfest, I never thought that I would be able to contribute to other people's projects and actually see my contribution be committed to a project. This week was a huge step for me. I had to opportunity to work on a project that I found very interesting and test my coding skills with the application. The best part of the experience was that it gave me the chance to collaborate on the issue with the main developer where we discussed how to come up with a solution. After the solution was provided, my code was merged into the main project which gave me a sense of accomplishment and satisfaction,. The Project After countless hours searching through GitHub for an open-source project to contribute to, I came across Time to Leave  developed by thamara. This application is like a reminder that allows users to log their work hours it the application and receive a notificat
Post a Comment
Read more