DEV Community

Cover image for Improve your skills by practicing in real-world projects
João Forja 💭
João Forja 💭

Posted on • Edited on

Improve your skills by practicing in real-world projects

If you're at that stage of your journey where you can build a simple project from scratch, but you're not sure you're capable of working in an existing codebase, this article might help you.

In this article, I'll show an approach that gets you experience working on existing codebases, while still providing a fallback if things get too hard.

Overview

The approach can be summarized by the following steps:

  1. Find an open-source project on Github that uses the technologies you use and that interest you.
  2. Go through the list of merged pull requests and find one related to a new feature or a bug fix. Be careful not to start with overly complex ones. The number of lines of code changed is a good indicator.
  3. Clone the repository from which the PR originated.
  4. Checkout into the commit previous to the first commit of the PR. You are now looking at the codebase the contributor was looking at before starting to work.
  5. Implement the feature or fix of the PR you chose.

If you ever get lost, you can always look at PR to have an idea of what you have to do.

Also, be sure to read the issue(s) associated with the PR. There you'll find the requirements of what you need to implement.

Another benefit of this approach is it will make you accustomed to the architecture of the project. Which will make it much easier for you to one day contribute to it.

Let's look at an example of how this would work in practice.

Example

To exemplify, I'll use a PR I've submitted a while ago to Excalidraw.

We start by cloning the repository the PR comes from:

git clone ttps://github.com/Jnforja/excalidraw.git && cd excalidraw
Enter fullscreen mode Exit fullscreen mode

Then we find and copy the id of the first commit of the PR.

To do that we go to the PR page on Github, click on the commits tab, and copy the id of the oldest commit.

Alt Text

Then we checkout into the first commit:

git checkout -b new-branch 7b5fc6b8162b5e0d387093dfdc48225572656c73
Enter fullscreen mode Exit fullscreen mode

All that's left is to go to the commit previous to the first one:

git reset HEAD~1 && git stash
Enter fullscreen mode Exit fullscreen mode

You're now ready to start coding.

I hope this technique is useful to you and that you use it to learn something new.


Enjoyed this article? Then consider following me on Twitter.

Top comments (0)