Add Magno: Interactive learning platform for GitHub, Supabase & AI

[alejandrorivas-pixel]

Summary

This PR introduces Magno, a complete interactive learning platform designed to teach developers about GitHub, Supabase, and AI models through structured lessons, quizzes, and progress tracking.

Key Changes

Core Application Structure

• index.html: Main entry point with header, sidebar navigation, and content areas for landing page and lesson views
• css/styles.css: Comprehensive styling system with CSS custom properties, responsive design, and component styles (859 lines)
• js/app.js: Main application controller that orchestrates module loading, rendering, and navigation
• js/router.js: Client-side router managing navigation between modules/lessons with URL hash support and state persistence
• js/progress.js: Progress tracking system using localStorage to persist lesson completion status
• js/components.js: Rendering engine for lesson content sections (text, headings, code blocks, quizzes, tables, diagrams, etc.)

Content Modules

• content/modules.js: Module metadata (GitHub, Supabase, AI Models)
• content/github.js: 8 lessons covering repositories, commits, branches, pull requests, and collaboration workflows
• content/supabase.js: 5 lessons on backend services, authentication, databases, and storage
• content/ai-models.js: 5 lessons on AI model evolution, reasoning models, and context windows

Development Server

• serve.js: Simple Node.js HTTP server for local development with proper MIME type handling

Notable Implementation Details

• Modular Content System: Lessons are defined as data structures with section types (text, code, quiz, analogy, key-point, etc.), enabling flexible content rendering
• Quiz System: Interactive quizzes with immediate feedback, correct/incorrect answer highlighting, and disabled state management
• Responsive Design: Mobile-first approach with sidebar toggle for screens ≤768px
• Progress Persistence: Completion status saved to localStorage with visual progress bar in footer
• Navigation State: URL hash-based routing allows bookmarking and sharing specific lessons
• Rich Content Types: Support for code blocks with syntax highlighting, comparison tables, diagrams, analogies, and key-point callouts
• Spanish Language: All content and UI text in Spanish, targeting Spanish-speaking developers

User Experience Features

• Landing page with module cards showing completion progress
• Sidebar lesson navigation with visual indicators (active, completed)
• Header tabs for quick module switching
• Previous/Next lesson buttons with intelligent boundary handling
• Smooth animations and transitions throughout
• Custom scrollbar styling for content and sidebar areas

https://claude.ai/code/session_01KZm4ukQjRULRHwoN9aZ967