GitTranslate

Inspiration

Oftentimes, developers may come across repositories written in languages they don't understand, such as Russian or Chinese. This language barrier can hinder collaboration and comprehension, as important elements like code comments, README files, and file names may be difficult for non-native speakers to interpret. GitTranslate aims to break down language barriers and enable developers from diverse linguistic backgrounds to collaborate effectively on any projects hosted on GitLab.

Problem

The problem that GitTranslate solves is the language barrier encountered by developers when collaborating and working on projects hosted on GitLab, particularly when encountering repositories with comments, README files, and file names in languages they don't understand. By leveraging translation capabilities, GitTranslate enables users to easily translate these elements into a language of their choice, thereby facilitating collaboration and comprehension across language barriers.

What it does

The app streamlines the process of translating code comments (localization) and file names by allowing users to input a GitLab repository URL, pulling the repository, and providing an interface to navigate through files. When a file is selected, GitTranslate utilizes GPT 3.5 Turbo to translate the comments and file names from the original language to the user's selected language.

How I built it

Framework: I used Next.js to build my app. It's a tool that helps in creating web applications with ease. Styling: For making my app look good, I used Tailwind CSS. It's a handy tool that simplifies the process of styling web pages Integration with GitLab: GitLab API provides access to GitLab repositories and allows developers to perform various actions programmatically. I utilized the GitLab API to fetch a repo from a given URL and then raw code from selected files, enabling seamless integration with GitLab. Code Editor: To make it easier for users to view and edit code within my app, I used CodeMirror. It's a JavaScript-based text editor that provides features like syntax highlighting and editing capabilities, enhancing the user experience. Translation: I used GPT 3.5 turbo to help translate code comments from one language to another. This feature makes it easier for developers who speak different languages to collaborate and understand each other's code comments.

Challenges we ran into

Recursive Code Fetching: One challenge I faced was fetching code contents recursively based on the file path using the GitLab API. To overcome this, I had to design a method that navigates through the directory structure of the repository and fetches the code files accordingly.

Creating Treeview: Another hurdle was creating a treeview to display the fetched code files. I had to devise a way to organize the files hierarchically and present them in a user-friendly manner. This involved implementing a tree data structure and rendering it in the frontend using the mui library

SQL Query for Supabase Database: Writing the SQL query for my Supabase database posed a challenge. I needed to structure the query in a way that efficiently stored the input code contents, output file contents and gitlab url for each user effectively

Accomplishments that Iam proud of

Recursively Fetching Code Files: I successfully implemented a method to recursively fetch code files based on their paths. This required understanding the directory structure of repositories and devising a solution to navigate through them efficiently.

Utilizing GitLab API: I learned and effectively used the GitLab API for authentication, fetching repositories, and retrieving raw code contents. This involved understanding API endpoints, authentication mechanisms, and data retrieval methods.

Database Implementation for User Translations: I created a database to store user translations, enabling the application to save and retrieve translated code comments. This involved designing an appropriate database schema and implementing CRUD operations to manage translations effectively.

What I learned

Recursively Fetching Code Files: I gained valuable experience in recursively fetching code files based on their paths. This taught me how to navigate through directory structures efficiently.

GitLab API Integration: Through this project, I learned how to work with the GitLab API for tasks such as authentication, fetching repositories, and retrieving raw code contents. This expanded my understanding of integrating external APIs into our applications and leveraging their functionalities.

Database Management: Creating a database to save user translations provided me with insights into database management. I learned about designing database schemas, implementing CRUD operations, and ensuring data persistence for user-generated content.

What's next for GitTranslate

Sharing Translations: Implementing a feature that allows users to share their translations via a link. This could involve generating a unique URL for each translation that users can share with others. Additionally, providing options to control access to shared translations, such as setting permissions or expiring links, can enhance the usability of this feature.

Further Version Control Integration: This will involve more functionalities such as committing translations to a repository and merging changes from multiple contributors.

Customization Options: Providing users with customization options to tailor their translation experience according to their preferences. This could include customizable themes, syntax

Built With

• gpt3.5-turbo
• nextjs
• typescript
• vercel