Learn simply Ai

Your guide to learning any topic, simply.

Comment

Inspiration

Our inspiration was to solve a common problem: learning new, complex subjects can feel unstructured and overwhelming. We wanted to create a tool that acts as a personal AI tutor, making education accessible, engaging, and tailored to the individual. The goal was to move beyond static content and build an interactive environment that supports different learning styles—from reading and watching to testing and collaborating—all in one place. We believe that by simplifying the learning process, we can empower anyone to master any topic they choose.

What it does

Learn Simply AI is an all-in-one learning platform that leverages the power of the Google Gemini API to create a dynamic educational experience. Its core functionalities include:

AI-Generated Learning Roadmaps: Users enter any topic, and the AI generates a structured, step-by-step learning plan, breaking down complex information into manageable concepts. In-Depth Concept Exploration: Each step in the roadmap opens a detailed view with AI-generated explanations, a synopsis for memorization, and curated links to external YouTube videos and articles. Interactive Quizzes: After studying a concept, users can take an AI-generated multiple-choice quiz to instantly test their comprehension and get feedback on their performance. Collaborative Study Rooms: Users can create or join virtual study rooms to learn with friends via real-time audio/video chat and high-quality screen sharing. Integrated Learning Tools: In-Context Dictionary: Right-clicking any word provides an instant definition and automatically saves it to a personal vocabulary list. Personal Notes: A markdown-enabled notes section is available for every concept, saved to the user's learning history. Pomodoro Timer: A draggable, minimizable focus timer is available across the entire app to help users manage their study sessions effectively. Personalized Dashboard: Users have a "My Learning" hub to track their progress and review past topics, and a "My Vocabulary" page to practice saved words.

How we built it

We built Learn Simply AI using a modern, robust tech stack focused on providing a rich, interactive user experience.

AI Engine: The core of the application is the Google Gemini API (gemini-2.5-flash model), accessed via the official @google/genai SDK. We made extensive use of structured JSON output (schema) to ensure the AI's responses were reliable and could directly power our UI components for roadmaps, quizzes, and concept details. Frontend Framework: The application is built with React and TypeScript, providing a strong foundation for a scalable and type-safe single-page application. Styling: We used Tailwind CSS for its utility-first approach, which allowed for rapid development of a clean, modern, and responsive interface. Real-Time Communication: The Study Room feature is powered by the browser's native WebRTC APIs (getUserMedia for camera/mic and getDisplayMedia for screen sharing), enabling peer-to-peer communication. Local-First Data: User authentication, learning history, and vocabulary are managed client-side using the browser's localStorage and sessionStorage, making the app fast and functional without a complex backend. Architecture: The app uses a modern, module-based architecture with ES modules and an importmap for dependency management, avoiding the need for a traditional bundler setup.

Challenges we ran into

AI Data Reliability: Initially, getting consistently structured data from the AI was difficult. We overcame this by deeply integrating JSON schemas into our Gemini API calls. This forced the model to return data in a predictable format, which was a game-changer for building reliable features like quizzes and roadmaps. User Experience for Complex Tools: Designing features like the draggable Pomodoro timer and the resizable panel in the concept view was challenging. The initial timer was a modal that blocked the screen. Through user feedback, we redesigned it into a non-intrusive, draggable widget, which vastly improved usability. WebRTC and Browser Permissions: Implementing the Study Room feature required navigating the complexities of the WebRTC APIs and handling various browser permissions (camera, microphone, screen capture). We ran into several "Permissions Policy" errors, which we resolved by correctly configuring the security policies in our application's metadata.

Accomplishments that we're proud of

The Holistic Learning Loop: We are incredibly proud of creating a seamless, end-to-end learning journey. A user can start with just a topic, receive a structured plan, learn in-depth, take notes, test their knowledge, and build their vocabulary, all within a single, cohesive application. Fluid and Intuitive UI: We successfully created highly functional and user-friendly components, like the draggable Pomodoro widget and the interactive dictionary popup. These tools enhance the learning experience without getting in the way, which was a primary design goal. Deep and Meaningful AI Integration: We went beyond simple text generation and used the Gemini API's advanced capabilities (structured output) to dynamically create the application's core content. The AI isn't just an add-on; it's the engine that powers the entire educational experience. Enabling Social Learning: The implementation of the real-time Study Room, while challenging, adds a powerful collaborative dimension that we believe is crucial for modern learning.

What we learned

Advanced Prompt Engineering: We learned that the key to building reliable AI applications is not just writing good prompts, but also defining strict output structures. Using JSON schemas with the Gemini API is a powerful technique we mastered. User-Centric Component Design: The evolution of the Pomodoro timer taught us a valuable lesson in user-empathy. What is functionally correct is not always what is best for the user. Iterating based on usability is critical. Modern Web APIs: We gained hands-on experience with a range of modern browser APIs, especially WebRTC for real-time communication and the Speech Synthesis API for audio playback, deepening our understanding of what's possible directly in the browser.

What's next for Learn simply Ai

We have a clear vision for the future of Learn Simply AI, focused on deeper personalization and enhanced collaboration.

Cloud-Based Accounts: Transition from localStorage to a cloud-based backend (like Firebase) to allow users to access their learning history, notes, and vocabulary from any device. Real-time Study Room Backend: Implement a proper signaling server using WebSockets to move the Study Room from a P2P demonstration to a multi-user environment where friends can actually connect. AI-Generated Flashcards: Automatically create flashcards from the "Synopsis for Memorization" section of each concept, providing users with a powerful tool for spaced repetition. Adaptive Learning Paths: Use a user's quiz performance and learning history to have the AI suggest review topics or dynamically adjust the learning path to focus on areas where the user is struggling. Gamification: Introduce learning streaks, points, and achievement badges to make the learning process even more engaging and motivating.

Built With

Share this project:

Updates