VidNotes

VidNotes
Printing or saving notes
Settings modal
Previewing markdown
Taking notes

Inspiration

When taking notes on a video (on a small screen), I often find myself switching between two tabs, which means that I miss half the video, or squinting to see the video when using a split screen. Both of these are not efficient methods, and I often have to rewind the video to find the answer to the question I missed. So, I decided to create VidNotes, an innovative new way to take notes. VidNotes lets you overlay your notes on top of a video, which allows you to see both at the same time.

What it does

VidNotes is a website that lets you take notes on a video more efficiently. Simply enter the link of a youtube video, and you'll be able to take notes on the video while seeing both your notes and the video. VidNotes provides a semitransparent overlay where you take notes, and because it's semitransparent, you'll still be able to see the video.

VidNotes is also very customizable; you can change the opacity of the overlay to your liking and choose the color of the overlay.

How we built it

I built VidNotes using Next.js and TailwindCSS.

Challenges we ran into

Initially, I planned for the notes overlay to open automatically when the user started typing, but keyboard events that happened when the video's iframe was focused weren't sent to the parent window. Instead, I opted to have a clickable button to open and close the overlay.

Accomplishments that we're proud of

I'm proud that I managed to create a usable product in such a short amount of time. This is definitely a tool I'll be able to use in my life, and hopefully it's useful for others too!

What we learned

I learned a lot about cross origin security when trying to debug the iframe. I also became more familiar with the use of Next.js and TailwindCSS.

What's next for VidNotes

I'm planning to add more customization, such as choosing any color for the background and also changing the text color. I also plan to allow users to customize the output, including the font size and font family of the printed version.