Contributing to My First Open Source Project

I’ve been wanting to contribute to an open source project for a while, but I’ve never been able to find a project that uses a lot of the web languages and frameworks I’m familiar with. That is, until now!

To find new open source projects, Github suggests exploring project showcases along with searching for repositories by topic keywords. I first took a look at project showcases, and I found the repositories being showcased to be fairly complex, so I turned to searching repositories by topic. I ended up searching for “twitter” since I have some experience incorporating APIs using Node.js, and Twitter is a fairly popular API to use. I ended up finding a repository called node-twitter, that uses Node.js, Express, Pug templates, and MongoDB. Those are all things I’ve used and am comfortable working with, so it seemed like a good fit for me. Fortunately the app has a live version available on Heroku, so I was able to view the project without having to set up the project on my local machine.

When I went to view the live demo, I noticed how the application could use a bit of a facelift in terms of the frontend design. Here is a short list of some of the design and functionality issues I saw could be improved:

• The footer floated about the bottom of the browser window when there was little page content
• Some elements were too close together and could use more space and padding
• Colours in the navigation made things hard to read, the app wasn’t responsive
• Editing tweets required going to a different page

Here is the web applications main dashboard, before the design changes I implemented

This was the mobile view of the application when I first came upon the project

I saw a lot of potential for me to help improve the UI and this worked out great for me since I’m trying to build up my portfolio with more frontend development work. I went ahead and started getting to work on the project.

I first forked the repository into my own GitHub account, then cloned it on my local machine. I had to play around with getting the app to work on my machine, but once I tinkered around with the configuration files, I managed to get the application up and running!

I tried to replicate the “night-mode” Twitter UI for node-twitter, since I don’t think there are many people that are aware of the darker theme UI on Twitter. I made a bunch of changes to the UI and then submitted a pull request on the main project repository. I included a screenshot of how the modified app looked like in my pull request to peek the interest of the repository owner. I also sent a DM to the repository owner on Twitter (the real one!) to let him know how I’m a big fan of his project and how I hoped he would merge my changes into the project.

The pull request that started it all

After adding a few more commits to my pull request at the suggestion of the repository’s owner, my pull request was merged into the project! Not only that, but I was also added as a member to the repository and the author told me to feel free to make merge requests of my own. The author gave me certain guidelines to follow related to the git workflow I should be using when working on the project. For example, I should be making changes on “feature” or “fix” branches and then make pull requests into master.

My pull request got merged 🙌🏻

I have since been spending a lot of time working on the project and I believe I’ve also reinvigorated the repository’s owner’s enthusiasm for the project (his commit frequency has increased). I managed to fix all the issues I outlined earlier and I keep finding more things that can be improved.

The latest version of the app’s main dashboard

I improved the functionality related to editing your own “tweets”

The new mobile-friendly view of the app

I’ve been learning a lot from this project and the project owner has been giving me a lot of good tips related to working on larger projects on Github. It’s also a fun project to work on since there are occasionally people that log into the app and leave a “tweet”.

This is my first big foray into contributing to an open source project that uses good git workflow practices and it has motivated me to find even more projects that I can contribute to and learn from. I hope this motivates others to find open source projects to work on, whether it’s your first or your 100th. Let me know if you end up finding your first open source project to which you were able to contribute. I’d love to hear about it!

If you’d like to try out the current release of Node Twitter, you can do so here (you will need to authenticate with a Github account in order to use the app). You can also view the Github repository here.

If someone at Twitter is reading this and wants to shutdown this Twitter clone, please don’t 🙏🏼

If you found this article interesting and front end development interests you, consider following me on Twitter, Github, or LinkedIn.