~/project/vidnotes.md
VidNotes
Notes that ride along with the video
- date
- August–September 2021
- type
- Side-Project
Programmer, with Nikole Hu on design
## overview
Ever wanted to take notes on a YouTube video without splitting your screen? Or send a video to a friend with instructions attached? Or take notes on someone else's device without logging into anything?
VidNotes is a free web app that pairs a YouTube video with notes side by side. Send a link with the notes baked in, or, if you're on a borrowed device, email the notes straight to yourself for later.
## how-i-built-it
How I built it
I set up a Flask server and built the site from our Figma design with HTML and CSS. JavaScript pre-validates the forms before Python checks them on the backend. Submitted data is captured with WTForms, processed in Python, and stored in MongoDB. The smtplib module lets users email notes to themselves, and the whole thing is hosted on Heroku.
## challenges
Challenges
Embedding the video was harder than expected: YouTube has multiple domains and URL formats, and a link copied from a playlist won't embed as-is. I fixed it by normalizing the string. The bigger challenge was deploying to Heroku, my first time hosting a Flask server, so I had to learn what extra files the app needed for Heroku to build it.
## what-i-learned
What I learned
Working with a designer sharpened my teamwork, building the site sharpened my front end, and standing up the Flask server sharpened my backend. Along the way I picked up environment variables, sending email from Python, MongoDB, and deploying to Heroku, all things I've carried into later projects.
## what-s-next
What's next
A login system, so people can keep all their notes without emailing them or holding onto a link.
## next-project
Focomend
YouTube, minus the rabbit hole
read the write-up