Getting Familiar with ChatCraft
Tags: opensource, react, security, webdev
Published: 2024-01-20 04:49:45

In my [last post](https://dev.to/amnish04/joining-chatcraftorg-279f), I talked about me joining [ChatCraft](chatcraft.org) Team as a **contributor** and my experience with with the project's **initial setup**.

This week, I decided to dive a little deeper into the project's **tech stack** and also made a couple of contributions along the way.

## Table of Contents
&nbsp;1. [Researching Technologies 💻](#researching-technologies)
&nbsp;2. [Contributions 👨‍💻](#contributions)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2.1. [Enforcing Consistent EOL Character 🔧](#enforcing-consistent-eol-character)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2.2. [Reviewing a Pull Request 🕵️‍♂️](#reviewing-a-pull-request)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2.3. [Adding back SOPS decryption method](#adding-back-sops-decryption-method)
&nbsp;3. [Conclusion 🌟](#conclusion)

## Researching Technologies 💻

Every team member agreed to research at least **2 technologies** from the application's [tech stack](https://github.com/humphd/osd700-winter-2024/wiki/ChatCraft-Tech-Stack) and present an introduction/demo to the topic during the week.

![ChatCraft Tech Stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blpxe495w3egpzxo1fpn.png)

Everyone was encouraged to pick **topics** they didn't already know, and it was super **refreshing** to see such a huge list of technologies that I wasn't familiar with. I was kinda confused about what to pick, but [React Router](https://reactrouter.com/en/main) 🗺️ and [Vitest](https://vitest.dev/) caught my interest as **routing** is one of the first things you need to look at when understanding a project, and [testing](https://dev.to/amnish04/testing-in-python-4ne7) is equally important to stay confident in the **robustness** of a project's code.

![React Router](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3q2ujg79sump8jmba8ua.png)


I have documented my **findings** about the topics and how they are used in **ChatCraft** in their corresponding **wiki pages** 
1. [React Router](https://github.com/humphd/osd700-winter-2024/wiki/Tech-Stack-%E2%80%90-React-Router)
2. [Vitest]()

Apart from this, I summarized all my findings in a [powerpoint presentation](https://seneca-my.sharepoint.com/:p:/g/personal/asarora1_myseneca_ca/EdbIZ5c7jfVCtGxSX8MlR8QB4MDsWlQVmHCidwYP9aeaFA?e=8N71bC) to make it easier to demo my findings 🚀

## Contributions 👨‍💻

While I was researching the technologies and **exploring** the project, I found a few issues that I could contribute to.

### Enforcing Consistent EOL Character 🔧

The **first time** I contributed to **ChatCraft** was last year when I was taking [OSD600](https://www.senecapolytechnic.ca/cgi-bin/subject?s1=OSD600). And when I opened the project in **VSCode** after cloning, I noticed some red squiggly lines with an [ESlint](https://eslint.org/) error message all over the files particularly at **line endings**.

![EOL Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2k70djng68krn9zf9fd.png)

The problem was that the project was configured to only accept **LF** (\n) as the line ending character, but my editor was using **CRLF** (\r\n) by default as I am a Windows **fanboy**.

[![LF vs CRLF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rha1h0x37cyb4qeyv78.png)](https://stackoverflow.com/questions/12747722/what-is-the-difference-between-a-line-feed-and-a-carriage-return)


Back then, I found a **cheap fix** to suppress the noise generated by those errors by adding the following settings to the **eslint config**.

![Cheap Fix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqxaii3v0q5wf9pbni5b.png)

which **worked** for that time. But now that I would be regularly contributing, it was necessary to find a proper fix. 
I started discussing with the admins in the **discord** group and initial thought was that I should override my editor to use **\n** as **EOL** character, which was acceptable.

After some discussions, my professor told me that most projects on github use **LF** vs **CRLF** and that there was a way to enforce this setting for all project contributors.

![Prof Suggestion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyqp96se0gyx54oa0d0e.png)

[**EditorConfig!**](https://editorconfig.org/)

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

Sounded familiar, but couldn't remember from where 🤔💭
until I realized I saw a similar file **at work** before but never paid attention to it.

![KA EditorConfig](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6y2ier12n2s1mk0h4hf4.png)

After a bit of research, I **filed** an [issue](https://github.com/tarasglek/chatcraft.org/issues/341) regarding this, and created a [Pull Request](https://github.com/tarasglek/chatcraft.org/pull/342) with a basic configuration file, that was eventually adapted to the following version.

```.editorconfig
# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# For all the files
[*]
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
```

However, this alone did not solve the problem. There was a weird conflict between the [editorconfig](https://editorconfig.org/) settings and the way git was configured to use **CRLF** as **line endings** when **checking out** files.

So my professor suggested me to add a [.gitattributes](https://git-scm.com/docs/gitattributes) file as well to alter that behaviour.

**.gitattributes**

```.gitattributes
*.yaml diff=sopsdiffer
* text=auto eol=lf
```

Not only that, but as discussions went on, I also added the following workspace configurations for **opinionated formatting** and [recommended extensions](https://code.visualstudio.com/docs/editor/extension-marketplace#_recommended-extensions) for the project.

**.vscode/extensions.json**

```json
{
  "recommendations": [
    "editorconfig.editorconfig",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "streetsidesoftware.code-spell-checker"
  ]
}
```

**.vscode/settings.json**
```json
{
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "files.eol": "\n",
  "files.insertFinalNewline": true
}
```

Once my professor was satisfied with the work, he asked me to get it tested locally by other teammates and add some [testing instructions](https://github.com/tarasglek/chatcraft.org/pull/342#issuecomment-1892936768) to the PR, and so I did.

![testing instructions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/snrwido5uafb5f533ubl.png)

Some of the teammates faced issues initially, but ultimately they were resolved and these changes were shipped 🚀🎊

### Reviewing a Pull Request 🕵️‍♂️

I talked about [SOPS](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwiI6vL5kOuDAxU6EFkFHT9oBnEQFnoECCgQAQ&url=https%3A%2F%2Fgithub.com%2Fgetsops%2Fsops&usg=AOvVaw1VL2ENXs82bAZnq5jAzeH_&opi=89978449) in my [last post](https://dev.to/amnish04/joining-chatcraftorg-279f), and how we are leveraging the tool to manage secrets for the project.

I also [discussed](https://dev.to/amnish04/joining-chatcraftorg-279f#decrypting-the-key) how one of the **methods** documented in the repo to **decrypt** the secrets did not work as expected.

The same problem was faced by others and [Katie](https://dev.to/katiel) decided to open a PR to remove that from documentation.

I left a [comment](https://github.com/tarasglek/chatcraft.org/pull/348#pullrequestreview-1828027901) on it suggesting that instead of removing it altogether, we could make some changes as I had an idea why it was not working.

![My Comment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvhrwjlodk4b7uytfh5g.png)

But I guess I was too late as it was shortly merged.

### Adding back SOPS decryption method

Stay Tuned... It doesn't end there...

As I had an idea how to fix it, I opened [another issue](https://github.com/tarasglek/chatcraft.org/issues/350) explaining the problem.

![Another Issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2bjjfgezmn7r00cyyub.png)

which led to a funny conversation 😜

![Went Rogue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kf7gocydn617xxnyz5c.png)

Sorry about that [ChatCraft](https://chatcraft.org/)!

The problem was a minor Linux CLI **syntax issue**. The entire conversation can be followed in this [pull request](https://github.com/tarasglek/chatcraft.org/pull/351), which was also **merged** after a few iterations of corrections and improvements.

## Conclusion 🌟

That sure was a busy week :D
I probably missed some of the interactions, will add them as I remember.

But I sure was able to get familiar with various technologies used by ChatCraft by **staying active** in the community.

I would have **loved** to contribute more if **life** allowed, but I am planning to gear up a bit from next week 🔥