CodeSnap

Tired of wasting hours copying code from lectures or YouTube videos? We'll do it for you and even add explanations! Introducing CodeSnap: Streamlining your coding journey, one line at a time.

Comment

💡Inspiration

You are at a hackathon. You are watching videos and tutorials online about your topic, aspiring to learn more about the field. However, none of the videos you watch provide any code, and copying all of the code manually would take way too long. Or, you are in a workshop or lecture, and the professor does not provide any code they go over in class. Wouldn’t it be nice if there was an application that you could use to convert screenshots or images of code into code that can be copied and pasted directly into an IDE? Wouldn’t it be nice if this application could also provide some comments and explanations for the code?

🔎What it does

Our application, the CodeSnap, can effectively and efficiently convert images of code in all programming languages into code that can be directly pasted and edited in an IDE. The user interface is web-based and the user will have the option to have detailed explanations and comments in the code or just the code displayed. The image is then converted into code, which will display directly on the webpage. This code will then be pastable into an IDE, fully formatted.

🔨How we built it

We developed CodeSnap by leveraging HTML, CSS, and Javascript for our frontend, while our backend was powered by Express.js. To enhance our image-to-text algorithm, we harnessed the capabilities of machine learning. We seamlessly integrated the OpenAI API to intelligently annotate code extracted from the images.

🚧 Challenges we ran into

In making CodeSnap, we ran into many challenges. As people with little to no experience with JavaScript, we were extremely challenged by the steep learning curve. But, only after watching countless videos and struggling for hours upon hours, did we realize the immense benefit our application could bring to the world of programming, in particular, for university students. Another challenge that we ran into was implementing the ChatGPT API into our program in order to insert comments into the code. The methods from official ChatGPT sources were not functioning properly, so a lot of time was spent on debugging and finding new ways of implementing the API into our program. After we successfully found and fixed the bug, we unintentionally uploaded the program to GitHub with the API Key visible, resulting in the API Key being stolen one hour later, leading to all of our API credits being used.

🎖️Accomplishments that we're proud of

We are proud of creating an incredibly useful tool that will aid generations of university students in their programming courses. Even during this hackathon, we would be dreaming of using this tool when watching coding videos to help us learn JavaScript. Having this application would have greatly helped us speed up the coding process. We are also proud that this application can help future software professionals improve their efficiency, lowering the costs of software in the long run. Additionally, we are extremely proud of persevering through all of the great challenges that we faced, finishing off with an amazing project that will be incredibly useful in the future. Finally, as the first time creating a full website, it was a wonderful, rewarding experience.

📕 What we learned

Through our journey in creating CodeSnap, we learned about the value of teamwork in achieving a common goal. In addition to coding, we spent a lot of time planning our project and planning our time wisely. This helped us stay focused and on track throughout the entire hackathon. We also learned a lot about web development and JavaScript, as this was our first time creating a full website. We learned more about the ethical use of artificial intelligence in the development of applications, which will be very useful to us as aspiring software developers. Through our experience of having our API Key stolen, we were able to learn the importance of keeping private data secure. Our hope for the future is that we can utilize all of the valuable skills that we developed and lessons that we learned during JamHacks to continue to change the world with our ideas.

🪜 What's next for CodeSnap

The main next step for CodeSnap is to make it possible to integrate CodeSnap directly in an IDE, for example, by creating a VSCode Extension that could perform the same functionalities as the website. The benefits of creating an extension directly in VSCode would be the incredible convenience that it brings to the coder because the code would directly appear in the IDE. To make CodeSnap a marketable venture, we would use Google AdSense to put advertisements on the website to generate revenue. Finally, since our target market would be university students, we would survey current university students to garner feedback regarding the application, and apply that feedback to perfect it.

Overall, we strongly believe that CodeSnap would be an incredibly useful tool for all university students to use in their programming classes when watching videos and lectures. We hope that you will consider using CodeSnap in the future too!

Built With

Share this project:

Updates