Working on the Telescope Project

Two weeks ago, I've had my first chance of working with the Telescope project and utilized it's back-end API to work with my DLCheck Project. In the past few days, I got more involved, played around and worked with Telescope's front-end portion. One of the issues that I found in the project repository got an idea from the Node.js webpage and requested for a React Component to display the contributors' information to thank them for their effort in developing/maintaining the Telescope project.

In the beginning, I was a bit lost by reading the existing code, but luckily, the telescope project was developed using the React JS library and utilizes Material-UI framework, I have worked with a project which was also developed using the same tools during my Release 0.2 assignment, therefore, I was able to understand pieces of codes fairly quick.

The new Card Component was overall not that hard to implement but it still took me a quite bit of time, I was given a custom React Hook which would work with the GitHub API and fetch the contributor information to return a random contributor for me to work with. Since I have never created or work with a custom React Hook before, it's time to learn again, the best way to learn about web development is to learn from the web. I eventually came across a tutorial on how to build and work with custom hooks and noticed what I was doing wrong, instead of "const {contributor, error} = useTelescopeContributor();" I did "const [contributor, error] = useTelescopeContributor();", since I have used the useState hook before, which uses square brackets, I assumed that this rule applies to custom hooks as well. Once I started receiving data from the hook, things became easier, I used different Material-UI components and created a Card component which includes an icon of the GitHub contributor along with a thank you message for their contribution which links to their GitHub page and their contribution pages. I have also made the Card Component responsive, making it take only 4 out of the 12 columns in the Grid when using a bigger screen such as a PC, and take all 12 columns when using smaller screens such as mobile devices.

I have sent in a PR for this issue, and discussing with other members of the repository at the moment, they have found some issues and provided feedbacks, some of which I have followed up and made changes, and some are still under discussion because we have different opinions. Hopefully my very first contribution to the Telescope project will be accepted soon.


Both PC and Mobile view:





Issue: https://github.com/Seneca-CDOT/telescope/issues/1355

PR: https://github.com/Seneca-CDOT/telescope/pull/1392

Comments

Post a Comment

Popular posts from this blog

Hacktoberfest -1

 This week the Hacktoberfest event has finally started and I had the chance to contribute to real open source projects. Finding an issue that I can fix took way longer than I thought it would, most of the issues were either taken or they were too complicated for a first time contributor. After a while of searching around GitHub repos with "good-first-issue" labels applied, I found a couple repositories that seemed interesting to me. One of the repositories requested for a new URL redirects in their projects, I thought this was an easy fix, but that it was more complicated than I thought it would be, the original repository had no instruction on how to run and test the application, therefore, I had to leave a comment in the issue asking for instructions. As it turns out a test must be written first before adding any code to the project, and when I ran the initial test before adding anything into the project, I was already getting testing errors, it seems like a challenging one...
Read more

Contribution Plan

Working with open source projects could be difficult, sometimes planning ahead of time could be helpful. During the past few days, I have been trying to find issues to work on, something that is challenging but could also be implemented within a couple of days, after a while of deciding what project and issues to work on, it occurred to me that there is something that I can do. While working on release 0.2 project few weeks ago, I ran into an issue in a music queuing web application GitHub repository named qasong , that is to add a clear queue button and prompts the user for confirmation. Therefore, I went ahead and added that new feature to the project. The new functionality behaves normally and works, the PR for this issue was eventually reviewed and merged, but I was not satisfied with it. While working on this issue, I was stuck on the "confirmation" part, the application was built with Material-UI components, but since I didn't have much experience with Material-UI,...
Read more