Devlog: Hacktoberfest 2024 (3/4)

Hello everyone! I just wanted to provide another update on my contributions towards 2024's Hacktoberfest.

For those that haven't read about how I've been doing so far, you can read the first few blogs in my series here:

1. Devlog: Hacktoberfest 2024 (1/4)
2. Devlog: Hacktoberfest 2024 (2/4)

But to sum up my first 2 week's in Hacktoberfest - I was kind of working on different ends of the contribution spectrum:

<-EASY----------------------------------------------------HARD->
<-fix a spelling mistake--------attempt to fix a bug in VSCode->

In my first week, I familiarized myself with contributing in general, and focused on doing easy contributions such as fixing spelling mistakes.

In my second week, I made a leap to try and fix a bug in Visual Studio Code, that unfortunately, did not get merged.

For this week however, I thought it'd be nice if I made a sizeable contribution that would be accepted, on a growing repository.

I assisted in contributing to the repository below:

aayushai / TranspilerX

Code converter from one programming language to another.

TranspilerX

Live Link

TranspilerX is a powerful web application that translates code between programming languages using the Gemini API and ReactJS. It offers an intuitive interface with syntax highlighting, simplifying the code transformation process for developers working across different languages.

Features

• Multi-Language Support: Convert code between popular programming languages such as JavaScript, Python, Java, C++ etc.
• Real-Time Conversion: Experience instant code conversion powered by the Gemini API.
• Intuitive Interface: A user-friendly interface built with ReactJS.
• Syntax Highlighting: Benefit from syntax highlighting in both input and output editors.
• Responsive Design: Access a responsive design that enhances usability across devices.

Tech Stack

• Frontend: ReactJS
• API: Gemini API
• Styling: Tailwind CSS
• Libraries: Monaco Code Editor

Installation

To run the project locally, follow these steps:

1. Clone the repo:

   git clone https://github.com/yourusername/TranspilerX.git

2. Navigate to the project directory:

   cd TranspilerX

3. Install dependencies:

   npm i

4. Create a .env file in…

View on GitHub

To this repository, I made a couple of fixes, such as adding some code formatting standards, such that going forward, the code in this repository will look uniform with regards to its styling, and there will be less git diffs simply from changes in formatting.

My merged pull request for this change can be found here.

In addition to adding dependencies that assist the developers, I also helped add a new feature to this repository that helps the end users of the app.

Let me show you how the app looked before my change:

The code editor in the screenshot above shows that a user can write code, but, the code editor itself doesn't provide very good syntax highlighting (things such as the function names, variable names, etc. should be coloured differently, but they aren't at the moment). For example, the cout after std::, should be coloured differently since it is a method. The maintainer of this project wanted their users to have better syntax highlighting as they were using this web app.

To that end, I did some digging, and assisted with integrating the syntax highlighter library, shikijs/monaco with the current code. The end result is what you see below:

Now, things like variable names, and function names, etc. have a distinct colour to them, making it easier for users to write and debug code on this web app. The pull request with these changes can be found here.

Succeeding in making an accepted contribution like this made me feel a lot better as a first-time Hackathon participant.

I felt like I made an impact with this contribution, and that was a really good feeling.

My hope is that next week, I can add a fix or add a feature to a larger repository, and that my changes get accepted.

With that, I have said all I wanted to say this week.

Cheers!