FAE: Accelerated Development

FAE is a VSCode extension with a companion Chrome extension that links code-relevant resources you open in your browser to your codebase, so the next time you need relevant documentation, you can have those resources directly next to the specific lines code in the VS Code. It also comes with a handy dashboard that displays an interactive dependency graph of your project, has an auto generated Wiki of your codebase, and tracks your time spent in the editor live. Additionally, annotated links come with an in-IDE hover URL preview feature.

Reimagine your development experience with FAE- forgetting your browser IDE context? Tired of explaining your codebase to that one newbie for months? We got you covered! I mean, we got your code covered- from a top to bottom wiki, with every chunk annotated with context from your browser.

What inspired us

Despite the abundance of tab managers, developers face challenges remembering context of an opened URL or being able to find specific tabs once we have too many open. On the other hand, onboarding processes for existing codebases take months because of lack of detailed documentation and lack of insight into the development process.

By syncing our IDE development process with our browsing activity, we aim to overcome the challenges of forgotten context and add insight about the development process to new developers. With the added auto-generated project wiki, the onboarding process is simplified without extra work on part of the original developer such as specific code formatting that most existing documentation generators use.

What we learned

Making this project was a fun and valuable experience for all of us. All of us have different experience levels and technical specialties so we benefited from each other and had a unique learning experience. Here are our highlights:

VSCode & Chrome Extension Development: Cross platform extension sync (Bonus – our first time with extension development for VSCode or Chrome!)
Code Hashing & Scope chunking: Hashing chunks of code with unique identifiers and developing chunking algorithm tied with scoping. This algorithm allows us to track live time changes to the code and update where the links are tied to. This allows us to tie links to code chunks as opposed to line numbers
Dependency network generation and WebView display integration: Generation of raw adjacency list data and visualizing a network on the frontend from that

How we built our project

FAE is built primarily on TypeScript for the VSCode extension and JavaScript for the Chrome extension. We use WebPack for bundling that ensures smaller, uniform code and faster deployment. We use a Firebase backend for tracking what piece of the codebase the user is on and syncing the linked pages between Chrome and VSCode.