Inspiration
As high school students, we often use videos as study aids to help us learn content. We noticed several instances in our lives where we wanted to send science lectures and videos to friends with comments for studying purposes, but felt it was very inconvenient to send a video then message the timestamp with everything there is multiple times for multiple points in the video. So, we decided to design a user-friendly web application that allows students to take notes with corresponding time stamps and share the entire video with the timestamp.
What it does
YoutubeNotes allows users to create an account and login, then paste video links into a search bar. Then, the video is displayed with an area to take notes beside it. Notes can be taken at specific timestamps of the video that are flagged and marked on a progress bar. Users can then access previous notes at any time, and share the notes with others.
How we built it
We separated our work into front-end and backend. We use spring boot Rest Controllers to communicate between the front end and back end.
For the front-end, we planned out the UI using photoshop, then used HTML, CSS, and Javascript to build the layout.
The most important elements of the front-end were the YouTube iframe to play the video, then use a contenteditable div element for the writing area. The synced timeline below the video is also made with 2 div elements with solid background colors and we use Javascript to load the note bars and place it depending on the note’s time.
We also perform some client-side youtube URL validation, through checking the video’s thumbnail size to see if one exists and then storing the video ID in localstorage if it exists to be used in the iframe source later.
The entire system runs on a tomcat server. This comes from the built-in server that is packaged with Spring Boot Web Application. Spring Boot was chosen as a framework for our back end because of its easy configuration, versatility, and the team’s language preference (which is Java). We implemented spring security to ensure the security of our application is not compromised in the modern era. We used Thymeleaf to integrate the requests for web pages into our tomcat server. Four relational databases were set up and was managed by our back end program. JSON Web Tokens were used in the authorization of mapping requests to verify user information.
Challenges we ran into
For the front-end, the main issue was getting the youtube embed to load based on localstorage, as well as retrieving data about the video, such as getting title and duration of the video. We found the issue to be that the API would only attempt once at the beginning to find the video before the video information loaded, and end up with nothing. We fixed this using a setInterval which repeatedly calls until a video is found.
Accomplishments that we're proud of
This was our first time building a web app, so we're proud of being able to work effectively to develop both the front-end and back-end of the application. In addition, we are proud of the security features configured with Spring.
What we learned
As beginners in web development, we learned a lot throughout the process. In the front-end we learned to use vanilla JS, HTML, and CSS. On the backend we learned how to use spring boot, about security configuration with spring, and how to use the Youtube and OpenAI APIs.
What's next for YouTubeNotes
We are also adding a feature that integrates OpenAI’s API, to create auto-generated notes. We are using YouTubes API to access video transcripts and then summarizing them into the main ideas presented in the video. Through this students can learn content without having to watch the entire video. We are also working on deploying YouTubeNotes.
Log in or sign up for Devpost to join the conversation.