Streaminar - Time Sensitive Video Notes

Inspiration

During the global pandemic, studying and note-taking online is crucial to ensuring a successful education. Identifying the problem of inefficient note-taking, we decided to develop a solution to make studying and writing much more easier for everyone.

What it does

Our solution to the problem of inefficient note-taking is create a Chrome extension that allows one to create annotations featuring text and a timestamp during videos, as well as create notes that can be viewed from different devices. These annotations are easily creatable and customizable, with a focus on displays of text that can be timed so that they can be set to pop up at a specific time, and then disappear after a user-specified amount of time. The notes generated by both the video annotations and regular note taking are displayed within the extension component, allowing users to easily open and view them, as well as delete or change them.

How we built it

We used React to code the annotation backend, and JavaScript to code the extension backend, with the frontend being coded in html and CSS. We were able to use the Chrome.storage api to send data back and forth with the React and JavaScript, as well as use it to display information from the backend to the frontend.

Challenges we ran into

This was our first time working with Chrome extensions, so learning how to efficiently develop in this library was a big challenge we faced as a team. However, through a combination of attending the workshop, self-learning, and a whole lot of google searches, we can confidently say that we have created a project we are proud of.

Accomplishments that we're proud of

Something that surprised all of us is how unnecessary sleep is. Being able to produce a fully developed project while sleep deprived is an accomplishment that we are proud of and believe is not only unique to us, but also to the rest of the teams at Hack the North.

What we learned

As a team, we learned a lot about the inner workings of the Chrome extensions api, as well as how to effectively mesh React, JavaScript, and Chrome altogether.

What's next for team

This was a fantastic learning opportunity for all of us, and we will take the lessons we learned and strengthened at Hack the North into our future events and commitments.