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

Steps Into Open Source

Visual Studio Code is the project I plan to use to help me get involved within the open source community. Developed by Microsoft, it has become one of the most popular source-code editor out there. An editor with beneficial features built in such as:
·Debugging·IntelliSense·Git source control·Integrated terminal·Extension marketplace
Plus there’s so much more that I haven’t mentioned. The application is written in Typescript and supports Windows, OS and Linux.

During my internship I came across the release notes of Visual Studio Code for the month of August. Out of curiosity I quickly scanned the notes and reached the bottom of the page. I was amazed at the number of contributors there were helping Visual Studio Code become a better application. I also realized that there are other developers that are part of a community I had never knew about. Taking the Open Source Development course offered at Seneca will pave the way for me into this community.
Repository




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.


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# and Typescript, two languages that I have briefly touched before but I stil…

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 to files with a given file path. This was really helpful as…