Inspiration
As a university student, I found myself constantly running into a frustrating problem with lecture recordings. Sometimes, when I went back to review a lecture, the professor's videos were outdated and didn't match the notes I had taken in class. Other times, I would look at my notes and think, "What the hell did I write?" I was so focused on writing everything down that I would miss things or I wasn't actually understanding everything because I was so focussed on writing everything down. I wanted to create something that would let students focus on understanding their lectures in the moment, without worrying about missing important information.
What it does
Lectra is the resurrection of tape recorders. It is a recording app that captures both your screen and audio, combining them into a video you can revisit whenever you need. This means students can review exactly what their professor showed and said, rather than relying on notes or potentially outdated recordings. While recording, users can add timestamped pins to mark important moments making it easy to rewind and revisit. Lectra also includes controls like rewind and fast-forward, and an option to download recordings. Each user can create a private, password-protected profile, keeping their recordings and notes separate from other users on the same device.
How we built it
I built Lectra using Kiro, with HTML, CSS, and JavaScript. I wanted to make it accessible without requiring subscriptions, API keys, or complicated setup. The app is hosted using GitHub Pages and runs entirely in the browser. Recordings and notes are stored locally using browser-based storage, while password-based encryption helps keep each user's profile private. This approach means users can access Lectra through a link without needing to install anything or create an account with an external service.
Challenges we ran into
One of the biggest challenges was figuring out how to make Lectra work entirely in the browser while still supporting features like screen and audio recording, video playback, and private user profiles. Another challenge was implementing rewind and fast-forward in a way that felt natural. I wanted users to be able to replay the last few seconds of a lecture while the recording continued, without interrupting the recording itself. I also had to make sure that users could move between important timestamps and that their recordings remained saved. Making the app work without a server introduced additional challenges around storing large video files, protecting user data, and ensuring recordings stayed available after refreshing the page.
Accomplishments that we're proud of
I'm especially proud that I was able to take an idea based on a problem I experienced at school and turn it into a working app that people can access through a single link. I'm also proud of making Lectra work without requiring an API key, subscription, or complicated setup. Users can create private profiles, record their lectures, add timestamped pins, replay recordings, and download their videos. I also tested the app's main features to make sure they worked together reliably.
What we learned
Through building Lectra, I learned how much goes into turning an idea into a working product. I had to think beyond the interface and consider how recordings are stored, how user privacy is protected, and how different features interact. I also learned how to use AI-assisted development with Kiro to build something much more complex than I initially knew how to create. It taught me the importance of testing, breaking larger problems into smaller pieces, and continuing to improve a product when the first version doesn't work exactly as expected. Most importantly, I learned that a useful product starts with identifying a real problem and finding a way to make someone's experience better.
What's next for Lectra
I'd like to continue improving Lectra based on how students actually use it. Some features I'd like to explore include making recordings accessible across multiple devices, adding more ways to organize and search through lectures, and improving the automatic summaries so students can quickly review the most important concepts. Ultimately, I want Lectra to become a tool students can rely on throughout the school year, helping them spend less time worrying about taking perfect notes and more time actually learning.
Built With
- css
- github
- html
- javascript
- kiro
- mediarecorder
- screensharing
- svg
