DocUrCODE

Reading bad code? Use DocUrCODE to automatically generate annotations, and interactively navigate through your code. Powered by React, OpenAI and Google Cloud, this is code - understood

Comment

Inspiration

Have you ever been looking online for sample code, or a solution to a problem, but the code doesn't make sense? Have you been given code at work to review that just isn't documented at all? Have you gone to ChatGPT for these worries, but received an essay-length response where you can’t follow it along with the code? Well, look no further, as we created DocUrCODE!

What it does

DocUrCODE allows you to paste any type of code into a chat box, and then interactively navigate an annotated version of that code. The interactive exploration page presents two columns that you can independently scroll through: the right column displays the original code, while the left column presents a list of annotations that explain the code. Each annotation specifies the lines of codes that it explains (e.g. 12-15), and clicking on an annotation will highlight its corresponding sections of code. There are three levels of detail that the code can be annotated in: detailed, normal, or overview. DOC-ur-CODE can process up to 60,000 characters of code input, across any programming language.

How we built it

The front-end system was developed using React, with the back-end built using NodeJS and Express. Input code received from the user is parsed, and then sent to OpenAI using their Rest API. Using a specified prompt, annotation is then automatically generated and received from the API. These annotations are processed and then displayed to the user on our front-end.

Challenges we ran into

  1. Regex interpretation of strings ❗
  2. Prompt engineering ❔
  3. API Key Encryption 🔑
  4. Google Cloud deployment ☁️

Accomplishments that we're proud of

  1. Accurate and helpful annotations, across three different levels of detail 💬
  2. Clean, robust and interactive front-end design 💻
  3. API key encryption 🔑

What we learned

  1. Front-end development using React ⚛️
  2. API implementation ✨
  3. GCP Deployment ☁️
  4. Prompt optimization ❔

What's next for DOC_ur_CODE

The back-end framework has been designed to handle large amounts of input code, so we will be looking to support the input of multi-file programs over the next few weeks. For the long-term, we may also look to support the annotation and viewing of an entire github repository

Share this project:

Updates