Inspiration
During long coding sessions, we kept running into the same problem: when encountering unfamiliar code, it broke our momentum to manually copy, search, and dig for answers or translations. We built this Chrome extension to eliminate that friction and make learning and understanding code as fast and intuitive as possible.
What it does
The Chrome extension automatically detects highlighted code and offers the user 3 options. Search, Translate, and Explain. Search lets the user search GitHub or Stack Overflow for the code, Translate translates the snippet into another language, and Explain integrates with Gemini AI to offer a simple explanation.
It's easy to look up code and forget it later, so we also save query history. The user can review their past searches, explanations, and translations to reinforce their understanding over time.
How we built it
The frontend is built with TypeScript, while the backend is powered by Go and MongoDB. We packaged everything as a Chrome extension to make it lightweight, easily accessible, and platform-independent.
Challenges we ran into
Designing a clean, intuitive UI that fit naturally within the constraints of a Chrome extension was a challenge. We also struggled with Chrome extension quirks, such as not being able to trigger an automatic popup when the user highlighted text, and had to find workarounds. In addition, coordinating communication between the frontend, backend, and different parts of the extension (like content scripts and background scripts) took careful planning and troubleshooting.
Accomplishments that we're proud of
None of us had built a Chrome extension before today, and we’re proud that we were able to build a fully functional product from scratch. Half of our team also learned TypeScript on the fly over the course of the hackathon to bring the frontend to life.
What we learned
We learned the ins and outs of Chrome extension development, especially coordinating across frontend and backend with clear interfaces and handoffs. We also learned how to deploy a database in MongoDB.
What's next for What's This Code?
We want to expand the project by gamifying the learning process. In future versions, users could take quick quizzes based on the code they highlight and earn points or level up, making it a more interactive and fun way to learn new concepts and languages.
Log in or sign up for Devpost to join the conversation.