FocusNotes

Home Screen
Video Processing
Notes
Light Mode
Side Menu for Saved Notes
Play Music in the Top Right
Music Created with Soundraw.io

Inspiration

My professor has always told me to focus on lecture instead of writing notes during class. His point was that students are too busy trying to copy everything down and are not actually paying attention to class. Although what he said was very true, I still wanted to have notes for later studying even if I was told not to take notes during class.

What it does

Focus Notes allows users to upload a video lecture and automatically generates clean, organized notes in a Notion-style layout. It transcribes the video, summarizes key points, and presents them in an editable format for easy review, editing, and export. It also offers AI generated background music created with Soundraw.io to help you study. This way, students can fully pay attention to class without worrying about missing important information.

How I built it

I built FocusNotes using React.js for the frontend and styled it with TailwindCSS to match Notion’s clean, minimalist look. For transcription, I integrated OpenAi using their API. Summarization and formatting were handled using custom JavaScript functions to structure the transcript into headings, bullet points, and checklists.

Challenges I ran into

Some of the major challenges included accurately transcribing videos with different accents or noisy backgrounds, organizing long transcriptions into meaningful notes, and designing an interface that was both simple and flexible like Notion. Integrating the transcription API and managing file uploads also required extra attention.

Accomplishments that I'm proud of

I am proud of creating a full workflow from video upload to polished notes, providing a seamless experience. I also successfully replicated a Notion-like UI experience, making the generated notes not only functional but also pleasant to read and edit.

What I learned

I learned a lot about working with AI for transcription, managing large file uploads, summarizing natural language into structured content, and building a frontend with clean UX principles. I also gained experience dealing with error management during API calls.