NetCode

Homepage
Language Options
Sample of code running in python with output

Inspiration

The idea for this project stemmed from the need for a more efficient, interactive way to collaborate on coding projects in real-time. We wanted to create a platform that allows multiple team members to work on code simultaneously, ensuring the process remains seamless and interactive. The goal was to enable everyone to see changes in real-time, without the need for complex setups or version control systems.

What it does

Our project is a full-stack web application that allows users to write and run code in real-time. The platform supports multiple programming languages, including C, Python, Java, JavaScript, C++, Rust, TypeScript, and more. Users can choose the programming language they want to use and write code in the editor. The output of the code is displayed in real-time on the screen, allowing for instant feedback.

The platform also supports real-time collaboration, where multiple users can work on the same code simultaneously. The code updates in real-time, so everyone involved in the project can see the changes immediately. Additionally, we integrated Google Gemini to provide automated code reviews and suggestions, ensuring code quality and best practices.

How we built it

Front-End (React)

The front-end of our project was built using React, which enabled us to create a dynamic, interactive user interface. The key features of the front-end include:

A code editor where users can write code in various languages.
An output display where users can see the result of their code execution.
A selection dropdown that lets users choose the programming language for their code.
Real-time collaboration through WebSockets, ensuring that all users see code changes instantly.
We utilized the Ropes Data Structure to handle large text efficiently within the real-time code editor.

Back-End (Go)

The back-end was built using Go, which is known for its performance and scalability. The back-end serves the following purposes:

Handling the incoming code submissions from users.
Executing the code based on the selected programming language (C, Python, Java, etc.).
Providing real-time communication through WebSockets to ensure updates are sent to all users.
Securely managing file creation and deletion for the code executed by the users.

Code Execution & Compilation

We built a Makefile to automate the process of compiling and executing code. This makes it easier to run code in various programming languages. The system supports the compilation of languages like C, C++, Java, and Rust, while dynamically interpreting languages like Python, JavaScript, and TypeScript.

Google Gemini Integration

We integrated Google Gemini, an AI-powered tool that helps with code review. It automatically provides feedback and suggestions, improving the code quality by detecting potential bugs, code smells, and offering best practices for writing clean, maintainable code.

Ropes Data Structure

To handle large blocks of code efficiently in real-time, we utilized the Ropes Data Structure. This structure allows us to manipulate long strings or text blocks without negatively impacting performance. It helped in:

Efficiently handling real-time code editing with minimal lag.
Performing fast insertions, deletions, and updates to code without affecting other users' views.

Challenges we ran into

Real-Time-Collaboration: Ensuring smooth real-time collaboration among users was a complex task. We had to manage WebSocket connections and ensure that the application could handle multiple users editing code at the same time without causing performance issues.
Language Execution: Supporting multiple programming languages (C, Python, Java, JavaScript, C++, Rust, etc.) meant we needed to handle each one’s compilation or execution process individually. We had to ensure that the system was capable of running code in these languages securely and efficiently.
Text Editing Performance: Real-time text editing, especially with large chunks of code, was challenging. The Ropes Data Structure played a crucial role in improving the performance of our code editor, allowing us to make updates quickly and efficiently.
UI/UX Design: Building a seamless and intuitive user interface that could handle multiple users working in real-time was challenging. We needed to make sure the application was both functional and easy to use, which required balancing technical features with user experience.

Accomplishments that we're proud of

Real-Time Collaboration: The most significant achievement of this project is the real-time collaboration feature. Team members can now work together on the same code simultaneously and see updates instantly.
Multi-Language-Support: We successfully implemented support for various programming languages, including compiled languages like C, Java, and Rust, as well as interpreted languages like Python, JavaScript, and TypeScript.
Google Gemini Integration: Integrating Google Gemini for code reviews provided real-time feedback on the code, ensuring high-quality output and encouraging better coding practices.
Efficient Code Editing: The use of the Ropes Data Structure helped ensure the real-time code editor performed efficiently, even with large codebases and simultaneous updates from multiple users.

What we learned

This project taught us valuable lessons in both front-end and back-end development:

We learned how to efficiently manage real-time collaboration in web applications using WebSockets and React.
We gained experience in building scalable, high-performance back-end services using Go, especially for running and compiling code in different languages.
The integration of the Ropes Data Structure taught us how to handle large text data more efficiently, an important aspect of building a responsive real-time code editor.
Implementing Google Gemini gave us a deeper understanding of AI-powered tools for code review and how they can enhance the development process by detecting issues and offering suggestions.
The project helped improve our understanding of how to handle concurrent processes and execution flows, especially when running multiple instances of code in different languages.

What's next for NetCode

Looking ahead, we plan to:

Expand Language Support: We want to add more languages, especially more dynamic and niche programming languages, to make the platform even more versatile.
Improve Code Execution Security: While we’ve ensured secure execution of code on the server side, we plan to improve sandboxing to ensure better security when running user-submitted code.
Add More Features: We plan to add features like version control integration, user authentication, and the ability to save and share code projects between users.
Performance Enhancements: As more users begin using the platform, we aim to optimize the real-time collaboration features even further, ensuring it scales well under heavy load.

Overall, our goal is to continue improving NetCode to make it a powerful tool for collaborative coding and code review, helping developers of all skill levels work together seamlessly and efficiently.