Learner mosiac

• 

  Interfaces

• 

Here is a complete, polished draft tailored for your Devpost/hackathon submission sections. You can copy and paste this directly into your project editor:

What it does

Learner Mosaic transforms rigid learning structures into a dynamic, personalized knowledge map. Instead of forcing everyone through identical linear courses, it breaks complex subjects into modular knowledge nodes ("mosaic tiles").

• Interactive Knowledge Mapping: Visualizes a learner’s mastery, strengths, and knowledge gaps in a clean dashboard.
• Adaptive Learning Paths: Dynamically recalculates recommended next steps based on real-time performance and prerequisites, ensuring students master foundational concepts before moving forward.
• Visual Progress Tracking: Replaces boring percentage bars with a cohesive "mosaic" that fills in as concepts are mastered, giving learners tangible, motivating feedback. ## How we built it We built Learner Mosaic using a modern full-stack web architecture designed for modularity and high performance:
• Frontend: Built with React and Next.js for server-side rendering and fast page loads, styled using Tailwind CSS for a responsive, modern interface.
• Backend: Powered by Node.js and Express, handling API endpoints, progression logic, and adaptive path calculation algorithms.
• Database & Data Management: MongoDB / PostgreSQL to map skill graph relationships, track completed nodes, and store user analytics.
• Version Control: Managed and collaborated using Git and GitHub. ## Challenges we ran into
• Graph Dependency Logic: Algorithmic routing proved tricky — building a system that tracks prerequisites between skill nodes without creating circular dependencies required careful graph data structure design.
• State & Performance Synchronization: Ensuring real-time dashboard updates as users complete quizzes or view lessons required optimizing state management to prevent unnecessary re-renders.
• UI/UX Simplification: Condensing dense educational data into an intuitive, non-overwhelming visual mosaic took several layout iterations. ## Accomplishments that we're proud of
• Dynamic Skill Graphing: Successfully designed a functional progression engine that intelligently adapts paths based on learner performance.
• Seamless User Experience: Built a clean, frictionless interface where complex knowledge trees feel engaging and simple to navigate.
• Scalable Core Architecture: Structured the codebase so new subjects, content nodes, and assessment types can be added without changing the underlying routing engine. ## What we learned
• Graph Data Structures in Web Dev: Gained deeper hands-on experience structuring Directed Acyclic Graphs (DAGs) to model educational prerequisites.
• Modular UI Design: Learned how to effectively break complex dashboards into reusable design components for quicker iteration.
• User-Centric Analytics: Realized that presenting user data visually (like a mosaic) significantly boosts motivation compared to numerical scores alone. ## What's next for Learner Mosaic
• AI Content Decomposition: Integrating Large Language Models to automatically ingest long PDFs or lecture notes and chunk them into study-ready skill tiles.
• Collaborative Learning Hubs: Allowing peers and study groups to share custom mosaics, fill missing gaps together, and track team progress.
• Spaced Repetition Engine: Incorporating automated memory retention algorithms that prompt learners to refresh fading mosaic tiles before knowledge gaps form.

Built With

• .tel