Contributing to a JavaScript project!
Tags: opensource, react, chatgpt, typescript
Published: 2023-12-14 04:32:06

---
series: Contributing to ChatCraft
---

Last month, I worked on the Java Spring Boot project, [E-commerce-project-springBoot](https://github.com/jaygajera17/E-commerce-project-springBoot). I previously had plans to continue building on my fixes and completely fix the update products part of the app. However, since a few weeks have passed, and only one of my two pull requests have been reviewed, I decided to look elsewhere for a more active project to contribute to.

---

# Goals for December

First, find

- An open source project with a language or framework that I have not recently worked with
- A project with a decent sized code base, and fully functioning application with minimal bugs
- A project with a large number of issues to work on
- An active project with recent and frequent pull requests merged

Then, work on

- Adding a new or previously missing functionality or feature
- Fixing multiple issues that are related to one another
- Enhancing the user experience

---

Fortunately, my friend [Amnish](https://dev.to/amnish04) recommended the following project repo to me, which checked most boxes:

# ChatCraft.org

ChatCraft is a ChatGPT clone which is geared towards answering questions for developers! It is built with Typescript, JavaScript (Node.js) and Express.js framework as well as React and Vue.js.

{% github tarasglek/chatcraft.org %}

By looking at the Commit Activity section of GitHub (Insights > Commits), you can clearly how much more active this repo is compared to the last one I worked on.

E-commerce-project-springBoot Commit Activity:
[![E-commerce-project-springBoot commits](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vev8b8flpe143wmadgax.png)](https://github.com/jaygajera17/E-commerce-project-springBoot/graphs/commit-activity)

ChatCraft Commit Activity:
[![ChatCraft commits](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkhgj1djmwme3d7q1yvo.png)](https://github.com/tarasglek/chatcraft.org/graphs/commit-activity)

---

# Getting Started

Since this is a brand new project that I am unfamiliar with, I plan to do the following:

## 1) Try the app as an end-user in production

The first step is to try to use the app, and see what it's all about. This also gives me a chance to gauge the status of the project (starter project, fully functional, buggy?). To do this I followed the "Getting Started" instructions in the [README.md](https://github.com/tarasglek/chatcraft.org/blob/main/README.md).

To use this app I would need to first get an OpenAI or OpenRouter API key. I went with [OpenRouter](https://openrouter.ai/) because their API keys are free to create. I pasted my API key in [https://chatcraft.org/](https://chatcraft.org/) and voila! I was able to use the app right away. The interface was very similar to ChatGPT with some additional features. I learned how to use each feature, such as saving a chat, sharing a chat, creating a function, and more.

## 2) Install and run the app locally

After reading the [CONTRIBUTING.md](https://github.com/tarasglek/chatcraft.org/blob/main/CONTRIBUTING.md) docs, I forked the repo and then cloned it on my local machine. I was able to follow the docs and get the app running locally.

![server start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0djhnclskj7eqzf8owth.png)

![localhost5173](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hz0iveifyhxsmuobi7wc.png)

Something I noticed when I was reviewing the the code in VSCode was that my Prettier extension was marking a lot of the code in red. I asked [Amnish](https://dev.to/amnish04) about this since he had previous experience contributing to this project, and he gave me some code to add to my `.eslintrc.json` file to fix this issue.

```
  "rules": {
    "prettier/prettier": ["error", {
      "endOfLine": "auto"
    }, { "usePrettierrc": true }],
```

## 3) Explore ways to debug the app

I explored multiple ways to debug the app, for when I start working on my issues:

- Breakpoints
- console.log

## 4) Explore Issues

I checked out the [Issues](https://github.com/tarasglek/chatcraft.org/issues) page on GitHub to find and comment on issues that I wanted to work on.

I found and commented on the following issue. This issue is about adding validation to the OpenRouter API key.

{% embed https://github.com/tarasglek/chatcraft.org/issues/230 %}

## 5) Create my own issues

The other way to get assigned to issues is to find potential new issues to work on through testing, or through discussion with the repo administrators.

After getting assigned to the above issue, I was told about another potential related issue that I could work on. The issue is about clearing the stored API key when the user decides to change their existing API provider (i.e. from OpenAI to OpenRouter or vice versa). I created the following issue:

{% embed https://github.com/tarasglek/chatcraft.org/issues/307 %}

I also found that behaviour of the "Clear Chat" option was not as I had expected (it created a new chat instead of clearing the current one. I posted an [issue](https://github.com/tarasglek/chatcraft.org/issues/305) to get clarification. Turns out, it is expected behaviour, since users did not want to lose their previous chat history. I promptly closed the issue after receiving clarification.

## 6) Ask for clarification on issue details

For the [issue](https://github.com/tarasglek/chatcraft.org/issues/307) I created, I was unsure about the expected behaviour. I asked the repo administrators in my issue description to provide me with the desired result.

## 7) Bookmark Relevant Documentation

I find it helpful to read and bookmark relevant documentation, so I can have it handy when I am reading or debugging code.

In one of the [issues](https://github.com/tarasglek/chatcraft.org/issues/230) I was assigned to, I was provided with the API ([https://openrouter.ai/docs#limits](https://openrouter.ai/docs#limits)) to use to validate the OpenRouter key. 

I also bookmarked some [React](https://legacy.reactjs.org/docs/getting-started.html) documentation ([state](https://legacy.reactjs.org/docs/hooks-intro.html), [effect](https://legacy.reactjs.org/docs/hooks-effect.html), [forms](https://legacy.reactjs.org/docs/forms.html)), since it has been a while since I used React.

## 8) Locate the area of code that needs to be worked on

I am now ready to work on my first issue! I will be using a combination of VS Code search, breakpoints, and console.log messages to determine which area of code I need to work on.

## 9) Coding

Coding time! Refer to the bookmarked documentation and work on the implementation.

## 10) Testing

This is very important. Test all possible scenarios and some regression testing as well. Take some screenshots if the tests are successful. If there are bugs, go back to the previous step!

## 11) Pull Request

Commit and push changes to topic branch. Create PR, link it to the issue, write description of the PR, and summary of code changes. Attach testing screenshots.

## 12) Code Review

Await PR review from the repo administrators and make any changes that they ask for. Push changes to the branch. Repeat until the PR is merged!