SVLMS

SVLMS (Smart Virtual Learning Management System) is a local-first web application that transforms any folder of Markdown or text files on your computer into a gamified, AI-enhanced learning environment. Intelligent File Parsing: Instantly reads local folders and organizes them into a structured course curriculum. AI "Thinking Mode": Uses ai to analyze complex code snippets or jargon within your local files and provides deep, step-by-step explanations without you leaving the app. Context-Aware Chat: A built-in AI assistant that "reads" the specific file you are viewing, allowing you to ask questions like "What does this function on line 12 do?" Content Enhancement: Includes a "Fix It" tool that uses AI to automatically format messy notes and an "Enhance" tool to expand brief notes into full tutorials. Gamification System: Tracks XP, user levels, daily streaks, and unlocks achievements to keep users motivated. Productivity Tools: Integrated Pomodoro timer, note-taking editor, and learning calendar. How we built it Frontend Framework: Built with React and Vite for a blazing-fast, responsive user interface. AI Integration: We utilized the Google GenAI SDK (@google/genai). We implemented specific prompt engineering for different "Actions" (Summarize, Explain, Hint, Fix Format) and used the thinkingConfig for complex code analysis. Local-First Architecture: We used the browser's File System Access API to read local directories securely. Persistence: Instead of a traditional backend database, we used IndexedDB (via idb-keyval) to store user progress, goals, achievements, and notes directly in the user's browser, ensuring privacy and offline capability. Styling: Designed with Tailwind CSS for a modern, clean aesthetic with full Dark Mode support. Challenges we ran into Context Management: Passing the correct file context to the AI Chat widget was tricky. We had to ensure that when a user switched files, the AI immediately "forgot" the old context and "learned" the new one to provide accurate answers. Prompt Engineering for Formatting: Creating the "Fix It" feature was difficult because LLMs love to chat. We had to rigorously tune the system instructions to ensure ai only returned the cleaned Markdown code without adding conversational filler like "Here is your fixed code." State Synchronization: Keeping the gamification elements (XP, Level, Streaks) in sync across different views (Dashboard, Sidebar, Profile) while persisting data asynchronously to IndexedDB required careful state management. Accomplishments that we're proud of The "Fix It" Feature: We are particularly proud of the AI formatter. It takes messy, unreadable class notes and instantly transforms them into beautifully structured Markdown documentation. Privacy-Centric AI: Successfully building a "Hybrid" model where the user's files stay on their machine, and only the specific text needed for an AI query is sent to the cloud. Gamification Logic: Implementing a full RPG-like system (XP algorithms, streak calculation based on dates, and conditional achievement unlocking) entirely on the client side. What we learned User Motivation: We learned that simple visual feedback (like a progress bar filling up or a streak flame icon) significantly impacts how "fun" a learning app feels. What's next for SVLMS Voice Mode: Integrating ai Live API to allow users to have a spoken conversation with their tutorials while commuting or walking. Auto-Generated Quizzes: Using ai to scan a tutorial file and automatically generate a 5-question multiple-choice quiz to test the user's retention before marking it as "Complete." Flashcard System: Automatically extracting key terms and definitions from local notes into a spaced-repetition system. PDF Support: Expanding the file parser to support PDF reading and analysis.

Built With

• react