LunaNotes

Inspiration

LunaNotes was inspired by the everyday chaos of learning and working—scribbled lecture notes, unstructured meeting memos, voice recordings full of insights, and the constant struggle to retrieve and review key information efficiently. We recognized the need for a tool that could turn this clutter into structured, interactive resources that truly empower users to learn smarter and recall faster. The advancements in AI, especially in large language models like Google Gemini, fueled our vision to make seamless knowledge organization not just possible, but delightful.

What it does

LunaNotes transforms messy, raw notes into clean, organized summaries—automatically fixing typos, pulling out key points, defining crucial terms, and mapping concepts visually. Users can interact with their processed notes through dynamic mindmaps, an AI-powered chat interface, and a productivity toolkit that includes Pomodoro timers and draft management. Input is flexible—paste text, upload PDF/docx/md/txt files, or use voice dictation. The result is structured brilliance from every note.

How we built it

• Frontend: Built with Angular (v20+), modular standalone components, and Angular Signals for reactive state management.
• Styling: Tailwind CSS delivers a sleek, responsive, and accessible user experience with light/dark themes.
• AI Integration: Google Gemini API (gemini-2.5-flash) powers note structuring, summarization, glossary extraction, and mindmap generation.
• File & Speech Features: Integrated pdf.js and Mammoth.js for client-side document parsing; Web Speech API for voice-to-text input.
• Visualization: Mermaid.js renders mindmaps dynamically from AI-generated code.
• Tooling: Leveraged TypeScript strict typing, Git/GitHub for version control, npm for dependencies, and Visual Studio Code with best-in-class extensions.

Challenges we ran into

• Fine-tuning AI prompts to ensure outputs were concise, clear, and compatible with downstream mindmap renderers.
• Parsing complex PDF and Word documents accurately in-browser, especially with mixed formatting or embedded formulas.
• Maintaining fast, smooth performance—especially when processing large files or rendering detailed mindmaps.
• Achieving a consistent, intuitive user experience across devices, browsers, and input types.
• Ensuring security and privacy when handling users' sensitive notes and files.

Accomplishments that we're proud of

• Built a seamless end-to-end workflow that lets users go from raw note input to structured, interactive output—in seconds.
• Developed a mindmap generator that creates beautiful, navigable visualizations from unstructured text.
• Integrated a context-aware AI chat so users can ask questions directly about their notes and receive focused answers.
• Designed an elegant UI that combines aesthetics with usability, making LunaNotes enjoyable for long study or work sessions.
• Enabled robust file and voice input options, accommodating multiple learning and working styles.

What we learned

• Iterative prompt engineering is crucial—small prompt tweaks make a huge difference in AI output quality.
• User-centric design requires continual feedback loops; every feature benefits from actual user input.
• Modern web frameworks are powerful but demand careful state management and modular architecture as complexity scales.
• Accessibility and responsiveness must be baked in from the start, not added at the end.

What's next for LunaNotes

• Collaboration: Add real-time, multi-user note processing and shared mindmaps.
• Mobile Experience: Develop a progressive web app (PWA) for seamless mobile access.
• Enhanced AI: Incorporate more advanced generative tools for deeper concept linking and automated study guides.
• Integrations: Connect with popular cloud storage and edtech platforms to streamline workflows.
• Continuous user feedback: Grow LunaNotes with every suggestion, making it the most delightful and effective study companion for everyone.

Built With

• autoprefixer
• chatgpt
• cline
• context-api
• create-react-app
• firebase-sdk
• google-ai-studio
• jsx/tsx
• lucide-react
• postcss
• react-18
• react-router
• react-scripts
• tailwind-css
• vercel
• windsurf