Bindr

Inspiration

After COVID-19 the education industry was forced to shift its long-standing learning model of in-person classes to accommodate more online resources. This shift in learning models has been friendly for some (those accustomed to technology), but there are those who have struggled to keep up as well.

The inspiration of this project is to increase accessibility for those who may have struggled with the online learning model by creating an intuitive notetaking app that mimics what can be done with pen and paper.

What it does

Our app has functionality across three main domains of online content; audio, video, and web content. With each comes its own unique functionality. With web content, you can highlight text and attach notes linked to those highlighted sections, similar to color coding notes. You can also attach sticky notes on the page wherever you'd like and write more notes. With audio content, with the click of a button, you can bookmark sections of the podcast or other audio content and retrieve the transcription of the text with a 20-second buffer. Similarly, with video content, you can bookmark a section that will open up a popup window allowing for more notes. It will simultaneously get the timestamp, which can be used in tandem with the transcription functionality to get the text data from the video.

How we built it

Our tech stack: Languages: JavaScript, HTML, CSS, Python Technologies: GCP, Firebase, Assembly AI, Figma, Git/Github, Flask, YouTube API

For the backend, we used one of the Assembly AI endpoints that takes in audio files and transcribes it into text. We added a custom function for bookmarking that creates a 20second range, where the midpoint is when the user clicks the bookmark button. This will get the text within that 20second range.

Challenges we ran into

Because our app is a chrome extension, we were unsure if extensions had access to modify the dom elements. A lot of our time and efforts went into researching different methods to get the functionality we were looking for from within a chrome extension, like text highlighting.

Accomplishments that we're proud of

We are proud of our component design which were designed in Figma and implemented using raw HTML and CSS.

What we learned

javascript dom modification is difficult

What's next for Bindr

There are a few avenues where Bindr can expand:

Create a dashboard where notes can be aggregated into Bindrs and be shareable to other users
Increase functionality with Assembly AI endpoint metadata utilizing fields like sentiment analysis and auto chapters