Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Peter Wan
Peter Wan

Posted on

Devlog: Hacktoberfest 2024 (3/4)

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

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->
Enter fullscreen modeExit fullscreen mode

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:

GitHub logo 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 theGemini API andReactJS. 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 theGemini API.
  • Intuitive Interface: A user-friendly interface built withReactJS.
  • 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
    Enter fullscreen modeExit fullscreen mode
  2. Navigate to the project directory:

    cd TranspilerX
    Enter fullscreen modeExit fullscreen mode
  3. Install dependencies:

    npm i
    Enter fullscreen modeExit fullscreen mode
  4. Create a.env file in…





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

My merged pull request for this change can be foundhere.

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 lookedbefore my change:

before-feature

The code editor in the screenshot above shows that a user can write code,but, the code editor itself doesn't provide very goodsyntax highlighting (things such as the function names, variable names, etc. should be coloured differently, but they aren't at the moment). For example, thecout afterstd::, 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:

end-result

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 foundhere.

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!

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Gamer | Programmer
  • Joined

More fromPeter Wan

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp