Repo
https://github.com/Curio-org/Curio -
An upcoming open-source front-end YouTube translation platform that helps you translate your favourite YouTube videos in your desired language to help bridge the gap of language and communication between mentors & learners.
Issue
- https://github.com/Curio-org/Curio/issues/41
- https://github.com/Curio-org/Curio/issues/43
- https://github.com/Curio-org/Curio/issues/52
PR
- https://github.com/Curio-org/Curio/pull/50
- https://github.com/Curio-org/Curio/pull/51
- https://github.com/Curio-org/Curio/pull/57
Process
The process was to fork the repo, create a feature branch, add all changes to that branch and issue a PR for the changes that were to be merged.
Setup
There was a little bit of setup needed for this project, which was to first get a free YouTube API from the Google Cloud platform for APIs & Services, install the dependencies and then run the start script to see the frontend project in action. The setup was nicely documented in the Readme.md file along with other information for the project such as features, future plans, tech stack, etc. As far as the tech stack is concerned it makes use of TS, React, Node, SASS, React Router, RSuite, Semantic UI React, and Axios, among other dependencies. It also makes use of YouTube API to look up searches for videos and uses AWS S3 buckets to store audio blobs.
Bug Fix & Feature Addition
This PR was a bug fix where I had to show/hide a component named "UnderHeader". The issue was, that when a user searches and the API returns some data to show on the front end, this component affected the visibility of the results to be shown to the user. So the way to go about this issue was to conditionally check whether the API returned at least 1 result. If it did then trigger a state change to a false value which eventually will trigger the JSX to re-render and hide the component and vice versa. This was a relatively easy fix, and I attached a video screen capture to the PR to showcase how the new changes worked.
This PR was a feature addition where I had to update the old app logo with a new logo. The issue was open for quite a while and I started working on it even before the repo owner assigned me the issue, considering it was a very small change. After the repo owner reviewed the PR, they asked me to sort of revert back my changes since the logo that I used was not the correct logo. They provided me with comments on the PR and pushed the correct logo to the origin which I used to update my code as part of another commit within the same PR. They followed up with me again to fix some CSS to make the UI look better. They gave me exact suggestions like which CSS property to change and what value to put for them. The repo owner was literally so helpful. Every time I'd make a commit as part of PR, as long as it was a visual code change, I'd add a screenshot of how the UI looked so it could help the repo owner quickly see how my changes looked on UI. And just like that, I got this PR in as well.
This PR could be considered a bug and a feature. When I first set up the project, I didn't add the YouTube API key to the environment variables, so whenever I tried to search for a video, it gave me an ambiguous overlay in full screen on top of the UI with an error message saying "Request failed with status code 400". I right away figured that it was most likely due to me not adding the API key. I wasn't planning to file this issue but then due to the repo owner being a kind and fun person to work with and considering it was an essential fix to get it in, I filed the issue and asked the repo owner to work on it. My first commit on the PR was a simple error message showing to the user in the browser console what went wrong, which was a standard error message that YouTube API returns, "API key not valid. Pass a valid API key". Once the owner reviewed my code, he asked me to show the error message on the UI as well, something like an error message in red so the user could see exactly what went wrong. This required quite a lot of changes, mainly consisting of a component addition along with its CSS. The component that I added was an error message section designed from scratch since nothing like that existed in the codebase yet. It was somewhat of a challenging endeavour for me since I had to adhere to the existing coding standards for this repo, like, having a CSS file for each TSX file, writing class components instead of functional components, enforcing types, and values of CSS properties to match with existing CSS properties in other CSS files like font family, font size, etc., for consistency among other things. It required quite a lot of reading the existing codebase before I could start creating a new react component that didn't exist yet. Developing the component didn't take much time but writing the CSS for it did since I'm not as good of a CSS expert and it required a lot of trial and error and tweaking CSS properties to make sure that my code changes are responsive just like the entire codebase. The repo owner liked my changes and got them merged.
Interactions/Experience
This is by far my best contribution in the entirety of Hacktoberfest. Mainly because I love React and even though the project is still in its initial stages it was well built, as in, the UI was beautiful and responsive and it uses TS by default. Besides, the repo owner was super quick to provide me with feedback once I added a commit to a PR which in my opinion made it more favourable for me to contribute to this repo and one of the main reasons why I made 3 PR contributions to the repo LOL!!! I was initially not planning to do the 3rd PR even though I found the issue, but then due to the repo owner being so supportive and a prompt reviewer, I created the issue myself, asked the repo owner to assign it to me and handed in my 3rd contribution along with filing 2 more issues, setting up prettier & adding a home page navigation when a user clicks on the app logo (latter of which I asked my classmate, @mnajibi to work on). Almost all the conversations I had with them were engaging and full of learning opportunities. Loved every bit of this project. Shout-out and thank you to the rep owner, @arjxnpy for making it such a wonderful experience for someone like me who's quite new to open-source.
Top comments (3)
Hey soham, couldn't find you on twitter so sharing it here - twitter.com/ArjxnPy/status/1713677...
Hey @arjxnpy! This is amazing! Thanks so much! It’s @SOHAMdTweetGuy
Hey @soham-thaker, super nice blog. I am glad you had a nice experience contributing to Curio. Keep it up & wishing you best for your open source journey.