Lazy Note

Ace your exams faster! Drag and drop your outline, and our context-aware AI perfectly fills in the blanks using live sources and 'Explain Like I'm 5' to simplify hard topics.

Comment

Inspiration

As high school students ourselves, we face the same problem in class every day: do we focus on listening and understanding, or do we rush to write everything down so we have notes later? Most of the time, we end up spending more time organising notes than actually learning. We realised that making a simple outline is fast, but filling in all the details takes a huge amount of time. Lazy Note is born to solve this problem — a study tool where the user handles the structure, and the AI handles the rest.

What it does

Lazy Note is a fast and flexible workspace designed to help students build study guides more efficiently. Instead of using a inferior, misleading, oblivious AI that may further hinder one's study progress, we created an infinite document canvas where users can drag and drop their outline to get started. If a user wants notes on a certain topic, they can click a button and our context-aware AI reads the entire document context — including uploaded documents, online research, and even live lecture input — then fills in the missing sections in a way that matches the rest of the notebook. Users can also choose different study personas such as “Explain Like I’m 5” or “Exam Prep” to make the output fit their learning style.

To make the information easier to remember, we also built several review tools into the platform:

AI Flashcards: Lazy Note can automatically turn notes into flashcards for active recall. We also added an interactive 3D flip-card design, so students see the question first and flip the card to reveal the answer.

Notebook to Podcast: For auditory learners, Lazy Note can transform written notes into a natural-sounding podcast summary using OpenAI + ElevenLabs.

Review Notes: We added a dedicated Review Notes section that turns saved notes into review materials like podcast transformations, flashcards, and fun facts.

Highlight-to-Explain: Users can highlight any text in the editor and instantly ask the AI to explain it in context.

**Highlight-to-Draw: **Users can also highlight text and generate an AI-made visual illustration of that concept, making difficult ideas easier to understand.

How we built it

The frontend was built using JavaScript, HTML, and CSS, giving the app a lightweight and polished interface. We used the OpenAI API to power core features such as note generation, explanation, and image generation. To make the AI outputs more connected, we built a custom context system that sends the user’s notebook content and related information into the model before generating responses.

For the Notebook-to-Podcast feature, we integrated ElevenLabs to generate realistic audio from written notes.

We also introduced Node.js backend for newer features such as the Draw flow, so that API calls can be handled more securely on the server side instead of directly in the browser. We also improved the user experience by adding a light mode default while still keeping dark mode available.

Challenges we ran into

One of the biggest challenges was creating the feeling of “one big canvas.” We had to solve several CSS issues, such as textareas escaping their containers and keeping the layout stable while the document kept growing. Synchronization was another challenge: when users rearranged their outline through drag-and-drop, the AI still had to understand which content belonged to which heading.

Another challenge was connecting the review features smoothly with the note-taking flow. Saved notes, flashcards, podcasts, fun facts, and highlight-based tools all needed to work together without making the interface feel confusing. We also ran into technical issues involving API providers, environment configuration, and moving image generation to a backend route.

Accomplishments that we're proud of

We are especially proud of how well the note-taking process connects with the review process. Instead of generating isolated pieces of text, the AI reads the notebook as a whole, which makes the results feel more natural and connected.

We are also proud that Lazy Note supports multiple learning styles. Students can review the same content through:

  • written notes,
  • flashcards,
  • podcasts,
  • and generated visuals.

This makes Lazy Note feel like more than just a note-taking app — it becomes a complete AI-powered study companion.

What we learned

We learned a lot about state management in JavaScript and how to handle complex DOM updates without relying on a frontend framework. We also learned how important it is to separate clean frontend interactions from backend API logic.

On top of that, this project taught us how to use multimodal AI in a practical way — not only for text generation, but also for audio, visuals, and interactive review tools that solve a real problem students face every day.

What's next for Lazy Note

Since this started as a hackathon demo, there is still a lot we want to improve. Our next steps are:

  • move more AI features to a secure Node.js backend,
  • improve the Draw and Explain flows,
  • expand the Review Notes system,
  • add quiz generation and progress tracking,
  • and make the app even more personalized for different learning styles.

Our long-term goal is to make Lazy Note an all-in-one study workspace where students can write less, understand more, and review smarter.

Built With

Share this project:

Updates