Last month, I worked on the Java Spring Boot project, 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 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.
tarasglek
/
chatcraft.org
Developer-oriented ChatGPT clone
ChatCraft.org
Welcome to ChatCraft.org, your open-source web companion for coding with Large Language Models (LLMs). Designed with developers in mind, ChatCraft transforms the way you interact with GPT models, making it effortless to read, write, debug, and enhance your code.
Whether you're exploring new designs or learning about the latest technologies, ChatCraft is your go-to platform. With a user interface inspired by GitHub, and editable Markdown everywhere, you'll feel right at home from the get-go.
Features
We think ChatCraft is the best platform for learning, experimenting, and getting creative with code. Here's a few of the reasons why we think you'll agree:
🛠️ You're in Control: Customize all aspects of a chat. Use your own System Prompts, edit, delete, and retry AI messages with models from competing vendors in the same chat.
🌍 Multiple AI Providers: ChatCraft supports both OpenAI and OpenRouter, giving you access to a…
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:
ChatCraft 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.
To use this app I would need to first get an OpenAI or OpenRouter API key. I went with OpenRouter because their API keys are free to create. I pasted my API key in 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 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.
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 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 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.
Use OpenRouter User Limits API to check key
#230
When a user enters an API key for OpenRouter, we need a way to check that it's good. It looks like we could use https://openrouter.ai/docs#limits
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:
When changing API key in User Settings, do not send stored key
#307
Sure, go for it. Another thing you could work on that's related is that when the user is entering a new API key, let's say for OpenAI vs. OpenRouter, we don't want to send the stored key to the other provider.
There's a bunch of things we could improve in how this is all done.
Originally posted by @humphd in https://github.com/tarasglek/chatcraft.org/issues/230#issuecomment-1852606536
Issue description (Attempting to switch from OpenRouter to OpenAI):
When going to User Settings to change the API URL from the dropdown, do not send the stored key to the newly selected API URL provider the moment we select from the dropdown.
Issue screenshots:
Expected behaviour:
Please help me to clarify what should be the expected behaviour.
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 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 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 I was assigned to, I was provided with the API (https://openrouter.ai/docs#limits) to use to validate the OpenRouter key.
I also bookmarked some React documentation (state, effect, forms), 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!
Top comments (0)